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.
Day in day out, we audit websites with div soup and plain wrong HTML, worse than 5-6 y ago, but people still want to make stuff move on a page, most of the time without users asking for it. Genius.
So here’s a little reminder on how to make it less shit for most of us above 14 years old:
– https://www.scottohara.me/note/2019/07/12/reduced-motion-video.html
– https://css-tricks.com/introduction-reduced-motion-media-query/
– https://a11yproject.com/posts/understanding-vestibular-disorders/