How can I achieve a scroll behavior where certain parts of Lottie animation play only when an element scroll into view?

shreyas · March 2, 2023, 6:53pm

I want to replicate this scroll interaction of “How it works” section from this website Magic Links for marketing | Stytch

I want to play a certain number of seconds of a Lottie animation once the first point crosses the 25% offset. Same for the rest of the points. I tried using Interactions but couldn’t achieve the exact scroll behavior.

https://preview.webflow.com/preview/lottie-scroll-34495f?utm_medium=preview_link&utm_source=designer&utm_content=lottie-scroll-34495f&preview=c67cb545a3eac3b543082dd2f50545bd&workflow=preview

ChrisDrit · March 3, 2023, 3:30am

I didn’t see any interactions within your share link.

But that should be easy, you mentioned offset, did you try the built-in interactions offset setting?

That should give you what you need.

shreyas · March 3, 2023, 5:28am

Hey Chris, I’ve updated the query with an image.
I’ve added 3 separate interactions to the sample content.