A black sheet types the site's tagline in a grid, then erases it.
On the click, a black sheet comes in, and a grid of cells types the tagline, character by character, in a wave from left to right. While the next page loads, the cursors of the finished cells blink. Then the cells erase in the same wave, and the sheet fades away. Neither page’s content moves.
The characters aren’t split into elements, which would mean thousands of them. Each cell is one element, and GSAP tweens two numbers per cell, how many characters are typed and how many erased; the cell shows that slice of the phrase.
Inspired by the type animation of The Manifest, by Studio Freight, shared by Lídia Santos.
- File
src/transitions/typewriter.tsIts settings are at the top of the file.