Sprites on the Web

3 days ago

Twitter's dev team faced a challenge in 2015 when transitioning from 'favouriting' to 'liking' tweets, requiring a complex animation.
To optimize performance on low-end devices, Twitter used sprites—a technique borrowed from video games—instead of DOM nodes for animations.
Sprites involve creating a single image with all animation frames and displaying them sequentially to simulate motion.
The blog post explains a CSS-based approach to working with sprites, including using `object-fit`, `object-position`, and `steps()` for animations.
The `steps()` timing function in CSS allows for discrete animation steps, crucial for sprite animations, with options like `jump-none` for looping animations.
Use cases for sprites include dynamic, interactive elements like animated characters or icons, though procedural animations may offer more variety.
The author promotes an upcoming course, 'Whimsical Animations', teaching advanced animation techniques beyond sprite-based methods.

Hasty Briefsbeta