Trying to learn how to best chain animations, specifically for fading in/out different text layers. Can't seem to get the second text layer to fade out like the first one did.

4 Comments

Aalok Trivedi

I'm sure there might be an easier way, but I find the animation sequence module really helpful for chaining animations https://framer.cloud/sjerY

Ashwin Khurana

That was super helpful, thanks!

Steve Ruiz

This can be very tricky, especially as different animations will take longer in the browser, locally or on devices. And sometimes the chain of events includes functions or calls in addition to other animations.

My old method was to use Utils.delay, staggering events and animations based on timing, but now I've started using layer.on and layer.off to trigger the next function/animation when the first ends. The basic idea is that an 'onAnimationEnd' listener will occur every time that layer finishes an animation, unless t is removed, so you have to turn it off before adding the next listener.

It's not perfect - it's tedious, and there's always a small pause between when an animation ends and the launch of whatever event is waiting for it to end - but it works reliably. https://framer.cloud/FQVaW