We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.

That demo is here:

See the Pen


Selfie Crawl by Chris Coyier (@chriscoyier)


on CodePen.

@keyframers covered it much nicer than I did and made this video. (Seriously, it’s so clear and concise — it’s a great watch.)

I particularly like how quick’n’easy creating, exporting, optimizing, and integrating the actual SVG codes in their demonstration.

Their final demo:

See the Pen


SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers by @keyframers (@keyframers)


on CodePen.