82: Sarah Drasner - Animating the Web with CSS and JavaScript

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

Episode source