Sarah Drasner is the Senior UX Engineer at Trulia and she’s obsessed with animation. In fact she’s giving a workshop at Front End Masters about it (coming soon) called Advanced SVG Animation.

She’s on Shop Talk Show to talk animation framework options, style guides and 5W30 motor oil.

Q & A

23:10 How many miles will 5W30 SYN oil last for in a 2010 Lexus ES350?

24:30 Hi there! My name is Louis Novick and I am a Front-End developer living & working in Orlando, FL. I was extremely taken away with how creative your work is. How do you go about planning/storyboarding a piece? Do you sketch it first and then decide how to animate it? What is your process when coding art?

27:04 Greensock animation Framework audio question

38:10 If anything, what do you use for style guides and why? I’m a full stack engineer, but very new to design. I like the idea of managing components that make up your site. At first glance, patternlab.io looks better to me, because it helps you manage small components, but also how they should be used. Other solutions like KSS just add documentation to CSS. (Sarah mentioned Trulia’s Hologram).

52:19 Animations are becoming popular on websites, they grab attention and provide another layer of UX (as mentioned in the recent UX episode). Is jquery best for that? I’ve heard of things like greensock that supposedly make it easier. How do you go about debugging these animations (Google Designer, Adobe Edge Animate, etc), what other software do you recommend? As far as UX goes, what are some of the pros/cons of having an animation repeat after it has been brought back into view port (user already saw it, scrolled back up)

1:03:26 What resource do you guys use as a “Breaking News” source for keeping up industry-specific changes or need-to-know announcements?

Sponsors

36:10 E4H: CSS Dev Conf – October 26-28

Commit yourself for two days and learn what’s happening next with web building. Join Chris Coyier, Jina Bolton, Snook, Val Head, and more people like you aboard the legendary Queen Mary docked in Long Beach, CA for CSS Dev Conf.

49:35 Code School

With more than 45 courses covering JavaScript, HTML/CSS, Ruby, Git, and iOS, Code School pairs experienced instructors with engaging content. Start learning now!

Show Links

Trulia.com

Sarah Drasner

Sarah on Twitter

Sarah Drasner on Code Pen

Holy Space Cows

Way Down When

Medusa

Greensock animation framework

Pattern Lab

Hologram

Chris Gannon on Codepen

Javascript Weekly

Web Platform Daily

Web Animation Weekly

Looking for a job? Check out the Shoptalk Job Board!

Do you think Shoptalk is the best podcast on the internet? Leave us a review in iTunes, it helps other people find us! Five stars, please and thank you!

Hey: if you like this show, check out CodePen Radio.

Show DescriptionSarah Drasner is the Senior UX Engineer at Trulia and she's obsessed with animation. In fact she's giving a workshop at Front End Masters about it (coming soon) called Advanced SVG Animation.

She's on Shop Talk Show to talk animation framework options, style guides and 5W30 motor oil.

⭐️E4H: CSS Dev ConfOctober 26-28

Commit yourself for two days and learn what’s happening next with web building. Join Chris Coyier, Jina Bolton, Snook, Val Head, and more people like you aboard the legendary Queen Mary docked in Long Beach, CA for [CSS Dev Conf](http://synd.co/1CsoR5V).

⭐️CodeschoolWith more than 45 courses covering JavaScript, HTML/CSS, Ruby, Git, and iOS, Code School pairs experienced instructors with engaging content. [Start learning now](http://synd.co/1CZPm3i)!