For this episode we’re talking web animations with two people who’ve been in the animation trenches for a while — Sarah Drasner and Val Head. Dave’s got some animation specific challenge questions and we talk about ways to present your cool animation idea to clients or a boss for approval.

Jump to a Discussion On…

8:00 Adding animation decisions to your style guide.

10:15 Using variables for easing.

15:00 Tip on Ease In / Ease Out

18:00 How serious or fun should your easing be?

22:02 Has animation arrived now?

27:00 Dave’s challenge question: Where do older browsers and crappy GPUs fit in with regards to animation?

30:29 How do you do elegant, grown-up subdued without doing stuffy?

32:00 How to demo animation without having to rebuild the entire app.

33:40 How much animation is too much animation?

39:50 Rules of animation vs branding animation styles.

43:10 What if I’m a horrible person and I animate every paragraph flying onto the page, what should I use there?

43:55 Using a voice and tone document to guide your animation choices.

49:00 Stories from the trenches of working on animation on the web.

54:18 How do you convince your CEO that having a fire breathing dragon on your login page is a good idea?

Links

Val Head / Val on Twitter

Sarah Drasner / Sarah on Twitter

Rosenfeldmedia

O’Reilly

MoJS

How Fast Should Your UI Animations Be?

Voice and Tone from Mailchimp

Val’s Newsletter on Animation

Sarah on CodePen

CSS-Tricks

ShopTalk Show Best of 2015

ShopTalk Show on Twitter

Sponsors

Braintree Payments 25:50

Mobile app development can be complex. But integrating your payments no longer has to be. With Braintree, your business can accept nearly every type of payment from any device with just one integration.

Learn more.

MediaTemple 36:55

MediaTemple is our web host of choice over here at ShopTalk, including the host of this very site! In fact, we just painlessly moved it onto a brand new VPS. Their VPS solutions keep getting better and better. The updates this Spring brought with it PHP 7 (which we’re finding brings quite a lot of performance to WordPress) and an upgraded of Plesk (12.5), which supports HTTP/2!

Job Mention

ShopTalk Show Job Board

Show DescriptionFor this episode we're talking web animations with two people who've been in the animation trenches for a while — Sarah Drasner and Val Head. Dave's got some animation specific challenge questions and we talk about ways to present your cool animation idea to clients or a boss for approval.

⭐️BraintreePaymentsMobile app development can be complex. But integrating your payments no longer has to be. With [Braintree](http://synd.co/1Nyy7FV), your business can accept nearly every type of payment from any device with just one integration.

[Learn more](http://synd.co/1Nyy7FV).

⭐️MediaTemple[MediaTemple](http://bit.ly/1O3LAHG) is our web host of choice over here at ShopTalk, including the host of this very site! In fact, we just painlessly moved it onto a brand new VPS. Their VPS solutions keep getting better and better. The [updates this Spring](http://mediatemple.net/blog/news/spring-updates-to-vps/) brought with it PHP 7 (which we're finding brings quite a lot of performance to WordPress) and an upgraded of Plesk (12.5), which supports HTTP/2!