5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T9d6,

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

59:[["$","$L5c",null,{"post":{"id":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","slug":"ulyssegravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"w9FfwN8EBJiY7odKeVmZ","resolved":true,"title":"ScrollSyncedText","body":"$5d","bodyJson":null,"introduction":"Animated words with smooth scroll flow","slug":"scrollsyncedtext","author":{"framerUserId":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","slug":"ulyssegravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/w9FfwN8EBJiY7odKeVmZ/scrollsyncedtext-15mEyeKEHZIUId3xyF5JElgXzkL1jX"}],"post":null,"createdAt":"2026-04-21T17:43:27.679Z","updatedAt":"2026-05-06T08:13:21.284Z","publishedAt":"2026-05-06T08:24:02.879Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.click/m/ScrollSyncedText-pi0Rnq.js@zmg67DaPFjJjIzaxKHok","previewUrl":"https://scroll-synced-text-highlight.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Typography","slug":"typography"}],"lastSaveId":"zmg67DaPFjJjIzaxKHok"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":368,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-06T08:24:02.879Z","updatedAt":"2026-05-06T08:24:02.879Z","reported":false}}],"$L5e"]

Suggested for you