AnimationSequence and AnimationGroup

[benbro]

How do I create timelines that are equivalent to AnimationGroup and AnimationSequence in web-animations?

A group play all animations together and a sequence play each animation when the previous ends. Both take animation delay into account if set.

var animationGroup = new AnimationGroup([new Animation(...), new Animation(...)]);
var animationSequence = new AnimationSequence([new Animation(...), new Animation(...)]);

Thanks

[SkidX]

Hi, you can achieve both with Tweene timelines. By default, if you do not indicate a time offset, new tweens (or nested timelines) are appended at the end of the timeline, so you can easily obtain a sequence in this way:

Tweene.line()
   .to(target1, {opacity: 0.5}, '500ms')      // starts at 0
   .to(target2, {right: '200px'}, '1.5s')     // starts after 500ms
   .to(target3, {top: '+=100px'}, '400ms')    // starts after 2000ms  
   .play();

Instead, if you want all the child animations to starts together as a group, you can pass the same time instant as offset:

Tweene.line()
   .to(target1, {opacity: 0.5}, '500ms')         // starts at 0
   .to(target2, {right: '200px'}, '1.5s', 0)     // starts at 0
   .to(target3, {top: '+=100px'}, '400ms', 0)    // starts at 0
   .play();

[benbro]

Now it's clear. Thanks