What is the best way to continuously loop the animation in my SVG scene?

Question

What is the best way to continuously loop the animation in my SVG scene?

After designing a SVG landscape with an animation triggered by clicking the sun, I encountered an issue where the animation only works once. Subsequent clicks do not result in any animation.

Below is my current JavaScript code:

const sun = document.getElementById("sun");
const stage = document.getElementById("stage");

sun.addEventListener("click", function() {
  sun.style.animationPlayState = "running";
  stage.style.animationPlayState = "running";
});

sun.addEventListener("animationend", function() {
  // Reset sun to initial position
  sun.setAttribute("cx", "700");
  sun.setAttribute("cy", "100");
  // Pause animations for both sun and stage

  sun.style.animationPlayState = "paused";
  stage.style.animationPlayState = "paused";
});

javascript css animation

Answer 1

Answer №1

If you're interested, there's an informative article on this topic that you can check out at Restart CSS Animations. Essentially, the issue stems from CSS lacking the ability to restart an animation once it has finished playing.

In addition to the solutions mentioned in the aforementioned article, I came across a method that effectively resets the animation. This means that when you click on the sun again, the animation will restart.

const sun = document.getElementById("sun");
const stage = document.getElementById("stage");

sun.addEventListener("click", function() {
  sun.classList.add("animation");

  sun.style.animationPlayState = "running";
  stage.style.animationPlayState = "running";
});

sun.addEventListener("animationend", function() {
  // Reset sun position to its initial values
  sun.setAttribute("cx", "700");
  sun.setAttribute("cy", "100");
  // Set animation state to paused for both sun and stage
  sun.classList.remove("animation");
});

@keyframes move-left {
  0% {
    left: 0;
  }
  100% {
    transform: translateX(100px);
  }
}

.animation {
  animation: move-left 1s ease-in backwards;
  animation-play-state: paused;
}

#sun {
  position: absolute;
  width: 40px;
  background: red;
}

<div id="sun">.</div>
<div id="stage"></div>

By applying a class onclick and removing it on animationend, the animation will reset successfully no matter how many times you trigger it by clicking on the element.

Answer 2

If you're interested, there's an informative article on this topic that you can check out at Restart CSS Animations. Essentially, the issue stems from CSS lacking the ability to restart an animation once it has finished playing.

In addition to the solutions mentioned in the aforementioned article, I came across a method that effectively resets the animation. This means that when you click on the sun again, the animation will restart.

const sun = document.getElementById("sun");
const stage = document.getElementById("stage");

sun.addEventListener("click", function() {
  sun.classList.add("animation");

  sun.style.animationPlayState = "running";
  stage.style.animationPlayState = "running";
});

sun.addEventListener("animationend", function() {
  // Reset sun position to its initial values
  sun.setAttribute("cx", "700");
  sun.setAttribute("cy", "100");
  // Set animation state to paused for both sun and stage
  sun.classList.remove("animation");
});

@keyframes move-left {
  0% {
    left: 0;
  }
  100% {
    transform: translateX(100px);
  }
}

.animation {
  animation: move-left 1s ease-in backwards;
  animation-play-state: paused;
}

#sun {
  position: absolute;
  width: 40px;
  background: red;
}

<div id="sun">.</div>
<div id="stage"></div>

By applying a class onclick and removing it on animationend, the animation will reset successfully no matter how many times you trigger it by clicking on the element.

What is the best way to continuously loop the animation in my SVG scene?

Answer №1

Similar questions

Upon concatenation, the screen automatically returns to the beginning of the page

Is there a more efficient method to halt a jQuery animation plugin? Surely, there must be a more effective solution

Scrolling text blocks on mobile devices

"Exploring the Power of Jsoup for Selecting

Testing of AngularJS Controller using Jasmine and Karma: "Error - Unable to read property 'then' of undefined"

Click on an element that is nested within another element that can also be clicked on

Error: Unable to locate module: Unable to locate '@material-ui/core/Container'

Is there a way to eliminate a div and all its contents from the DOM?

JSON file not found by the system

Phonegap experiencing issues with executing JavaScript code

Exploring ways to create additional file upload fields with distinct names through JavaScript

It is impossible for Javascript to access an input element within a gridview

Exploring an array using bluebird promises

The layout of my website is perfect when my laptop's zoom is set to 90%, but at 100% it starts overflowing

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

Set the div element to be horizontally aligned

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

What is the best way to apply a class for styling my JavaScript code in CSS? I'm having trouble getting classList

Reload the Node.js webpage

Tips for adding text to your d3 force layout