Date: Mon, 22 Jun 2020 07:00:00 -0000
<p>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.</p> <h2>Show Notes</h2> <p><strong>02:25</strong> - What are micro-interactions? <strong>05:48</strong> - Why are they important? <strong>10:55</strong> - How do we build one? <strong>29:07</strong> - Animation libraries <strong>33:16</strong> - Shoutouts</p> <h2>Resources</h2> <ul> <li><a href="https://css-tricks.com/css-animation-libraries/" rel="nofollow">CSS Animation Libraries</a></li> <li><a href="http://assets.eli.wtf/talks/perceived-perf-talk" rel="nofollow">Eli Fitch’s Perceived Performance</a></li> <li><a href="https://letterfuel.com/ui-movement/issues/top-5-ui-designs-this-week-54/" rel="nofollow">UI Movement</a></li> <li><a href="https://www.reddit.com/r/badUIbattles/" rel="nofollow">Bad UI</a></li> <li><a href="https://www.ladybug.dev/episodes/web-performance" rel="nofollow">Ladybug Performance</a></li> <li><a href="https://www.youtube.com/watch?v=RmKupwUg4wk" rel="nofollow">Scott Tolinski React Spring Course</a></li> <li><a href="https://sarahdrasnerdesign.com/" rel="nofollow">Sarah Drasner</a></li> <li><a href="https://ianlunn.github.io/Hover/" rel="nofollow">Hover.css</a></li> <li><a href="https://greensock.com/" rel="nofollow">Greensock</a></li> <li><a href="https://www.react-spring.io/" rel="nofollow">React Spring</a></li> <li><a href="https://www.framer.com/motion/" rel="nofollow">Framer Motion</a></li> <li><a href="https://animejs.com/" rel="nofollow">Anime.js</a></li> <li><a href="http://velocityjs.org/" rel="nofollow">Velocity</a></li> <li><a href="https://threejs.org/" rel="nofollow">Three.js</a></li> <li><a href="https://github.com/mojs/mojs" rel="nofollow">Mo.js</a></li> <li><a href="https://www.amazon.com/Humble-Pi-When-Wrong-World/dp/0593084683" rel="nofollow">Humble PI</a></li> <li><a href="https://www.youtube.com/channel/UCbpMy0Fg74eXXkvxJrtEn3w" rel="nofollow">Bon Appetit Test Kitchen</a></li> </ul> <h2>Transcript</h2> <p><a href="https://github.com/ladybug-podcast/ladybug-website/blob/master/transcripts/43-micro-interactions.md" rel="nofollow">Here</a> is the transcript for this week's episode.</p>
