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

All this year, we (David Khourshid & Stephen Shaw, AKA the @keyframers) will be taking over editing responsibilities for the Animation at Work newsletter with the blessing from Rachel Nabors. We'll keep dishing out the quality content you expect, featuring helpful resources and inspiring examples. Don't forget that you can contribute interesting articles, demos and websites worth a feature in the newsletter. 

Let's take a step back and muse for a bit. Why should we animate?

Animation in interfaces has traditionally been thought of as eye candy; a nice-to-have, but not essential. Early user interfaces were static, blinking from one state to the next. As competition increased, companies began to focus on making their devices and software more user friendly, and animations were part of how they made them more intuitive.

The advent of touchscreen devices brought about even more innovation in UI animation. Gone was the haptic feedback of pressing keys or moving a physical mouse. That response to user input needed to be replaced. Apps began to use animation to bridge that gap, making the UI delightfully respond to the user’s touch.

Animation is more than just decorative. It has a significant purpose, from making user interfaces intuitive, to guiding users to perform desired actions, and even providing psychological feedback that evokes emotions such as happiness or caution.

That’s not to say that animation should be used excessively. Use it intentionally and with care, and the people interacting with your websites or apps will appreciate it. We promise.

– David Khourshid & Stephen Shaw

"Hover Effects for Headers" by Olivia Ng
Olivia Ng made a playful and creative CSS-only CodePen, demonstrating the many ways you can add subtle animations to headers, especially via animating individual letters. It also makes use of CSS Scroll Snap, which allows a scroll container to snap to certain positions automatically.


[Book] The Animation At Work book by Rachel Nabors is a wonderful guide on the purpose of animation beyond just a “decorative” addition. From the science and psychology behind animation to how you can adopt meaningful animation in your team, this book will help you lay the foundation for creating great animations.

[Article] How Functional Animation Helps Improve User Experience is an insightful article that outlines different types of animations in user interfaces, as well as their purposes in creating great user experiences.

[Tools][JavaScript] Anime.js, a feature-filled JavaScript animation library, is now at version 3.0.0 with outstanding new grid staggering options, support for ES6 modules, and a stunning new website.

[Article] Louis Hoebregts wrote a great piece on Simulating Mouse Movement with simplex noise. A very helpful trick for showcasing interaction-based animations!

[Tools][JavaScript] GSAP, a long running and powerful JavaScript animation library, has released version 2.1 with advanced staggering and SVG morphing options. See examples of GSAP 2.1’s new features.
New season. New look. New animations.

The @keyframers collaborative coding live stream has started back!
Mondays @ 17:00 EST (21:00 GMT)

Tune in at to watch the animation challenges live, or catch past episodes at

Like that intro animation? In typical @keyframers fashion, it was built with CSS and the tiniest bit of JavaScript. See the live demo on Codepen.
Love the newsletter? Your support keeps us going!

Contribute to our Patreon,
submit a link, or simply forward it to your friends
Copyright © 2019 Tin Magpie, All rights reserved.

unsubscribe from this list    update subscription preferences