076
AI ready

Serpentine Text Scroll

£5

Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve.

ScrollTrigger Lenis intermediate
6 more details
text-animationcurved-pathscrubvelocity-reactivespring-physicssvg-animation
Serpentine Text Scroll - 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 Serpentine Text Scroll demo in new tab

About this effect

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.

What's included

8 items
  • 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

Perfect for

5 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

How it works

1 section

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.

Plugins ScrollTrigger
Difficulty Intermediate
Smooth scroll Lenis integration
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 Serpentine Text Scroll 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. Copy assets/style.css and assets/script.js into your project. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the effect to your HTML <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> 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 <html> 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.

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.