You're receiving this email because you wisely signed up at
View this email in your browser

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.


[Inspiration] Spotify explores what happens when you create ASCII text animation and music in this beautiful visualization for Bon Iver's new album.

[Tutorial] Learn how to create a variable font animation with CSS and Splitting.JS in this article by Michelle Barker, complete with some very creative examples.

[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. 

[Tutorial] Learn about what linear interpolated functions (LERP) are and how you can use them to easily create super smooth animations by Trys Mudford.

[Article][Inspiration] Interactive computer graphics have a wide and varied history. Learn about it in this article by Maarten de Haas, with a bonus visual cubic bezier explanation!

[Inspiration] Want more text splitting goodness? Check out these pens:
Love the newsletter? Your support keeps us going!

Contribute to our Patreon,
submit a link, or forward to your friends
Animation at Work Slack  Join the conversation in Slack!

Share inspiration, get help and hang out with others passionate about animation!
NavBar Nudging
Chris Coyier joins us for our first #THREEFRAMERS three-person Collab where we build a beautiful navbar animation.

Watch the @keyframers collaborative coding live stream  
Mondays @ 17:00 EST (21:00 GMT) on
Subscribe at for full episodes and more.
Copyright © 2019 Tin Magpie, All rights reserved.

unsubscribe from this list    update subscription preferences