# Type Helix > Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils. Canonical: https://gsapvault.com/effects/type-helix Live demo: https://gsapvault.com/demos/type-helix/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | text-animation, 3d-transforms, scrub, scroll-velocity | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview 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. ## Features - 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 ## 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works 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. ## Documentation How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ **2. Add the effect to your ``:** _Code snippet omitted: it ships with the download._ **3. Add before your closing `` 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. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Type Helix](https://gsapvault.com/effects/type-helix) - [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage. - [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt