Creating motion in recently added elements using varied keyframe settings

Question

Creating motion in recently added elements using varied keyframe settings

I'm currently working on a simple animation project. The goal is to create a circle that appears and moves upwards when you click inside the blue container. I managed to find out how to incorporate JavaScript values into keyframes, but the issue is that it's affecting all objects instead of just the newly created one. If you try running the code snippet and click in different areas, you'll see what I mean.

I came across an amazing solution using the Raphael library, but as a beginner, I'd like to achieve something similar using JavaScript. Is it actually possible? And if so, how?

var bubble = {
    posX: 0,
    posY: 0,
    size: 0
  };

var aquarium = document.getElementById("container");

var ss = document.styleSheets;
var keyframesRule = [];
function findAnimation(animName) { //function to find keyframes and insert replace values in them
  for (var i = 0; i < ss.length; i++) {
    for (var j = 0; j < ss[i].cssRules.length; j++) {
      if (window.CSSRule.KEYFRAMES_RULE == ss[i].cssRules[j].type && ss[i].cssRules[j].name == animName) {
        keyframesRule.push(ss[i].cssRules[j]);
      }
    }
  }
  return keyframesRule;
}


function changeAnimation (nameAnim) {  //changing top value to cursor position when clicked
  var keyframesArr = findAnimation(nameAnim);
  for (var i = 0; i < keyframesArr.length; i++) {
    keyframesArr[i].deleteRule("0%");
    keyframesArr[i].appendRule("0% {top: " + bubble.posY + "px}");
  }
}


function createBubble(e) {
  "use strict";
  bubble.posX = e.clientX;
  bubble.posY = e.clientY;
  bubble.size = Math.round(Math.random() * 100);
  var bubbleCircle = document.createElement("div");
  aquarium.appendChild(bubbleCircle);
  bubbleCircle.className = "bubble";
  var bubbleStyle = bubbleCircle.style;
  bubbleStyle.width = bubble.size + "px";
  bubbleStyle.height = bubble.size + "px";
  bubbleStyle.borderRadius = (bubble.size / 2) + "px";
  //bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
  bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
  changeAnimation("moveUp");
  bubbleCircle.className += " animate";
}

aquarium.addEventListener("click", createBubble);
//console.log(bubble);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80px;
  left: 0;
  background-color: rgb(20,255,200);
}

#surface {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 40px;
  opacity: 0.5;
  background-color: rgb(250,250,250);
}

.bubble {
  position: fixed;
  border: 1px solid blue;
}

.animate {
  animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
  -webkit-animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
}


@keyframes moveUp{
  0% {
    top: 400px;
  }
  100% {
    top: 80px;
  }
}

@-webkit-keyframes moveUp{
  0% {
    top: 400px;
  }
  100% {
    top: 80px;
  }
}

<body>
  <div id="container">
  </div>
  <div id="surface">
    
  </div>
</body>

javascript css animation

Answer 1

Answer №1

Here is a potential solution that I came up with:

First, I removed the unnecessary functions changeAnimation() and findAnimation() as they are not required.
I updated the keyframe to only include the styling for 100%:
```
@keyframes moveUp { 100% {top: 80px;} }
```
I adjusted the positioning of the new bubble by assigning the top value based on the clientY property.
After 5 seconds, I set the top property of the bubble to match the offset of the #container (which is 80px). This ensures that the bubble remains in place after the animation completes.

var bubble = {
  posX: 0,
  posY: 0,
  size: 0
};

var aquarium = document.getElementById("container");

function createBubble(e) {
  "use strict";
  bubble.posX = e.clientX;
  bubble.posY = e.clientY;

  bubble.size = Math.round(Math.random() * 100);
  var bubbleCircle = document.createElement("div");
  aquarium.appendChild(bubbleCircle);
  bubbleCircle.className = "bubble";
  var bubbleStyle = bubbleCircle.style;
  bubbleStyle.width = bubble.size + "px";
  bubbleStyle.height = bubble.size + "px";
  bubbleStyle.borderRadius = (bubble.size / 2) + "px";
  bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
  bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
  bubbleCircle.className += " animate";

  // Adjusting top position after 5 seconds to maintain bubble's position 
  // once the animation is complete
  (function(style) {
    setTimeout(function() {
      style.top = '80px';
    }, 5000);
  })(bubbleStyle);
}

