Radial Headline Burst

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect to your <body>:

Code snippet omitted: it ships with the download.

The script waits for document.fonts.ready, measures each character against the origin, and creates a pinned, scrubbed ScrollTrigger runway. The headline starts hidden at the origin and resolves as the visitor scrolls down.

Using It With Your Own Design

What the effect needs from your markup:

• One wrapper with data-radial-burst per scene.
• One text element with data-radial-burst-text inside each wrapper. Keep the real headline text in this element; the script splits it into character spans at runtime.
• An optional [data-radial-burst-origin] element. Its centre is the explosion point. If omitted, the wrapper's centre is used.
• An optional [data-radial-burst-progress] element for a three-digit scrub percentage. It is updated by ScrollTrigger and can be omitted without changing the effect.

What is only the demo's styling:

The supplied demo is a plain dark hero: a neutral near-black stage, one kicker line and the headline itself. The Mona Sans type and the fringe colours are showcase styling only; replace them freely. The two fringe channels are read from the --fringe-a and --fringe-b CSS custom properties on the headline, so retinting the split is a stylesheet change and needs no JavaScript edit. The effect does not query any demo class name and only reads the documented data-radial-burst-* hooks.

CSS the effect depends on:

• The scene needs position: relative and a defined height. For a hero, use height: 100svh or another height that can hold the pinned composition.
• The text needs to be positioned over the scene, normally with position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. GSAP animates the generated characters' x, y, rotation and scale, so do not add another transform to the individual character spans.
• Keep .has-js [data-radial-burst-text] pre-hidden and reveal it after splitting, as the supplied stylesheet does. The reduced-motion rule must restore visibility: visible, and the no-JavaScript state must remain readable.
• The scene should use overflow: hidden or overflow: clip so the burst can leave the frame without creating horizontal page scroll. Decorative origin elements should have pointer-events: none.
• Load the same display font before the text is split. The script waits for document.fonts.ready, but the font still needs to be available to the browser.

Options

Values outside the documented ranges are clamped. Set data-radial-burst-fringe="false" when the surrounding design does not need the colour split.

Accessibility

• Reduced motion: gsap.matchMedia() skips SplitText animation and ScrollTrigger pinning when prefers-reduced-motion: reduce matches. The headline stays visible, readable and untransformed.
• No JavaScript: the supplied CSS only hides the headline under .has-js, which is added by the script path. Without JavaScript, the original text is visible.
• Keyboard and semantics: the effect is scroll-driven and adds no custom interaction or keyboard trap. Keep the supplied text element as a real heading, and preserve its accessible name if your design uses nested decorative markup.
• Touch: coarse pointers keep the radial burst with a shorter runway and transform-first rendering. The expensive fringe channel is removed on touch devices.
• Colour: the chromatic fringe is decorative; the final headline uses the normal text colour and does not rely on the effect to be readable.

Dependencies

Required:

• GSAP 3.12+ (the demo uses 3.15.0)
• ScrollTrigger
• SplitText

Optional:

• Lenis 1.x for smooth scrolling. The supplied demo wires Lenis to the GSAP ticker; native scrolling works without it.