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:Td3c,

✦ Not Ordinary Scroll Reveal

Most scroll text reveal components require you to enter text in the control panel, which breaks your ability to apply global text styles in Framer.

Text Reveal Scroll works differently..

Instead of replacing the native text layer, it works directly with your existing text. This preserves all styles applied from the global assets panel, ensuring your font size, weight, color, letter spacing, and line height remain exactly as designed.

You keep full control over your typography, while the component adds a smooth, cinematic scroll-driven text animation on top.

Instructions

Add this component to the canvas on the desktop breakpoint.
Place a Text layer outside the desktop breakpoint.
Wrap the Text layer in a Stack.
Set the Text layer's width to "Fill" so it will be responsive across screens.
In the component's property panel, use the "Text" property control to connect that Text layer.

Setup

You can configure the component settings from the right-side control panel.
The animation works in Preview and live site (not inside canvas)

Properties Control

Scroll Text Reveal Framer Component Controls

How It Works

Start %: Defines where the reveal begins in the viewport.
End %: Defines where the reveal completes
Dim Opacity: Controls opacity of unrevealed text (subtle ghost → fully hidden)
Reveal By: Choose between:
- Characters → letter by letter reveal
- Words → smoother word-by-word animation
Font Size: Toggle between Global (uses the connected Text layer's style) or Custom (set a fixed px size).

Key Features

Style-safe text splitting: Preserves all Framer typography styles.
Scroll-driven reveal: True scroll-driven text animation.
Smooth progressive animation: Partial opacity transitions create a cinematic text opacity scroll effect.
Performance optimized: Uses passive scroll listeners and efficient DOM updates.
Support CMS: Works with dynamically loaded content.

Made with ❤️ by Soyeb

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com

59:[["$","$L5c",null,{"post":{"id":"019dfd2d-688d-7763-9e3d-50ffe3015b94","title":null,"body":"

Limited time! Grab it for Free →

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Limited time! Grab it for Free →"}]}]},"author":{"framerUserId":"c3bff3a7-7c7d-4186-83a4-ec14bfdad6e4","name":"Soyeb","slug":"soyeb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/867947/avatar-jQxx1q8RWj76NfGo0ZcrLujaVCrKOh.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"xDgp5el32fHNjPkyEMsb","resolved":true,"title":"Text Reveal","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Check Out the New Component →","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://hy.chujiqiqi.click/community/marketplace/components/github-contributions/?via=market","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"✦ Not Ordinary Scroll Reveal"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Most scroll text reveal components require you to enter text in the control panel, which breaks your ability to apply global text styles in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Text Reveal Scroll","marks":[{"type":"bold"}]},{"type":"text","text":" works differently.."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of replacing the native text layer, it works directly with your existing text. This preserves all styles applied from the global assets panel, ensuring your font size, weight, color, letter spacing, and line height remain exactly as designed."}]},{"type":"paragraph","content":[{"type":"text","text":"You keep full control over your typography, while the component adds a smooth, cinematic scroll-driven text animation on top."}]},{"type":"customHeading","content":[{"type":"text","text":"Instructions"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add this component to the canvas on the "},{"type":"text","text":"desktop breakpoint","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place a "},{"type":"text","text":"Text layer outside the desktop breakpoint","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wrap the Text layer in a Stack.","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the Text layer's "},{"type":"text","text":"width to \"Fill\"","marks":[{"type":"bold"}]},{"type":"text","text":" so it will be responsive across screens."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"In the component's property panel, use the "},{"type":"text","text":"\"Text\" property control","marks":[{"type":"bold"}]},{"type":"text","text":" to connect that Text layer."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Setup"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"You can configure the component settings from the right-side control panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The animation works in Preview and live site (not inside canvas)"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Properties Control"}],"attrs":{"level":1}},{"type":"customImage","attrs":{"alt":"Scroll Text Reveal Framer Component Controls","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-iyao6vdz-OTv65lz0ervrMknbtHMx9ZIfhkfM0Q","link":null,"caption":"Scroll Text Reveal Framer Component Controls","uploadId":null}},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start %: ","marks":[{"type":"bold"}]},{"type":"text","text":"Defines where the reveal begins in the viewport."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"End %: ","marks":[{"type":"bold"}]},{"type":"text","text":"Defines where the reveal completes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dim Opacity: ","marks":[{"type":"bold"}]},{"type":"text","text":"Controls opacity of unrevealed text (subtle ghost → fully hidden)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal By: ","marks":[{"type":"bold"}]},{"type":"text","text":"Choose between:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Characters","marks":[{"type":"bold"}]},{"type":"text","text":" → letter by letter reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Words","marks":[{"type":"bold"}]},{"type":"text","text":" → smoother word-by-word animation"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font Size","marks":[{"type":"bold"}]},{"type":"text","text":": Toggle between Global (uses the connected Text layer's style) or Custom (set a fixed px size)."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Style-safe text splitting: ","marks":[{"type":"bold"}]},{"type":"text","text":"Preserves all Framer typography styles."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven reveal: ","marks":[{"type":"bold"}]},{"type":"text","text":"True scroll-driven text animation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth progressive animation: ","marks":[{"type":"bold"}]},{"type":"text","text":"Partial opacity transitions create a cinematic "},{"type":"text","text":"text opacity scroll","marks":[{"type":"bold"}]},{"type":"text","text":" effect."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance optimized: ","marks":[{"type":"bold"}]},{"type":"text","text":"Uses passive scroll listeners and efficient DOM updates."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Support CMS: ","marks":[{"type":"bold"}]},{"type":"text","text":"Works with dynamically loaded content."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Made with ❤️ by ","marks":[{"type":"bold"}]},{"type":"text","text":"Soyeb","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/market","class":null,"target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Have questions or need a custom Framer component? Reach out at "},{"type":"text","text":"heysoyebali@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:heysoyebali@gmail.com","class":null,"target":"_blank"}}]}]}]},"introduction":"Scroll text reveal animation","slug":"text-reveal","author":{"framerUserId":"c3bff3a7-7c7d-4186-83a4-ec14bfdad6e4","name":"Soyeb","slug":"soyeb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/867947/avatar-jQxx1q8RWj76NfGo0ZcrLujaVCrKOh.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/xDgp5el32fHNjPkyEMsb/text-reveal-BSvpv8jYZfTVKcuQWkTleiFLYwaIXu"}],"post":null,"createdAt":"2026-03-13T18:26:00.461Z","updatedAt":"2026-07-21T18:57:12.178Z","publishedAt":"2026-05-06T12:05:04.781Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.click/m/text-reveal-scroll-helper-16vc5F.js@7Bke0DBIx7GpaBFlIp2X","previewUrl":"https://text-reveal-scroll.framer.ai","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Typography","slug":"typography"}],"lastSaveId":"7Bke0DBIx7GpaBFlIp2X"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":522,"liked":false},"comments":{"count":34},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-07-21T18:57:13.133Z","createdAt":"2026-05-06T12:05:04.781Z","updatedAt":"2026-07-21T18:57:13.133Z","reported":false}}],"$L5e"]

Suggested for you