Adam Wathan

Technika

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

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.

Topics include:<ul>
<li>Using animation to make interfaces easier to use</li>
<li>The difference between animations and transitions</li>
<li>When to use CSS animations vs. JavaScript animations</li>
<li>Which CSS properties are safe to animate</li>
<li>How to use techniques like FLIP to make sure your animations are performant</li>
<li>Recommended libraries for building complex animations</li>
<li>Strategies for keeping animation code maintainable</li>
</ul>Sponsors:<ul>
<li>
<a href="https://codeship.com">Codeship</a>, check out how they performed in <a href="https://codeship.com/forrester-wave-continuous-integration-report">Forrester's latest Continuous Integration Tools report</a>
</li>
<li>
<a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days</li>
</ul>Links:<ul>
<li><a href="https://sarahdrasnerdesign.com/">Sarah's Personal Website</a></li>
<li><a href="https://codepen.io/sdras/">Sarah on CodePen</a></li>
<li>
<a href="http://shop.oreilly.com/product/0636920045335.do">"SVG Animations"</a>, Sarah's book</li>
<li>
<a href="https://vimeo.com/194963386">"Functional Animation"</a>, Sarah's talk on using animation to create spatial awareness and make interfaces easier to use</li>
<li>
<a href="https://greensock.com/">GreenSock</a> animation library</li>
<li>
<a href="https://24ways.org/2016/animation-in-design-systems/">"Animation in Design Systems"</a>, Sarah's article at <a href="https://24ways.org/">24 ways</a>
</li>
<li>
<a href="https://aerotwist.com/blog/flip-your-animations/">"FLIP Your Animations"</a>, using the FLIP technique to make animations more performant</li>
<li><a href="https://vuejs.org/v2/guide/transitions.html">Transitions in Vue.js</a></li>
<li>
<a href="https://www.youtube.com/watch?v=gJDyhmL9O_E">"Animating Vue"</a>, Sarahs' talk from VueConf 2017</li>
<li>
<a href="https://webanimationworkshops.com/">Web Animation Workshops</a> with Sarah and Val Head</li>
</ul>

Topics include:<ul><li>Using animation to make interfaces easier to use</li><li>The difference between animations and transitions</li><li>When to use CSS animations vs. JavaScript animations</li><li>Which CSS properties are safe to animate</li><li>How to use techniques like FLIP to make sure your animations are performant</li><li>Recommended libraries for building complex animations</li><li>Strategies for keeping animation code maintainable</li></ul>Sponsors:<ul><li><a href="https://codeship.com">Codeship</a>, check out how they performed in <a href="https://codeship.com/forrester-wave-continuous-integration-report">Forrester's latest Continuous Integration Tools report</a></li><li><a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days</li></ul>Links:<ul><li><a href="https://sarahdrasnerdesign.com/">Sarah's Personal Website</a></li><li><a href="https://codepen.io/sdras/">Sarah on CodePen</a></li><li><a href="http://shop.oreilly.com/product/0636920045335.do">"SVG Animations"</a>, Sarah's book</li><li><a href="https://vimeo.com/194963386">"Functional Animation"</a>, Sarah's talk on using animation to create spatial awareness and make interfaces easier to use</li><li><a href="https://greensock.com/">GreenSock</a> animation library</li><li><a href="https://24ways.org/2016/animation-in-design-systems/">"Animation in Design Systems"</a>, Sarah's article at <a href="https://24ways.org/">24 ways</a></li><li><a href="https://aerotwist.com/blog/flip-your-animations/">"FLIP Your Animations"</a>, using the FLIP technique to make animations more performant</li><li><a href="https://vuejs.org/v2/guide/transitions.html">Transitions in Vue.js</a></li><li><a href="https://www.youtube.com/watch?v=gJDyhmL9O_E">"Animating Vue"</a>, Sarahs' talk from VueConf 2017</li><li><a href="https://webanimationworkshops.com/">Web Animation Workshops</a> with Sarah and Val Head</li></ul>

Aplikace Youradio Talk

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

Poslechněte si podcast