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