---
title: "Lottie On Scroll — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Chehak Singla · Effects. Animate Lottie with Scroll Lottie On Scroll lets you control a Lottie animation using the user’s scroll."
canonical: "https://framer.elliotli.dev/component/lottie-on-scroll"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Lottie On Scroll

# Lottie On Scroll

[View on Framer](https://framer.com/marketplace/components/lottie-on-scroll/?via=elliot-li)

![Lottie On Scroll preview image 1](https://framer.elliotli.dev/og/component/lottie-on-scroll/8a247e7afec729ba/1600x1200.jpg)

## Summary

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

## Description

## 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/](https://lottiescroll.framer.website/)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-a5kh6j3x-EnFkirsdXZVZ9OQYT1oJ21OolDToxw)

### 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2613

## Details

- **Author**: Chehak Singla
- **Price**: $5.00
- **Published**: 2026-01-14
- **Updated**: 2026-01-14
- **Added**: 2026-01-02
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows