Update: How to get Lottie to replay at the same position every time it reappears in the viewport?


I’m trying configure a Lottie animation to replay every time the Lottie comes into the viewport. Like, it plays once, then they scroll away, and when the Lottie’s back in the viewport it plays from the beginning again. I’d like it to play no matter which direction the user’s scrolling from, and it would be helpful if I could define the position it plays in relation to the viewport.

Currently, there’s a Scroll into View interaction set up on the Lottie, but it only plays the first time it’s scrolled into view. Is this achievable in Webfow? If not, I’m also using GSAP, but I’m a newbie, so if you happen to know if it’s something I could configure there, I’d love to know (and maybe which object). Thanks guys.

→ The Lottie in question are the eyes midway down the page.

Here is my public share link: [LINK]1
(how to access public share link)

Okay, I think the simple answer to this question would be to set the animation again for When Scrolled Out of View. But I think the reason I didn’t think it was working was that the Offset doesn’t work in the same way as the Scrolling in to View.

I was under the impression that offset was based on the position in the viewport. For example, my Lottie plays at just the right position when Scrolling In using the 45% offset. But when I set that same offset for the scrolling out of view (45%), it plays once more before the the animation’s goes out of the viewport. If I set it at 0% offset, it plays immediately once in the viewport once again (far too quickly). I’ve played around with nearly every offet and delay and it’s not working like I want it to. I’ve searched the WF docs and I cannot find anything that would explain this issue that I’m having.

My goal is to have the Lottie animation play at the same position within the viewport every time, and only play one time when in the viewport.

Additionally, when it plays again, sometimes the animation slows down and doesn’t work correctly. Could I get someone to help me with this issue? I went ahead and added my project file and staging site.