5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.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/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T980,

Key Features

Three Split Modes: Split text by Characters, Words, or Lines. Each mode animates differently - from individual letters to full rows - and switches instantly in the properties panel.
Flexible Trigger System: Animate on Scroll Into View, Page Load, Hover, or Click. Scroll trigger includes visibility threshold and replay control; Hover and Click reverse automatically.
Rich Motion Controls: Adjust duration, stagger, easing, opacity, Y offset, scale, 3D rotation, perspective, and optional looping - all from the properties panel.
Clip Reveal Effect: Characters emerge from their baseline with an overflow mask for a clean reveal-from-below look. Toggle off for top-down animations.
Full Typography Customization: Set font family, size, weight, line height, letter spacing, alignment, and color directly in Framer.

How to Set Up

1. Drop the component onto your canvas and enter your text content in the right panel.

2. Choose your Split By mode (Characters, Words, or Lines) and select a Trigger type.

3. Adjust animation settings - duration, stagger, easing, starting opacity, Y offset, scale, and rotation - to match your design.

4. Customize typography (font, size, weight, color) directly in the properties panel.

5. Switch to Preview to see the animation in action (the effect is only visible in preview/published mode, not on the canvas).

For more details on installation and component properties, please refer to the documentation - https://docs.zeroqode.com/framer-plugins/split-text-reveal

Perfect For

Hero sections and landing pages with dynamic headlines
Portfolio and agency websites with typographic motion
Product pages with scroll-triggered text reveals
Interactive layouts with hover or click-driven animations
Any project where you want typography that moves

Support

💬 For any questions, feel free to contact us at this support email: support@zeroqode.com

59:[["$","$L5c",null,{"post":{"id":"019e9869-4d20-769a-8d4a-3a76a811332d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[],"resources":[{"id":"XXCyYjDm6XZdZyM4fo1J","resolved":true,"title":"Split Text Animation","body":"$5d","bodyJson":null,"introduction":"Animate text by characters and words","slug":"split-text-animation","author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/XXCyYjDm6XZdZyM4fo1J/split-text-animation-nk1vWBNMOksi7tVcEWQN4sqyDhI835","metadata":{"tint":"hsl(330 67% 9%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-05-27T18:06:14.647Z","updatedAt":"2026-06-08T14:43:23.456Z","publishedAt":"2026-06-05T15:31:38.400Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://complex-exceptions-359055.framer.app/","price":"3","paymentUrl":"https://buy.stripe.com/4gM3cv739eof9Infxr8og0n","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Typography","slug":"typography"}],"lastSaveId":"p4TfT5GJb3HU1XQd36MW"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T15:31:38.400Z","updatedAt":"2026-06-05T15:31:38.400Z","reported":false}}],"$L5e"]

Suggested for you