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.

Show Notes

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

Sponsors:

• 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

Links:

• 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

What is Full Stack Radio?

A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.