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.