ScrollSyncedText — Animated words with smooth scroll flow

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