aquarium.addEventListener("click", createBubble);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80px;
  left: 0;
  background-color: rgb(20, 255, 200);
}

#surface {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 40px;
  opacity: 0.5;
  background-color: rgb(250, 250, 250);
}

.bubble {
  position: fixed;
  border: 1px solid blue;
}

.animate {
  animation: moveUp 5s linear;
  /*cubic-bezier(1, 0, 1, 1);*/
  -webkit-animation: moveUp 5s linear;
  /*cubic-bezier(1, 0, 1, 1);*/
}

@keyframes moveUp {
  100% {
    top: 80px;
  }
}

@-webkit-keyframes moveUp {
  100% {
    top: 80px;
  }
}

<body>
  <div id="container"></div>
  <div id="surface"></div>
</body>

The issue with your original code was that it globally impacted all bubbles by altering the @keyframes moveUp.

Answer 2

Here is a potential solution that I came up with:

First, I removed the unnecessary functions changeAnimation() and findAnimation() as they are not required.
I updated the keyframe to only include the styling for 100%:
```
@keyframes moveUp { 100% {top: 80px;} }
```
I adjusted the positioning of the new bubble by assigning the top value based on the clientY property.
After 5 seconds, I set the top property of the bubble to match the offset of the #container (which is 80px). This ensures that the bubble remains in place after the animation completes.

var bubble = {
  posX: 0,
  posY: 0,
  size: 0
};

var aquarium = document.getElementById("container");

function createBubble(e) {
  "use strict";
  bubble.posX = e.clientX;
  bubble.posY = e.clientY;

  bubble.size = Math.round(Math.random() * 100);
  var bubbleCircle = document.createElement("div");
  aquarium.appendChild(bubbleCircle);
  bubbleCircle.className = "bubble";
  var bubbleStyle = bubbleCircle.style;
  bubbleStyle.width = bubble.size + "px";
  bubbleStyle.height = bubble.size + "px";
  bubbleStyle.borderRadius = (bubble.size / 2) + "px";
  bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
  bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
  bubbleCircle.className += " animate";

  // Adjusting top position after 5 seconds to maintain bubble's position 
  // once the animation is complete
  (function(style) {
    setTimeout(function() {
      style.top = '80px';
    }, 5000);
  })(bubbleStyle);
}

aquarium.addEventListener("click", createBubble);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80px;
  left: 0;
  background-color: rgb(20, 255, 200);
}

#surface {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 40px;
  opacity: 0.5;
  background-color: rgb(250, 250, 250);
}

.bubble {
  position: fixed;
  border: 1px solid blue;
}

.animate {
  animation: moveUp 5s linear;
  /*cubic-bezier(1, 0, 1, 1);*/
  -webkit-animation: moveUp 5s linear;
  /*cubic-bezier(1, 0, 1, 1);*/
}

@keyframes moveUp {
  100% {
    top: 80px;
  }
}

@-webkit-keyframes moveUp {
  100% {
    top: 80px;
  }
}

<body>
  <div id="container"></div>
  <div id="surface"></div>
</body>

The issue with your original code was that it globally impacted all bubbles by altering the @keyframes moveUp.

Answer 3

Answer №2

Your code may have a flaw in updating keyframes that affect all bubbles. To address this, I experimented with using transition and adjusting the top position after adding the element to the DOM for animation.

The challenge lies in timing the addition of the element to the DOM correctly. Despite trying MutationObserver, it seemed to trigger before the element was actually rendered. Resorting to a timeout workaround mimics this waiting period, but there may be more efficient methods available. I'm open to suggestions on improving this process.

var bubble = {
  posX: 0,
  posY: 0,
  size: 0
};

var aquarium = document.getElementById("container");

