5d:I[333483,["/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/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8cb,

TextScroll — Scroll-Driven Three-Stage Color Text Reveal

TextScroll is a plug-and-play Framer component that animates your text colors as users scroll. Each character, word, or line flows through a refined three-stage color transition — giving headlines the polish of a custom-coded site, with none of the setup.

Built on GSAP ScrollTrigger and SplitType, it splits your text into visual units and tracks each against scroll position with smooth, frame-perfect timing.

The three-stage color flow is the heart of it. Where typical scroll text fades between two colors, TextScroll passes each unit through three states — a resting Initial color, a brief Accent flash as the scroll passes through, and a settled Final color. Accent Duration tunes that middle state from a punchy flash to a held, dramatic moment.

Three reveal modes:

Character — each letter shifts one by one for bold statements
Word — words transition together for readable body copy
Line — full lines fade through for cinematic reveals

Toggle Pin Section to lock the text in place while the user scrolls, playing the color animation across the pinned distance — perfect for hero and storytelling moments. Pin Start controls exactly where the section locks.

Typography uses native Framer font controls, so text styles like any other layer. Only units that change per frame animate, keeping scroll smooth on long paragraphs.

Key features

Three-stage color reveal: Initial → Accent → Final
Three modes: Character, Word, Line
Pin Section mode for scroll-locked reveals
Adjustable Pin Start, Scroll Start, Scroll End, Accent Duration
Native Framer font controls
Optimized — only animates changed units per frame
Multiple independent instances per page

Refund Policy

Due to the digital nature of this product, all sales are final. If you hit any issues, reach out — I'm happy to troubleshoot and make sure TextScroll works correctly in your project.

5a:[["$","$L5d",null,{"post":{"id":"019e6842-c5f5-73c0-9c20-2fc62360414e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"990963a3-803e-491f-a26c-d4750f41b16f","name":"Aman Qureshi","slug":"aman-qureshi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/252560/rOvOn3jLx-E4375n3Ab1LYfqMxO2ATS4lqRyA0jJ","followed":false,"followsYou":false},"media":[],"resources":[{"id":"0FcJZbaOZYgioczwq880","resolved":true,"title":"ScrollColorChange","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"TextScroll — Scroll-Driven Three-Stage Color Text Reveal"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"TextScroll is a plug-and-play Framer component that animates your text colors as users scroll. Each character, word, or line flows through a refined three-stage color transition — giving headlines the polish of a custom-coded site, with none of the setup."}]},{"type":"paragraph","content":[{"type":"text","text":"Built on GSAP ScrollTrigger and SplitType, it splits your text into visual units and tracks each against scroll position with smooth, frame-perfect timing."}]},{"type":"paragraph","content":[{"type":"text","text":"The "},{"type":"text","text":"three-stage color flow","marks":[{"type":"bold"}]},{"type":"text","text":" is the heart of it. Where typical scroll text fades between two colors, TextScroll passes each unit through three states — a resting Initial color, a brief Accent flash as the scroll passes through, and a settled Final color. Accent Duration tunes that middle state from a punchy flash to a held, dramatic moment."}]},{"type":"paragraph","content":[{"type":"text","text":"Three reveal modes:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Character — each letter shifts one by one for bold statements"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Word — words transition together for readable body copy"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line — full lines fade through for cinematic reveals"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Toggle "},{"type":"text","text":"Pin Section","marks":[{"type":"bold"}]},{"type":"text","text":" to lock the text in place while the user scrolls, playing the color animation across the pinned distance — perfect for hero and storytelling moments. Pin Start controls exactly where the section locks."}]},{"type":"paragraph","content":[{"type":"text","text":"Typography uses native Framer font controls, so text styles like any other layer. Only units that change per frame animate, keeping scroll smooth on long paragraphs."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three-stage color reveal: Initial → Accent → Final"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three modes: Character, Word, Line"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pin Section mode for scroll-locked reveals"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable Pin Start, Scroll Start, Scroll End, Accent Duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native Framer font controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized — only animates changed units per frame"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple independent instances per page"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Due to the digital nature of this product, all sales are final. If you hit any issues, reach out — I'm happy to troubleshoot and make sure TextScroll works correctly in your project."}]}]},"introduction":"Scroll Color Reveal","slug":"scrollcolorchange","author":{"framerUserId":"990963a3-803e-491f-a26c-d4750f41b16f","name":"Aman Qureshi","slug":"aman-qureshi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/252560/rOvOn3jLx-E4375n3Ab1LYfqMxO2ATS4lqRyA0jJ","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/0FcJZbaOZYgioczwq880/scrollcolorchange-EjPE4lVgXrHTIUi0hBqCp0ELnsYybI","metadata":{"tint":{"h":70,"s":68,"l":36},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-26T07:11:16.081Z","updatedAt":"2026-08-07T11:45:37.369Z","publishedAt":"2026-05-27T07:07:47.061Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://textscrollwith3colors.framer.website/","price":"4","paymentUrl":"https://lumecomponent.lemonsqueezy.com/checkout/buy/b2825d21-1fd0-42b7-96e2-607a828f59b9","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"lRdFzkcWCBwbEuYPl1pZ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-27T07:07:47.061Z","updatedAt":"2026-05-27T07:07:47.061Z","reported":false}}],"$L5f"]

Suggested for you