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/2qlox892e2j_q.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/07e2f_v4-u-we.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/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.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/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:Ta52,

Overview

Text Reveal on Scroll adds motion, depth, and storytelling to your typography with beautifully timed scroll-based animations. Whether you're building a landing page, a portfolio, or a content-heavy layout, this component helps transform static text into dynamic, expressive interactions.

No coding required — simply drop it in, customize the style, and let the motion elevate your design.Preview: https://text-reveal-scroll.framer.website/

Features

Multiple Reveal Modes

Choose exactly how your text animates: per line, per word, or per character — perfect for everything from bold hero statements to subtle micro-typography motion.

Flexible Trigger Controls

Trigger the animation when the component enters view, or link it to any section using a custom Section ID. Ideal for long pages, sticky layouts, or staggered storytelling.

Viewport Positioning

Fine-tune where the reveal begins. Choose Top / Center / Bottom or set a custom viewport percentage for precise animation timing.

Custom Motion Styling

Adjust opacity, blur, scale, offset, easing and duration to build your own style — from soft editorial fades to energetic expressive reveals.

Smart Overflow Handling

Each fragment animates with its own overflow mask, ensuring clean movement that matches your chosen reveal mode.

Replay or One-Time Animation

Let the animation follow scroll both ways for high-interaction pages, or lock it to one-time reveal for cinematic storytelling.

Manual Text Formatting Supported

Write multiple lines, paragraphs, and manual spacing directly in the text field — the component fully preserves your formatting.

Use Cases

Hero Sections

Create high-impact hero intros where each line or word animates with intention and clarity.

Portfolio & Case Studies

Elevate storytelling with controlled text reveals that guide the reader through your content.

Editorial Layouts

Use soft, minimal motions for articles, blogs, and long-form reading experiences.

Brand & Marketing Pages

Introduce key messages with expressive motion to build character and personality.

SaaS & Product Sites

Reveal features, titles, and benefit sections with smooth, modern animations that feel native to high-end product design.

59:[["$","$L5c",null,{"post":{"id":"019ae3aa-bb00-72ae-81e5-5d56563e8706","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2033412d-0adf-4646-bb5d-e8ed4dcc797f","name":"Sang","slug":"sang","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28912/MWPM00Jjoze3bjuTB8QMu3Oig-YVtuuKvdRGcB5VJNFruqFx0sD5V8fI.png","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"lwqpieykwJ7h1vFsmqUQ","resolved":true,"title":"Text Scroll Effects","body":"$5d","bodyJson":null,"introduction":"Gsap Scroll Reveal","slug":"text-scroll-effects","author":{"framerUserId":"2033412d-0adf-4646-bb5d-e8ed4dcc797f","name":"Sang","slug":"sang","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28912/MWPM00Jjoze3bjuTB8QMu3Oig-YVtuuKvdRGcB5VJNFruqFx0sD5V8fI.png","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/lwqpieykwJ7h1vFsmqUQ/text-scroll-effects-kiegqTOlyijlwCIQjSvZRso6LwhV57"}],"post":null,"createdAt":"2025-11-27T05:23:56.439Z","updatedAt":"2026-06-12T10:02:07.196Z","publishedAt":"2025-12-03T10:03:28.384Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://text-reveal-scroll.framer.website/","price":"10","paymentUrl":"https://sangdt.lemonsqueezy.com/buy/ba63234f-565e-4388-bd12-43d22e3ecf13","workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Typography","slug":"typography"}],"lastSaveId":"qwfCPS0F58aEQkSrtpeI"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-03T10:03:28.384Z","updatedAt":"2025-12-03T10:03:28.384Z","reported":false}}],"$L5e"]

Suggested for you