I’m working on a layered animation (multiple Lottie files placed over each other with absolute position). Here’s a rough description:
- An animated line graphic: 3 lines with animated trim paths.
- The animation is controlled by page scroll.
- 3 additional Lottie animations, all positioned over the main animation.
- Each layer is a small dot that ‘blips’ on, then off.
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.