function createBubble(e) {
  "use strict";
  bubble.posX = e.clientX;
  bubble.posY = e.clientY;
  bubble.size = Math.round(Math.random() * 100);

  var bubbleCircle = document.createElement("div");
  aquarium.appendChild(bubbleCircle);

  bubbleCircle.classList.add("bubble");
  var bubbleStyle = bubbleCircle.style;

  bubbleStyle.width = bubble.size + "px";
  bubbleStyle.height = bubble.size + "px";
  bubbleStyle.borderRadius = (bubble.size / 2) + "px";
  bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
  bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";

  setTimeout(function() {
    bubbleCircle.classList.add("moveUp");
  }, 50);
}

aquarium.addEventListener("click", createBubble);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80px;
  left: 0;
  background-color: rgb(20, 255, 200);
}

#surface {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 40px;
  opacity: 0.5;
  background-color: rgb(250, 250, 250);
}

.bubble {
  position: fixed;
  border: 1px solid blue;
  transition: 5s;
}

.moveUp {
  top: 80px !important;
}

<body>
  <div id="container">
  </div>
  <div id="surface">

  </div>
</body>

I opted for using the classList object over className += ... for increased reliability.

Answer 4

Your code may have a flaw in updating keyframes that affect all bubbles. To address this, I experimented with using transition and adjusting the top position after adding the element to the DOM for animation.

The challenge lies in timing the addition of the element to the DOM correctly. Despite trying MutationObserver, it seemed to trigger before the element was actually rendered. Resorting to a timeout workaround mimics this waiting period, but there may be more efficient methods available. I'm open to suggestions on improving this process.

var bubble = {
  posX: 0,
  posY: 0,
  size: 0
};

var aquarium = document.getElementById("container");

function createBubble(e) {
  "use strict";
  bubble.posX = e.clientX;
  bubble.posY = e.clientY;
  bubble.size = Math.round(Math.random() * 100);

  var bubbleCircle = document.createElement("div");
  aquarium.appendChild(bubbleCircle);

  bubbleCircle.classList.add("bubble");
  var bubbleStyle = bubbleCircle.style;

  bubbleStyle.width = bubble.size + "px";
  bubbleStyle.height = bubble.size + "px";
  bubbleStyle.borderRadius = (bubble.size / 2) + "px";
  bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
  bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";

  setTimeout(function() {
    bubbleCircle.classList.add("moveUp");
  }, 50);
}

aquarium.addEventListener("click", createBubble);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80px;
  left: 0;
  background-color: rgb(20, 255, 200);
}

#surface {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 40px;
  opacity: 0.5;
  background-color: rgb(250, 250, 250);
}

.bubble {
  position: fixed;
  border: 1px solid blue;
  transition: 5s;
}

.moveUp {
  top: 80px !important;
}

<body>
  <div id="container">
  </div>
  <div id="surface">

  </div>
</body>

I opted for using the classList object over className += ... for increased reliability.

Creating motion in recently added elements using varied keyframe settings

Answer №1

Answer №2

Similar questions

The text-overflow property with ellipsis functionality appears to be malfunctioning in Internet Explorer when applied to input elements, yet functions

The result of the $.post() request is back

Adjust the size of an image with jquery without relying on server-side scripts

Modify the appearance of a Javascript file that is parsing data from a text file

Modify mesh in three.js scene

Consistently maintaining a uniform distance between icons and the border box is essential

Creating an animated sidebar that moves at a different speed than the rest of the

Performing HTTP requests within a forEach loop in Node.js

Launching a Popup in ASP.NET followed by a Redirect

Why is the alignment of my page titles off?

Post Request to Express API does not produce any output

Directus | The Revision is not being updated when a collection is created in Flows

If the variable is not defined, then utilize a different one

Executing a function when clearing an autocomplete textfield in Material-UI

Ways to adjust the color of a navbar link according to the current page you are visiting?

Different approach to loading Handlebars template instead of using fs.readFile with res.json in Express

Visitors may not immediately notice the CSS/JavaScript modifications in their browsers

What is the best way to display the press down (:active) effect before releasing the finger?

Creating a stationary menu on the header that overlaps both the header and content on mobile browsers

Automatically adjusting the height of a Bootstrap carousel as the token-input list grows in size