popmotion
popmotion copied to clipboard
Popmotion
How to sequence animations on different elements
I have an animation that is split in scenes, each one containing different elements. I want each scene to begin when the previous one ends. I could do it using the complete property of each action, but this results in some convoluted callback style code.
Maybe there is a way to do this better, but I can't find it in the docs.
Maybe you've figured it out by now. If not perhaps this will help.
If your animations are all driven by tweens then you may be able to put them all in a timeline. Here's the codepen example from pure's homepage. Which does show how to use the output on different elements. Timeline is also great if you need playback control.
Otherwise, for composing any actions in a sequence, have a look at chain. For sequences affecting multiple elements, some convolution is still required. In this example there are three variations of sequencing actions. The first two are using chain with different approaches to distributing output to multiple elements. The second is probably the more clear and flexible approach. The third sequence is connected using the complete property of each action and avoids a nested callback style but may not be your cup of tea either. In case you're not familiar with glitch.com here's the source view for that example.
Thanks @stokesman. I think it would be nice if timeline could drive every other kind of action besides tween. A timeline of timelines could give lots of freedom for complex animations.
