GSAP Rotating Text Animation for Headlines
Overview
A rotating word for React and Next.js headlines: letters roll through a clipped slot one by one, and the slot resizes to each new word so the sentence around it slides instead of jumping.
Put it inside any heading, like "We make [brands] move." Each word gets its own colour if you pass one, and the slot keeps its baseline, so it lines up with the text around it at any font size.
Details
- Category
- Text
- Interaction
- On Load
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
(02)FAQ
GSAP Rotating Text Animation for Headlines — FAQ
01Can I use it inside an h1?
Yes. It renders a span by default and inherits the heading's font, size and line height. The as prop swaps the element if you need something else.
02Does it work with Hindi, accents or emoji?
Yes. Words are split into whole visible characters with Intl.Segmenter, so matras, accents and emoji stay in one piece as they roll.
03How do I change the speed?
hold sets how long each word stays, duration sets how long each letter takes, and stagger sets the gap between letters. All three are in seconds.