2

There seems to be a new timeline-feature in svg.js Version 3.x. I'd like to try this feature but I don't understand the api. As far as I see, the documentation has not been updated yet. Could you please give me an example that shows me how to get started with timelines?

Thanks Michael

michael
  • 45
  • 8

1 Answers1

3

A new timeline is created for every element automatically when you animate it or request it:

const animationRunner = el.animate(duration).move(100, 100) // cretates a timeline
const timeline = el.timeline() // also creates a timeline if not present

However, often you want to schedule animation of different elements on the same timeline. Therefore you can also create a timeline first and then set it on the element:

const timeline = new SVG.Timeline() // create a timeline
el.timeline(timeline) // set the timeline for the element

Animations are scheduled on the timeline automatically when you animate an element. As a default behavior, they are scheduled to run after the last animation which was scheduled on the timeline. If no animation was scheduled, then it will run right away:

el.animate(1000).move(100, 100) // moves now
  .animate(1000).move(200, 200) // moves after first animation

To have more control over the scheduling you can pass additional parameters to animate:

el.animate(duration, delay, when)
  • duration: duration of the animation. Can be a number or a controller in which case it is not a duration and the whole animation is controlled by the controller
  • delay: time before the animaton starts

  • when: can be 'now', 'relative', 'after' or 'absolut'

    • now: run right away
    • relative: start after delay ms relative to the start of the animation before
    • after: start delay ms after the last animation was finished
    • absolute: place the animation delay ms of the zero of the timeline

To conrol the timeline, you can use play(), pause(), stop(), finish(), seek(), speed(), reverse() and so on.

If you want to play around with this, you shall also use persist(true) on the timeline. Otherwise animations which are finished are garbage collected and unscheduled from the timeline automatically.

As spoiled in the first code example, animate() returns an animationRunner (short Runner) which holds all infos about the animation. You can schedule those Runners directly on the timeline by using schedule or unschedule. However, I think this will burst the frame of this answer.

A good example for the end: https://codepen.io/fuzzyma/pen/wQbVed
And many other examples with animations: https://codepen.io/collection/XpwMLO/#

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60