Micro-Interactions & Animation Libraries

Micro-interactions are small animations that delight our users and they are changing the way we design and build our applications. Micro-interactions have many benefits like enhancing perceived performance, indicating state change, and drawing users’ attention to something on the page. Today we’ll dive into micro-interactions and the animation libraries you can use to build them.

Show Notes

02:25 - What are micro-interactions? 05:48 - Why are they important? 10:55 - How do we build one? 29:07 - Animation libraries 33:16 - Shoutouts

Resources CSS Animation Libraries Eli Fitch’s Perceived Performance UI Movement Bad UI Ladybug Performance Scott Tolinski React Spring Course Sarah Drasner Hover.css Greensock React Spring Framer Motion Anime.js Velocity Three.js Mo.js Humble PI Bon Appetit Test Kitchen Transcript

Here is the transcript for this week's episode.