Lottie On Scroll — Control your Lottie animation using scroll. Instead of autoplaying, the animation progresses as the page scrolls—forward when scrolling down, backwards when scrolling up.

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.