077
AI ready

Type Helix

£5

Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils.

ScrollTrigger intermediate
4 more details
text-animation3d-transformsscrubscroll-velocity
Type Helix - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Type Helix demo in new tab

About this effect

A sculptural text effect that winds a short slogan into a continuous helix. ScrollTrigger turns the coils through depth, bringing bold lettering to the front while hollow letterforms trace the back of the cylinder. A fast scroll tightens and twists the spiral before the coils spring back into place.

What's included

8 items
  • Continuous cylindrical type with individually oriented letters
  • Solid foreground lettering and hollow rear faces
  • Scroll velocity compresses and twists the coils
  • Spring settle after each burst of movement
  • Custom slogans, coil counts, rotation, and starting angles
  • Tall mobile composition driven by ordinary touch scrolling
  • Readable stacked headline for reduced motion and no JavaScript
  • Native text rendering without a WebGL dependency

Perfect for

5 use cases
  • Creative studio homepages with a sculptural statement
  • Campaign landing pages with an oversized brand slogan
  • Music and cultural event pages with expressive typography
  • Portfolio transitions with a memorable scrolling interlude
  • Product launches with a short message worth repeating

How it works

1 section

ScrollTrigger coordinates the rotation of a continuous typographic helix as the visitor moves through a short sticky section. Foreground letters become solid and prominent while rear letters turn into outlines, revealing the cylinder's depth. Scroll speed adds a temporary twist and compression, followed by an elastic release. The original heading remains available to assistive technology and becomes the visible composition when motion is reduced.

Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Type Helix opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the effect to your <body>:

Code snippet omitted: it ships with the download.

3. Add before your closing </body> tag:

Code snippet omitted: it ships with the download.

Native scrolling drives the section. There is no smooth-scroll library to install. The supplied demo opens directly on the effect and provides about 1.7 viewport heights of scrolling.

Using It With Your Own Design

What the effect needs: one [data-type-helix] root containing a [data-helix-stage], a readable [data-helix-source] heading, and an empty [data-helix-viewport]. The optional data-helix-text supplies different display copy; when omitted, the source heading's text is used. Keep slogans concise—roughly 10–24 characters works especially well. Each complete slogan makes one revolution of the spiral.

The script generates decorative glyphs and puts all of them inside the aria-hidden viewport. Your original heading is never rewritten. Use it to provide natural reading order, punctuation, and an appropriate heading level for the surrounding page.

What belongs to the demo: the dark grey ground, yellow middle coil, Mona Sans, uppercase slogan, and scroll cue. You can replace these styles or delete the cue. The script only queries documented data attributes. Set --ink, --page, --accent, and --font-sans to match your own design. The middle coil receives [data-helix-accent]; change that selector's colour or remove the accent treatment.

CSS that must survive a reskin:

  • Keep the stage a full viewport tall and position: sticky; top: 0 when its root has .is-live. The root's --helix-runway supplies the extra scroll space. Do not put an overflow: hidden scrolling ancestor around the sticky stage.
  • The viewport needs an absolute inset, perspective, overflow: clip, and pointer-events: none. Put content that needs clicks outside the viewport.
  • The generated [data-helix-object] needs transform-style: preserve-3d. Do not apply a filter or opacity to this parent: that flattens the 3D space. Shading belongs on individual letters.
  • Keep generated letters absolutely positioned, unwrapped, and with backface-visibility: visible. The script owns each glyph's transform and opacity; position the whole composition with the viewport or its parent instead.
  • Preserve the .is-live source-heading rule and its reduced-motion override. The heading stays visible until the measured replacement exists, then becomes visually hidden while remaining accessible.
  • Keep horizontal overflow clipped on the page and decorative viewport. The helix can extend slightly beyond its frame while winding up.

The script measures after document.fonts.ready, fits glyph widths around the cylinder, and recalculates when ScrollTrigger refreshes. Desktop gets a broad compact column; phone layouts get a narrower column with a taller pitch between turns.

Options

Set these attributes on the [data-type-helix] root.

Attribute Values Default Description
data-type-helix marker required Initializes one independent scene
data-helix-text plain text source heading text Slogan repeated along the helix; a small separator is added between repetitions
data-helix-coils integer 2–5 3 Number of complete slogan revolutions
data-helix-turns number -4–4 1.5 Rotation across the complete scroll distance; negative reverses direction and 0 retains only the spring response
data-helix-offset degrees -360–360 -158 Starting rotation; adjust to centre the strongest word in your own slogan
data-helix-spring number 0–1.5 1 Scroll-speed compression and torsion; 0 keeps only the rotation
data-helix-runway number 0.5–4 1.7 Extra scrolling as a multiple of the stage height

How It Works

Each glyph receives a position and tangent rotation on a cylinder. The phrase's measured glyph widths determine its angular spacing, while its position along the full phrase determines its vertical rise. That rise continues between repeats, making one helix instead of separate rings.

A gsap.to() tween scrubs the rotation through ScrollTrigger. Scroll velocity temporarily compresses the pitch, spreads the radius, and adds a twist that grows along the height of the sculpture. A delayed elastic tween returns that deformation to zero. Each glyph's orientation also drives its shading and its rear-face outline.

The section uses native CSS sticky positioning rather than a ScrollTrigger pin. Ordinary wheel, trackpad, touch, and keyboard scrolling all control the same animation.

Accessibility

  • Reduced motion: both CSS and gsap.matchMedia() restore the readable stacked slogan. No rotation, spring, extra scroll runway, or decorative glyphs remain.
  • No JavaScript: the original heading is the designed static composition, visible without an initialization class.
  • Screen readers: the heading provides one complete semantic message. Duplicated decorative glyphs are inside an aria-hidden viewport.
  • Keyboard: normal page scrolling with Space, Page Down, Home, and End works without intercepted input. The effect introduces no focus targets or traps.
  • Touch: scrolling is native and requires no sensor access, pointer hover, or permission.

Performance Notes

The demo uses 54 DOM glyphs. Updates stop repainting transforms when rotation and spring values are unchanged, and the ticker removes itself if the root is disconnected. The effect has no canvas, texture upload, blur layer, or WebGL context. Teardown also kills the scene's own ScrollTrigger, spring tween, settle callback, and generated markup.

Dependencies

  • GSAP 3.12+ and ScrollTrigger. The demo pins GSAP 3.15.0.
  • A browser with CSS 3D transforms and sticky positioning.
  • Mona Sans is the demo's font; another locally available or web-loaded face works too.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.