GSAP text animation examples
Typography carries most of a page, so text is where motion pays off fastest. These examples split headlines into lines, words or characters with GSAP SplitText or SplitType and animate each piece. Line-by-line reveals slide text up from behind a mask as it enters, the most readable option for long editorial pages. Word-by-word scrubbing lights up a paragraph as the reader scrolls through it, which suits manifestos and mission statements.
Gooey blur reveals and words that stretch open vertically push further into display type. One drives a variable font's weight from scroll position, one fills a hollow outlined word with the photograph behind it through background-clip, and one pushes letters away from the cursor. Keep character-level animation for short headlines and split long copy by lines, so it stays legible and screen readers still receive whole sentences. Split again when the layout changes width, or the line masks will cut through words.
The examples
Other categories
- GSAP scroll animation examples
- GSAP menu animation examples
- GSAP slider and carousel examples
- GSAP hover effect examples
- GSAP preloader examples
- Page transition examples: GSAP, Barba.js and View Transitions
- GSAP image gallery examples
- GSAP card animation examples
- Three.js and WebGL effect examples
- Interactive cursor and physics effects
- Animated footer examples