51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52: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

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-fa50dafd-b072-4eb2-8e24-23031e2d22dc-all:/unified/creator/fa50dafd-b072-4eb2-8e24-23031e2d22dc/activity/":[{"data":[{"id":"01a0c422-e2b3-76b1-ae85-a9097ceb7c2f","type":"comment.reply","target":{"type":"post","id":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","preview":"ScrollSyncedText","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/w9FfwN8EBJiY7odKeVmZ/scrollsyncedtext-15mEyeKEHZIUId3xyF5JElgXzkL1jX","targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":369,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0c422-e29d-73eb-b9ba-5e6ae741e25e","preview":"Glad you like it!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Glad you like it!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0abb8-e7ca-725d-add3-36424888d35d"},"repost":null}},"actors":[{"id":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","slug":"ulyssegravier","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-21T13:23:35.731Z","latestAt":"2026-09-21T13:23:35.731Z"},{"id":"01a0c422-8ba9-76d9-a6e8-585faa41e1b9","type":"comment.liked","target":{"type":"comment","id":"01a0abb8-e7ca-725d-add3-36424888d35d","preview":"The scrolling interaction creates a strong sense of depth and motion.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The scrolling interaction creates a strong sense of depth and motion."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0abb8-e7ca-725d-add3-36424888d35d"},"repost":null}},"context":{"type":"post","id":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","preview":"ScrollSyncedText","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/w9FfwN8EBJiY7odKeVmZ/scrollsyncedtext-15mEyeKEHZIUId3xyF5JElgXzkL1jX","targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":369,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","slug":"ulyssegravier","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-21T13:23:13.443Z","latestAt":"2026-09-21T13:23:13.443Z"},{"id":"019f4c1e-475d-758c-851f-9a27f89bfa4f","type":"comment.reply","target":{"type":"post","id":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","preview":"ScrollSyncedText","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/w9FfwN8EBJiY7odKeVmZ/scrollsyncedtext-15mEyeKEHZIUId3xyF5JElgXzkL1jX","targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":369,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f4c1e-4737-7702-a7ab-b8b1fb76f4b4","preview":"Start by creating a Stack and placing the ScrollSyncedText component inside it.\nFor this to work, make sure the Stack is tall enough to display scrollable content. In my preview, I've set the Stack's height to at least 100vh. Next, choose your preferred font and crank up the font size as much as you like.\nFrom there, the effect really comes from two settings: animation mode (I used spotlight for preview) and the scroll behavior (scrub, with snap on).\nHope this helps!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Start by creating a Stack and placing the ScrollSyncedText component inside it."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"For this to work, make sure the Stack is tall enough to display scrollable content. In my preview, I've set the Stack's height to at least 100vh. Next, choose your preferred font and crank up the font size as much as you like."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"From there, the effect really comes from two settings: animation mode (I used spotlight for preview) and the scroll behavior (scrub, with snap on)."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Hope this helps!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":2,"liked":false},"reply":{"parentCommentId":"019f4673-ef8f-7681-88e5-a9cb740ea03c"},"repost":null}},"actors":[{"id":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","slug":"ulyssegravier","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T13:01:20.605Z","latestAt":"2026-07-10T13:01:20.605Z"},{"id":"019f4c0e-1ad4-71ab-a1a4-227fe110c326","type":"comment.liked","target":{"type":"comment","id":"019f4673-ef8f-7681-88e5-a9cb740ea03c","preview":"Can you please advise as to the exact settings you have set up this preview with because i cannot figure it out? I LOVE how this works on the preview but i cannot figure out how to set it up","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Can you please advise as to the exact settings you have set up this preview with because i cannot figure it out? I LOVE how this works on the preview but i cannot figure out how to set it up"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":2,"liked":false},"reply":{"parentCommentId":"019f4673-ef8f-7681-88e5-a9cb740ea03c"},"repost":null}},"context":{"type":"post","id":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","preview":"ScrollSyncedText","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/w9FfwN8EBJiY7odKeVmZ/scrollsyncedtext-15mEyeKEHZIUId3xyF5JElgXzkL1jX","targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":369,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","slug":"ulyssegravier","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T12:43:40.620Z","latestAt":"2026-07-10T12:43:40.620Z"},{"id":"019f4c0e-094f-75cb-b2ab-6ec0aec2eb52","type":"comment.reply","target":{"type":"post","id":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","preview":"ScrollSyncedText","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/w9FfwN8EBJiY7odKeVmZ/scrollsyncedtext-15mEyeKEHZIUId3xyF5JElgXzkL1jX","targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":369,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f4c0e-0937-7168-b37f-d373961882ba","preview":"Thanks for the feedback!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks for the feedback!","marks":[{"type":"bold"}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019ee815-cc96-705d-b289-58e2221b93a4"},"repost":null}},"actors":[{"id":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","slug":"ulyssegravier","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T12:43:36.143Z","latestAt":"2026-07-10T12:43:36.143Z"},{"id":"019f4c0d-dea0-700c-ae94-5e0f8753f212","type":"comment.liked","target":{"type":"comment","id":"019ee815-cc96-705d-b289-58e2221b93a4","preview":"Very well considered.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Very well considered."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ee815-cc96-705d-b289-58e2221b93a4"},"repost":null}},"context":{"type":"post","id":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","preview":"ScrollSyncedText","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/w9FfwN8EBJiY7odKeVmZ/scrollsyncedtext-15mEyeKEHZIUId3xyF5JElgXzkL1jX","targetDeleted":false,"owned":true,"actions":{"postId":"019dfc63-0c3f-78ed-99b6-caedd81e3ba6","like":{"count":369,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"fa50dafd-b072-4eb2-8e24-23031e2d22dc","name":"Ulysse Gravier","avatar":"https://framerusercontent.com/avatars/users/fa50dafd-b072-4eb2-8e24-23031e2d22dc/lg7tAGCYt","slug":"ulyssegravier","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T12:43:25.211Z","latestAt":"2026-07-10T12:43:25.211Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:fa50dafd-b072-4eb2-8e24-23031e2d22dc:/unified/posts/?creator=fa50dafd-b072-4eb2-8e24-23031e2d22dc&with=reposts":[{"data":[{"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":"$52","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","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"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://hy.chujiqiqi.com/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":"Text","slug":"text"}],"lastSaveId":"zmg67DaPFjJjIzaxKHok","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":369,"liked":false},"comments":{"count":7},"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"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]