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

¡Hola, Animigos! My name is David Khourshid, developer by day, animator by night, pianist somewhere in-between. Web development and creating innovative user interfaces is my passion, and I’m excited to be doing that work at Microsoft. Over the years, I’ve been thinking about not just how complex animations can be made, but about the most efficient, robust, maintainable, and flexible ways of creating those kinds of animations on the web.

For many years, we’ve relied on JavaScript alone to handle interactive animations based on external events, such as user input. However, you may have heard of something called “CSS Custom Properties” (a.k.a. CSS Variables). Supported in all modern browsers, CSS Variables have opened the door to a whole new way of implementing interactive animations. JavaScript can now communicate reactive values directly to CSS using these custom properties.

Today, I want to share some of the exciting new libraries which enable us to take advantage of CSS Variables and animate with more freedom than ever before.

David Khourshid, Guest Editor

The Stanford D.School website features a very clean, eye-grabbing design with fun, interactive string animations and subtle parallax and scroll-based animations, powered with CSS Variables.
Parallax animations have been trendy for a while, and with Tobias Reich’s library BasicScroll, scroll values are dynamically mapped to CSS Variables, allowing you to use them anywhere in your stylesheets. The demos are quite compelling.

Staggered letter- or word-based animations can bring life to otherwise static content. Stephen Shaw’s library Splitting has a very concise API for splitting text-based HTML content and setting relevant CSS variables on each letter, word, or line, making it easy to create fun text animations.

FLIP animations are useful for performantly doing otherwise expensive layout transitions, and my Flipping library makes it straightforward to implement anywhere (shameless plug, I know). The CSS adapter uses CSS variables to provide a CSS-only way to accomplish the FLIP animations.

If you are using GreenSock, you’ll be happy to discover that it supports tweening CSS Variables as well. This has many benefits, such as eliminating the need to re-query DOM elements, and reducing the amount of JS code needed to animate multiple properties.

Christopher Wallis’ library ScrollOut is another useful scroll-based library for animating elements as they scroll into view, powered with CSS Variables and data attributes.

SVG can utilize CSS variables, too! Stephen Shaw’s microlibrary, Lengthy applies the length of paths and shapes as a custom property on the element, simplifying CSS based stroke-dasharray animations like the ever popular “draw along a path” effect.

You might not even need a library to create reactive scroll-based animations. In the Movable Mountains episode of Keyframers, Stephen Shaw and David Khourshid (that’s me) apply the window scroll position to a CSS Variable to recreate a 3D parallax effect.
If you want to learn more about how to bring imaginative, animated user interfaces to life with CSS variables and more, check out Keyframers, a collaborative project by Stephen Shaw and me where we recreate fun, challenging animations live weekly and teach you how to do the same.
Love the newsletter? Your support keeps us going!

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

unsubscribe from this list    update subscription preferences