About Lottie On 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.
