Streaming live at 10am (PST)

Play full Lottie animation at scroll position

I’m working on a layered animation (multiple Lottie files placed over each other with absolute position). Here’s a rough description:

Main Animation:

  • An animated line graphic: 3 lines with animated trim paths.
  • The animation is controlled by page scroll.

Layered Animations:

  • 3 additional Lottie animations, all positioned over the main animation.
  • Each layer is a small dot that ‘blips’ on, then off.

The Issue:

I want each dot to play when its corresponding line reaches a certain length. But, I want the dots to play as one-off animations. In other words, when the page scroll hits a certain value, a dot animation plays in full, even if the user stops scrolling. Ideally, this also works in reverse (e.g., when scrolling back up the page, when the scroll hits a certain value, the dot plays again).

I have the main animation working as intended, but I can’t figure out how to get the dots to play as one-off animations. Is there a way to achieve what I want in Webflow?

Tried searching the forums, but I couldn’t find what I’m looking for. Maybe I’m searching for the wrong keywords, but I’m not sure what to search for. Any help is greatly appreciated.

EDIT: The animation works in my Webflow preview, but not in my public share link. Trying to fix it…

EDIT 2: Should work now. Let me know if it doesn’t work.


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