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

Animated words with smooth scroll flow