Introduction
In 2015, back when Twitter was still Twitter, their dev team had a problem.
In those early days, tweets could be “favourited” by clicking a little “⭐” icon. The product team wanted to migrate to “liking” tweets, Facebook-style, with a “❤️”. As part of this update, their designers created this lovely animation:
Pause
This looks super nice, but there’s kind of a lot going on in there; by my count, there are 16 separate elements all animating at the same time (14 particles, the popping circle, the heart). Twitter’s web app needed to run on very low-end mobile devices, so it wasn’t feasible to create this procedurally using DOM nodes. Instead, they decided to borrow a technique from video games: sprites.
The basic idea with a sprite is that we create a single image that contains each individual frame of an animation in a long strip. Then, we display each frame for a fraction of a second, like a roll of film sliding through an oldschool film projector:
Show each frame for : 500ms
In this blog post, I’ll show you the best way I’ve found to work with sprites in CSS, and share some of the use cases I’ve discovered. We’ll also talk about some of the trade-offs, to see when we shouldn’t use sprites.
Motion Warning Your operating system has the “Reduce motion” option enabled. I generally do my best to respect this preference on this blog, but for this post in particular, there are several motion-heavy animations that have not been disabled. These animations are necessary in order to understand the animation technique. If you have a motion sensitivity, please exercise caution with this blog post!
Link to this heading Basic implementation
... continue reading