Streaming live at 10am (PST)

Lottie animation: scroll to section instead of % of body?


I’m facing an issue with the scroll animation.
I currently have a container for all of my sections rather than keeping them in the body because I’m using a custom CSS scroll-snap interaction.

Unfortunately, that means that the standard webflow scroll animation doesn’t work for me because when navigating the site I’m not scrolling inside my container, but the body.

Wondering if anyone has tried/succeeded in linking a lottie animation to scroll with a different element other than the body? Or even better, is it possible to link the animation keyframes to sections (perhaps by their ID) rather than to the percentage of the scroll?

I’m open to using any custom code.
Thanks in advance for any help!!

You won’t be able to make this work without JS (and it won’t be easy). Fullpage.js and other scroll controllers are breaking the scroll and anchors can’t work.

Hi vincent, thanks for your reply.
The scroll snap im using is pure CSS, based on this:

Is there no way to just change the scroll % target based on a divs position rather than % of body?