Help with controlling Rive animation playback from Webflow
I have six Rive animations that I want to appear one after the other as I scroll and each animation should start playing after they fully appear. As animation 1 fades away, animation 2 fades in, starts playing and so on. I want it to work the other way too when I scroll back up, animation 2 fades away, animation 1 fades in and starts playing. How can I achieve this?
Just to make sure I'm understanding correctly, is this 6 separate Rive components that will move off the screen as you scroll. Or is this 1 .riv with 6 separate animations that will be in a fixed position as you scroll?
It's going to be 6 different files that appear one after the other as you scroll. As soon as one animation is in view, I want the animation to play from start to finish
Gotcha. Here's an example of an animation that waits to play until it's in view using an intersection observer. You can also adjust the intersection ratio so it'll wait until the entire element is visible before playing. Here's the documentation for intersection observer, as well as a tutorial showing how you'd use an intersection observer in React.
You can control Rive in Webflow via "Interactions" so you could just use the "Scroll Into View" trigger. That's the no-code option: https://help.webflow.com/hc/en-us/articles/33961216978451-Embed-Rive-animations#how-to-adjust-animation-settings