GSAP Text Flow (Divi)
A huge headline that sweeps sideways with the scroll, letter by letter. Each demo is labelled with its settings. Scroll slowly.
1. Held section, two lines running opposite ways
Hold the Section on · scroll length 250 · letter effect Rise in · smoothing 0.8 · line 1 filled, right to left · line 2 outline, left to right.
Made slowly, worn for years Linen · Wool · Oak · Clay
Scroll ↓
2. Not held — slides as the section passes
Hold the Section off · letter effect Blur in · smoothing 0 · fill colour #f8fafc, outline colour #a5b4fc, outline width 3 px · line 2 has its own colour #f472b6.
Every stitch, by hand Small batches only Since 2009 — Dhaka & Lisbon
Scroll ↓
3. Held for longer, tip-up letters, custom type
Hold the Section on · scroll length 400 · top offset 0 · letter effect Tip up · Lines Text font size 9vw, weight 900 · space between lines 0.1em · background #fef3c7.
AUTUMN COLLECTION OUT NOW
Scroll ↓
4. Hold the whole section, scatter, elastic
Hold: The whole section (this text and the image stay in view) · Words Start/End: Off screen · Scroll Length 0 (as far as the words travel) · Scatter throw 175, tilt 20, pattern 7 · Letter Landing Elastic · Letter Arrival 30% · smoothing 1.
Your Mental Health Matters
Scroll ↓
Turning Ideas Into Events Plan · Host · Remember
5. Starts at the edge, strong landing, band height 60vh
Hold: This module · Words Start: At the edge · Words End: Off screen · Scatter throw 50, tilt 0 · Letter Landing Strong · Scroll Length 150 · Band Height 60vh · Turn Off On Phone: phones see a still headline.
Scroll ↓
6. Not held, from the middle, bounce
Hold the Section off · Words Start: From the middle · Words End: At the other edge · Rise in · Letter Landing Bounce · Letter Arrival 25% · Band Height 50vh.
Walk Beyond The Ordinary
Scroll ↓
7. Hold its row, overshoot tilt
Hold: Its row (this text is in the same row and stays still) · Words Start/End: Off screen · Scatter throw 120, tilt 35, pattern 3 · Letter Landing Overshoot · Letter Arrival 20% · Scroll Length 300.
Branding . Strategy . Design . Motion .
The end — scroll back up to replay