Rubber Band Letters Stretchy Text Animation with GSAP
Overview
A heading for React and Next.js where every letter is tied to its place by an elastic band. Pull a letter out and the band stretches and thins, then it snaps back, overshoots and knocks its neighbours.
On load, a ball of rubber bands bursts and the letters fly out of it, shoot past their places and get dragged back into the word. Each letter is a spring on a band tied to a brass tack, and letters collide, so a letter that snaps back too far knocks the one next to it. The bands are drawn on a canvas behind the text. They get thinner and paler as they stretch, and bow sideways when they whip.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 100 / Text
Falling Letters Physics Heading with Canvas
On Load · Drag · On Click
No. 118 / Hero
Zipper Reveal Hero with a Draggable Pull, on Canvas
On Load · Drag · On Scroll · On Click
No. 117 / Cards
Tear Strip Envelope Reveal with a Draggable Tab, on Canvas
On Load · Drag · On Click
(02)FAQ
Rubber Band Letters Stretchy Text Animation with GSAP — FAQ
01Can I use my own heading and font?
Yes. Pass heading, and set the --band-display CSS variable to any font. The letters are measured after the font loads, so the bands line up with whatever you use. The size comes from the CSS on the h1.
02Can I change how often the ghost hand pulls?
Set pullEvery, in seconds. The ghost hand waits while someone is using the page, and starts again a couple of seconds after they stop.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The springs and bands use no other library. It fills the height of the screen.
04What happens with reduced motion?
The word sits in place with one letter held out on its band, and no loop runs. The button moves the held letter to another one, instantly.