GSAP Variable Font Animation: Weight Wave Text
Overview
A variable font effect for React and Next.js: letters near the cursor swell from thin to heavy and their neighbours slide aside to make room, without the text ever rewrapping. On touch screens a wave crosses the line by itself.
Animating font weight usually means fighting the layout, because heavier letters are wider and the line reflows on every frame. Here each letter keeps the box it has at rest, and its neighbours shift with transforms instead. The line opens around the cursor and closes again, and the text never wraps differently.
Details
- Category
- Text
- Interaction
- Mouse Move + On Load
- Trigger
- Mouse Move
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 075 / Text
GSAP Rotating Text Animation for Headlines
On Load
No. 068 / Backgrounds
GSAP Interactive Canvas Background: Needle Field
Mouse Move · On Click · On Load
No. 029 / Hero
GSAP Magazine Cover Hero with Cut-Out Models and Variable Type
On Load · Mouse Move · On Click · On Scroll
(02)FAQ
GSAP Variable Font Animation: Weight Wave Text — FAQ
01Which fonts work with it?
Any variable font with a weight axis. The demo uses Fraunces through next/font with weight: "variable". With a static font the letters jump between the weights you've loaded instead of moving smoothly.
02How do I change the effect's size or range?
rest and peak set the two weights, and reach sets how far the swell spreads, in multiples of the font size. Keep them inside the range your font supports.
03Will the page scroll sideways when letters get wider?
It keeps each line inside the text's own box whenever there's room. A line that already fills the full width can still spill a little, so add overflow-hidden to the section around it, as the demo does.
04What happens with reduced motion?
The text renders at its resting weight and nothing moves.