This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ashwin Khurana
Posted May 18 - Read on Facebook

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.


Aalok Trivedi

I'm sure there might be an easier way, but I find the animation sequence module really helpful for chaining animations

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 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.

Ashwin Khurana


Read the entire post on Facebook