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.
This isn’t the most elegant solution, and I’m sure theres a better way to do this, but I basically split the animation into multiple lottie files - one for each section, which linked together.
Then instead of using webflow’s scroll on page - I created an empty div (a trigger) at the top of each section, gave the trigger a bit of height to allow the animations to overlap - and animate the appropriate lottie file using the triggers “scroll in view” animation.
A better way may be to somehow account for the balance between frame rate in your animation and pixels scrolled! If you know the height of your section this could work. But i didn’t get around to trying it.