---
title: "ScrollSyncedText — Free Framer component · Best of Framer"
description: "Free Framer component · by Ulysse Gravier · Text. Animated words with smooth scroll flow"
canonical: "https://framer.elliotli.dev/component/scrollsyncedtext"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ScrollSyncedText

# ScrollSyncedText

Animated words with smooth scroll flow

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

![ScrollSyncedText preview image 1](https://framer.elliotli.dev/og/component/scrollsyncedtext/5456044d169c91b1/1600x1200.jpg)

## Summary

Animated words with smooth scroll flow

## Description

Scroll Synced Text Highlight is a narrative text component that adds rhythm and focus to your content.

As users scroll, words reveal and transition in sync with the viewport, creating a smooth, guided reading experience.

Built with GSAP and ScrollTrigger, it offers precise control while staying easy to use inside Framer.

Perfect for patterns like:

**We build → products → platforms → systems**

### Customizable Properties

Easily customize everything directly in Framer:

-   Prefix text and word list
    
-   Animation mode (fade-in, spotlight, slide)
    
-   Scroll behavior (scrub and snap)
    
-   Text position (top, middle, bottom)
    
-   Typography, colors, and spacing
    

All controls are designed to be simple, flexible, and code-free.

### Key Features

-   Three animation modes for different storytelling styles
    
-   Smooth scroll-synced animations with GSAP
    
-   Optional snapping for precise alignment
    
-   Sticky layout for a strong visual anchor
    
-   Built-in accessibility support
    
-   Fully reusable across projects
    

### How it works

Each word is mapped to a position in the viewport using ScrollTrigger.

As the user scrolls:

-   **Fade-in**: words appear and stay visible
    
-   **Spotlight**: only the centered word is highlighted
    
-   **Slide**: words move vertically in a fixed window
    

The prefix stays fixed, guiding the reading flow, while optional snapping ensures clean alignment.

### Ideal For

-   Landing page hero sections
    
-   Creative studio websites
    
-   Portfolio storytelling
    
-   Product highlights
    
-   Brand narratives
    
-   SaaS marketing pages
    

### Why this component stands out

-   Combines multiple animation styles in one component
    
-   Smooth and reliable thanks to GSAP
    
-   Seamless integration with Framer controls
    
-   Accessible by default
    
-   Works for both minimal and expressive designs
    

### Future improvements

The component is already production-ready, but future updates may include:

-   Preset styles (Hero, Minimal, Cinematic)
    
-   More advanced timing control
    
-   Additional animation variants
    

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

-   All · #107

## Details

- **Author**: Ulysse Gravier
- **Published**: 2026-05-06
- **Updated**: 2026-05-06
- **Added**: 2026-04-21
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos