Radial Headline Burst
A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle.
About This Effect
A radial headline effect that releases hidden characters from a shared centre point into a confident, perfectly placed statement as the visitor scrolls. Every character travels from the same centre point, while rotation, scale, opacity, blur and a restrained cyan/warm-red fringe resolve with it.
Read the full effect overview
The effect is built for the moment a hero needs to announce itself. ScrollTrigger pins the stage for a deliberate runway, then the characters overshoot their final positions by a fraction and settle into alignment before the page continues.
What's Included
- Centre-out character burst powered by SplitText, with every glyph calculated from its real rendered position
- One scrubbed ScrollTrigger timeline that reverses cleanly when the visitor scrolls back
- Layered response: radial travel, rotation, scale, opacity and blur resolve as one visual gesture
- Optional cyan and warm-red chromatic fringe that is automatically omitted on coarse pointers
- Controlled overshoot and staggered back-out settle for a physical finish instead of a linear snap
- Pinned runway with separate desktop and mobile distances, all configurable through data attributes
- Real reduced-motion and no-JavaScript fallbacks leave the headline readable and untransformed
- Multiple independent headlines can share one page without the script knowing anything about the surrounding design
Perfect For
- Agency and studio hero sections that need a memorable first scroll
- Product launches with a single statement that should assemble with ceremony
- Editorial opening spreads where typography is the visual subject
- Portfolio case studies that turn a project title into a scroll-led entrance
- Campaign landing pages that want a compact, high-impact type transition
How It Works
After document.fonts.ready, each [data-radial-burst-text] element is split into characters and measured against the optional [data-radial-burst-origin] point. GSAP positions every character at that shared origin, then a pinned ScrollTrigger scrubs a timeline that moves each one toward its measured resting position, with the stagger ordered from the centre of the string outward.
The first leg also resolves rotation, scale, opacity, blur and the optional text-shadow fringe. A second, overlapping leg carries each character a few percent beyond rest with back.out before bringing it back to x: 0, y: 0 and scale: 1. The mobile branch keeps the same geometry with shorter travel and transform-only rendering; the reduced-motion branch creates no trigger and shows the original text immediately.
