Search code examples
loopssvgsvg.js

SVG.js how to loop through multiple animation steps

i am new to using svg.js. I want to animate an element from it's original position to a second position and back to the original position and loop that process. What's the bets wa for achieving this?

Thanks in advance

Solution

  • //Edit: Just use the loop() method to loop animations

    For longer animation chains you need the following solution:

    For svg v2.x it is not really possible in a build-in way. You can write a function which sets the whole animation chain up and call it after the animation finished (with the afterAll() method)

    In svg v3.x you can setup a timeline and move in time to replay animations. You can read more on this in this answer: How can i use timelines in version svg.js 3.x