FX-002 · Kinetic Split
Kinetic typography for websites.
Headlines that arrive line by line, word by word or letter by letter, each piece rising out of its own line as it scrolls in. The text stays real, so search engines and screen readers get the sentence.
- Weight1.6 KB
- LibraryGSAP
- PhonesWorks
- Licence€39
Live · By lines
Every line rises out of its own edge.
Live · By words
Words land one after another.
Live · By letters
Letter by letter.
Live · Unfolding width
Narrow to wide.
01 — Details
What it does.
Three ways to split
By lines, words or letters, with stagger, rise, rotation and easing set in the markup.
Unfolding width
With a variable font, letters can open from narrow to their set width as they arrive.
Tied to the scroll
Play it once as the text arrives, or scrub it so it follows the scroll both ways.
Built for real pages
The split is redone when fonts land or the width changes, so it never breaks a layout.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build a kinetic headline effect for this website with GSAP and its SplitText plugin. Behaviour - A headline arrives line by line, word by word or letter by letter, each piece rising out of its own masked line as it scrolls into view. - It plays once on arrival, or can be scrubbed to follow the scroll. - With a variable font that has a wdth axis, letters can also open from narrow to their set width. Build - Use SplitText with masking on lines. Animate yPercent from 110 to 0 with expo.out over about 1.1s, with a stagger of about 0.08s for words and less for letters. - Start the trigger at "top 85%". For a scrub, end it around "top 35%". - Split only after fonts have loaded, and split again when the width changes, or lines will break in the wrong places. Must hold - Headings stay real text. Keep an aria-label with the full sentence and hide the split pieces from screen readers. - Masks can cut descenders, so pad each line slightly. - A trigger created late may already be past its start, so check after mounting and play it if so. - With prefers-reduced-motion, show the text as it is, with no animation. - Remove the split and its trigger on teardown. Done when a resize re-splits correctly, a screen reader hears the sentence, and the text is never hidden if the script fails.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <h1 data-fx="split" data-fx-split-by="words" data-fx-cloak> Make the web feel expensive. </h1>
| Option | Default | What it does |
|---|---|---|
| data-fx-split-by | lines | lines, words or chars |
| data-fx-split-stagger | 0.08 | Seconds between pieces; the default depends on "by" |
| data-fx-split-duration | 1.1 | Seconds |
| data-fx-split-y | 110 | Rise, in % of each piece |
| data-fx-split-rotate | 0 | Degrees, good with chars |
| data-fx-split-stretch | — | Unfold from this % width (needs a wdth axis) |
| data-fx-split-start | top 85% | Where it starts |
| data-fx-split-scrub | — | Tie it to the scroll instead |
04 — FAQ
Questions.
Does splitting text hurt SEO?
No. The words stay in the page as real text, so search engines read the same sentence you wrote.
Do screen readers read it letter by letter?
No. They get the full sentence, and the split pieces are hidden from assistive technology.
Which fonts does it work with?
Any font. The unfolding width needs a variable font with a wdth axis, and the rest works with everything.
What if the window is resized?
The split is redone when fonts land or the width changes, so lines always match the layout.
Licence
Kinetic Split · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.