# Serpentine Text Scroll > Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve. Canonical: https://gsapvault.com/effects/serpentine-text-scroll Live demo: https://gsapvault.com/demos/serpentine-text-scroll/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | text-animation, curved-path, scrub, velocity-reactive, spring-physics, svg-animation | | Uses Lenis | Yes | ## 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 flowing typography effect that turns a short statement into an oversized, scroll-driven ribbon of letters. GSAP and ScrollTrigger carry the sentence around an S-shaped SVG curve, while a quick scroll pulls the bends taut before they spring back. The result suits a studio manifesto, a campaign statement or a bold divider between sections. ## Features - Continuous lettering that travels along a single flowing SVG path - Velocity-responsive bends that straighten under a quick scroll - Damped spring relaxation with a small, controlled overshoot - A tall phone composition with native touch scrolling - Adjustable text, travel direction, bend strength and scroll distance - Readable static typography for reduced motion and JavaScript-free visits - Optional Lenis smoothing with a shared animation clock and opt-out - Scoped cleanup for use in page transitions and single-page applications ## Use Cases - Creative studio sites with a memorable typographic manifesto - Campaign landing pages with a large moving slogan - Fashion and culture sites with expressive section transitions - Portfolio pages with a statement that changes pace as visitors scroll - Event microsites with a bold phrase between programme sections ## 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 An accessible source heading supplies the sentence for the SVG lettering. ScrollTrigger maps the section's scroll progress to travel along the curve, while scroll velocity controls a spring-driven change in its bend. A sticky stage keeps the composition in view, and the phone layout redraws the path vertically to retain its scale and readability. ## 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. Copy `assets/style.css` and `assets/script.js` into your project. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ **2. Add the effect to your HTML ``:** _Code snippet omitted: it ships with the download._ **3. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ Lenis is optional. Omit its tag when your site already controls scrolling. The script uses an existing `window.lenis` instance without taking ownership of it. ### Using It With Your Own Design **Markup:** keep the seven `data-serpentine*` element hooks from the example. The source heading is the only place you write the sentence. The script repeats it internally, creates a unique SVG path ID for each instance, and hides the decorative lettering from assistive technology. Use a heading level appropriate to your page. **Styling:** the grey ground, red accent, Mona Sans face, uppercase lettering and small scroll prompt belong to the demo. You can replace them. Edit `.serpentine-svg text` to change the live typography and `.serpentine-copy` to change the static heading. The SVG font size is expressed in pixels relative to its measured stage; avoid `textLength`, which would override the measured sentence width. **Required CSS:** the outer section provides the scroll distance, while its immediate stage uses `position: sticky`, `top: 0` and an explicit viewport height. Do not put an `overflow: hidden` or `overflow: auto` ancestor around the sticky section: that changes its scrolling ancestor. Clip horizontal overflow with `overflow-x: clip` and keep stage clipping so the off-screen ends of the sentence cannot widen the document. The SVG starts with `display: none`; `.is-live` shows it only after the fonts and geometry are ready. The source heading remains visible without JavaScript. Preserve that gate and the reduced-motion override. `dominant-baseline: central` centres each glyph on the curve and keeps the inside of a tight bend readable. If you significantly enlarge the type, increase letter spacing or lower the bend strength. The demo deliberately uses a large, art-directed sentence: the curve and the type are the product. It needs no surrounding cards, photographs or brand graphics. Remove the toolbar entirely when the scroll interaction is already apparent from your page. ### Options Set options on `[data-serpentine]` before initialization. | Attribute | Values | Default | Description | |---|---|---|---| | `data-serpentine-travel` | `-4` to `4` | `1.15` | Sentence lengths travelled through the section. A negative value reverses travel; zero keeps the position fixed while the curve still reacts. | | `data-serpentine-bend` | `0.35` to `1.2` | `1` | Resting depth of the curve. Lower values make broader, gentler bends. | | `data-serpentine-tension` | `0` to `0.85` | `0.68` | How strongly a fast scroll straightens the curve. Zero disables that response. | | `data-serpentine-distance` | `60` to `500` | `200` | Scroll distance in small viewport height units, in addition to the stage height. | | `data-serpentine-preview` | `0` to `1` | Unset | Freeze a representative scroll position for a static capture. Removes the scroll runway. | Set `data-smooth="off"` on `` or append `?smooth=off` to the URL to disable the optional Lenis instance. Reduced motion disables smoothing automatically. The URL takes precedence over the attribute. ### Accessibility - The original heading remains the single accessible text source. The repeated SVG lettering uses `aria-hidden="true"` and is not focusable. - Reduced motion displays the complete, stationary heading and removes the additional scroll runway. No ticker or ScrollTrigger is created for that branch. - Without JavaScript, the heading remains visible in the same designed static layout. - Native touch scrolling, mouse wheels and standard keyboard page scrolling all drive the same effect. There is no hover-only control or scroll hijacking. - The script listens for motion-preference changes and restores the static state when reduced motion becomes active. ### Dependencies - GSAP 3.12+ and ScrollTrigger. The demo pins GSAP 3.15.0. - Optional Lenis 1.3+ for smooth scrolling. The demo pins Lenis 1.3.17. - A browser with SVG `textPath`, `ResizeObserver`, CSS sticky positioning and the Font Loading API. - Mona Sans is loaded through Google Fonts in the demo; a local font or another face can be substituted. No SplitText, MotionPathPlugin, WebGL or paid font is required. ## 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 Serpentine Text Scroll](https://gsapvault.com/effects/serpentine-text-scroll) - [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