82: Sarah Drasner - Animating the Web with CSS and JavaScript
In this episode, Adam talks to Sarah Drasner about using animations and transitions to create more intuitive user interfaces, as well as technical tips, tricks and best practices for implementing them well.
Topics include:
- Using animation to make interfaces easier to use
- The difference between animations and transitions
- When to use CSS animations vs. JavaScript animations
- Which CSS properties are safe to animate
- How to use techniques like FLIP to make sure your animations are performant
- Recommended libraries for building complex animations
- Strategies for keeping animation code maintainable
- Codeship, check out how they performed in Forrester's latest Continuous Integration Tools report
- Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days
- Sarah's Personal Website
- Sarah on CodePen
- "SVG Animations", Sarah's book
- "Functional Animation", Sarah's talk on using animation to create spatial awareness and make interfaces easier to use
- GreenSock animation library
- "Animation in Design Systems", Sarah's article at 24 ways
- "FLIP Your Animations", using the FLIP technique to make animations more performant
- Transitions in Vue.js
- "Animating Vue", Sarahs' talk from VueConf 2017
- Web Animation Workshops with Sarah and Val Head