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

• tricks.com/css-animation-libraries/">CSS Animation Libraries
• Eli Fitch’s Perceived Performance
• UI Movement
• Bad UI
• Ladybug Performance
• Scott Tolinski React Spring Course
• Sarah Drasner
• Hover.css
• Greensock
• spring.io/">React Spring
• Framer Motion
• Anime.js
• Velocity
• Three.js
• Mo.js
• Humble PI
• Bon Appetit Test Kitchen

Transcript

micro-interactions.md">Here is the transcript for this week's episode.