Text alone can be expressive but animation can bring additional depth to your message. From subtle intros and outros, full words or individual characters, to extra expression with variable fonts, there are many great opportunities to communicate more with animation.
Unfortunately, CSS doesn't include many ways to animate text alone. Intrigued by the possibilities, I (Shaw) built Splitting to divide text up into <span> elements and give them CSS Variables to assist in creating all kinds of effects. It's been wonderful to see what people have created with Splitting. We've featured a few inspiring examples and resources down below, alongside some other fantastic animations.
Have your own great text animation? We'd love to see it! Tweet us at @keyframers and we'll share some of our favorites.
Until next time,
– David Khourshid & Stephen Shaw (AKA, the @keyframers)
This Orbit Animation, created by Nick Watton, is an excellent exploratory explanation demonstrating how basic animations can be combined to create a more complex effect.
[Tools][Inspiration] Leon Sans is "...a geometric sans-serif typeface made with code in 2019 by Jongmin Kim." Change font properties dynamically to create custom animations, effects or shapes in the Canvas element of HTML5. The live examples really showcase this font's potential!
[Inspiration] Bring your words to life! Ryan Mulligan's animated verbs series (Part 1, Part 2) contains really great text animation examples powered by Splitting.
[Tools] SVG Artista is an intuitive visual editor for easily making SVG drawing animations, brought to you by Ana Travas, who also made Animista.