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.
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
That was super helpful, thanks!
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