Lottie On Scroll

Animate Lottie with Scroll Lottie On Scroll lets you control a Lottie animation using the user’s scroll.

Animate Lottie with Scroll Lottie On Scroll lets you control a Lottie animation using the user’s scroll. Instead of autoplaying, the animation progresses as the page scrolls forward when scrolling down, backwards when scrolling up. Perfect for storytelling sections, product reveals, and premium landing pages where motion should feel intentional and interactive. Live Preview – https://lottiescroll.framer.website/ How it works Upload any Lottie JSON file Set where the animation should start and end on scroll Adjust how smooth the scroll-to-animation connection feels That’s it. No code. No timelines. No hacks. Key features Scroll-based playback - The animation is tied directly to scroll position, giving users full control through natural scrolling. Start & End control - Choose exactly when the animation begins and finishes as it enters or exits the screen. Works with standard Lottie files - Just drop in a Lottie JSON file. Nothing special is required. Best used for Hero section animations Product or feature walkthroughs Visual storytelling Portfolio case studies High-end marketing pages Why use ScrollLottie? Autoplay animations are passive. Scroll-controlled animations feel responsive, premium, and intentional. If your animation should react to the user not just play, this component is built for that.