---
title: "Scroll Synced Lottie — Free Framer component · Best of Framer"
description: "Free Framer component · by FunTech Inc. · Sections. Scroll Synced Lottie lets you connect a Lottie JSON to the scroll position of the component itself."
canonical: "https://framer.elliotli.dev/component/scroll-synced-lottie"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Scroll Synced Lottie

# Scroll Synced Lottie

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

![Scroll Synced Lottie preview image 1](https://framer.elliotli.dev/og/component/scroll-synced-lottie/dd51f0b457710dc5/1600x1200.jpg)

## Summary

Scroll Synced Lottie lets you connect a Lottie JSON to the scroll position of the component itself.

## Description

**Scroll Synced Lottie** lets you connect a Lottie JSON to the scroll position of the component itself. By setting two **offset** intersections between the target (this component) and the viewport, it maps that range to a normalized 0→1 progress and updates the animation accordingly—perfect for step-by-step storytelling, and hero effects.

## Features

-   **Scroll-position hookup**: Drive Lottie directly from scroll progress
    
-   **Intersection:** Control _when_ the animation reacts using just two offsets
    
-   **Flexible Transitions:** Adjust motion response via Transition (spring or tween)
    

## Properties (Controls)

-   **Source:** Choose **URL** or **Upload**. This component is for **JSON** files. [_Learn more here_](https://lottiefiles.com/what-is-lottie)
    
-   **Transition:** Motion transition used when mapping scroll position → animation progress.
    
    -   **Default:** spring with stiffness: 400, damping: 20, mass: 3.
        
-   **Offset**: offset describes intersections, points where the target and container meet. [Learn more here](https://motion.dev/docs/react-use-scroll#offset)
    
    -   **Default: \["start end", "end start"\]** , progress is 0 when the **top of the element meets the bottom of the viewport**, and 1 when the **bottom of the element meets the top of the viewport**.
        

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

-   All · #3314

## Details

- **Author**: FunTech Inc.
- **Published**: 2025-09-27
- **Updated**: 2025-09-26
- **Added**: 2025-09-20
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove