Sarah Drasner talks about SVG animation with Greensock and Vue.js

John Lindquist interviews Sarah Drasner, a senior cloud developer over at Microsoft and a Vue core team member. She is also known for making super cool animations. Today they discuss what got her from an art background to a full-time developer, resistance to change, why Vue is terrific, and the GreenSock animation platform (GSAP).

Sarah's background was very unusual for a developer. She graduated with a major in printmaking and became a scientific illustrator for a nature museum. She relates drawing to program in that it's just a series of formalized steps. Many people say they can't draw, but if they just opened up and learned the process they would become technically proficient in drawing!

Sarah also talks about how awesome GSAP is. Through benchmarking, she found that GSAP performed even better than native technologies when working with SVGs. She then gets into MorphSVG, and how it lets you transition between two SVGs and all sorts of things to create transitions.

Finally, she discusses how she stays motivated on all the many projects she works on. She likes to imagine the feeling she'll get when she finally finishes it and lets that drive her. She also uses positive rewards for little milestones, such as eating a treat she enjoys or sitting in her favorite chair and relaxing.

Transcript

"Sarah Drasner talks about SVG animation with Greensock and Vue.js" Transcript

Resources

• egghead: Develop Basic Web Apps with Vue.js
• CSS Tricks: Intro to Vue
• Greensock

Sarah Drasner

• Website
• Twitter
• Github
• egghead

John Lindquist

• Twitter
• egghead.io
• Github
• Website

Transcript

John Lindquist: Alright, Sarah, why don't you go ahead and introduce yourself.

Sarah Drasner: Hi, my name is Sarah Drasner, I am a Senior Cloud Developer Advocate at Microsoft. I also am a staff writer at CSS-Tricks and what else do I do? I give web animation workshops with Val Head and I'm a Vue core team member.

John Lindquist: Yeah, congrats on that. I think since the last time we spoke, you joined the Vue core team and Microsoft and all those things. So it's a ... your life is exciting.

Sarah Drasner: Yeah, it's like a whirlwind. It is.

John Lindquist: You're like one of my favorite people. You like all the things that I like and it's fun to see you do much better things with what I like.

Sarah Drasner: Oh, I feel the same way in the reverse here. I listen to, obviously a lot of your Eggheads. Especially the ones with GSAP and stuff. I was like, "That is really cool." Because you explain it so well and so quickly.

John Lindquist: Thank you. Thank you. Appreciate that. Hey so I need to hit you with this hard hitting question first because everybody wants to know. Your twitter handle is sarah_edo. So what does the "edo" stand for?

Sarah Drasner: Yeah, actually, it's funny, I didn't really want to join Twitter. I was helping organize an event called Recon, which is a distributed database conference many years ago. I was really making the websites for it and stuff. And my manager came up and was like, "You should be on Twitter, you know, it helps to promote the conference." And like, "Oh, yeah. Maybe." And eventually, they're like, "You have to be on Twitter."

Sarah Drasner: So I think "sdrasner" was taken and a few other plays off my name were taken, so edo is a Japanese print. It's a time from Japanese period where they have really beautiful print making. I went to school for print making at one point and just really loved that era. So I figured that was short and I love it. And I probably will never be tired of it. They only problem is that it's just not associated with any other thing of me on the internet.

John Lindquist: I knew there was a story there, huh. That's fun. So tens of thousands of followers later and tens of thousands of tweets later, do you regret joining Twitter?

Sarah Drasner: No, I mean, so many good things have happened from Twitter. So I think it's funny that I was so reluctant, you know. I think I was like, "No, I'm too private." But it's a lot more fun than I thought it was going to be. And also I've met really amazing people that I really respect or gotten to know their work a little bit better from Twitter. Twitter is kind of like where everybody announces the projects that they're working on. And I get to kind of go on there and talk about the things that I like or the things that other people are doing that I think is really exciting. So that's really cool.

John Lindquist: Yeah, yeah. For sure. It's funny for me, I think I'm the same way. I always hesitate to tweet or share anything just because I'm like, "Ah, no one going to like this anyway." And Joel's always like, "No just put everything out there."

Sarah Drasner: Yeah, I think that that's true. I had a friend who was pretty well known on Twitter and I was like, "I just don't know what to do with it." He's like, "Just say things, like, you're over thinking it."

John Lindquist: Right.

Sarah Drasner: And that's been true, actually. I think the thing that I usually do on Twitter is to just try to keep it genuine because the things that I'm saying are actually the things that I'm interested in or the things that I'm interested in talking about. Then you kind of gather around you, the life like minded people, right. If you're like, "This thing is awesome." And someone follows you because of it. You probably have similar taste. So keeping it to what's true to form is pretty nice.

John Lindquist: Yeah, for sure. So I want to ask you about kind of your developer path. I'm looking at some of your bio resume stuff and your art is incredible, for one. And looks like you had quite a bit of education around that. Where did the whole developer stuff start and fit in with all of that?

Sarah Drasner: Yeah, I have a kind of sordid past. I went to school for, actually for print making and scientific illustration. So I was a scientific illustrator at a natural history museum. So I drew dead snakes and lizards for encyclopedias.

John Lindquist: That is awesome. Do you have prints? Have you sold prints?

Sarah Drasner: Yeah, I used to do that all the time. I still have some. Some are in my office. I think I gave some to some friends. Chris Clear has one of mine and stuff. I was working as a scientific illustrator and the reason why they had people who drew things instead of taking photos, and I did take photos for them too. The reason they had drawings is, there's an aperture on a camera and at some point, something's going to be blurry. Especially if you're taking a really close up shot. And drawings never have that point of blurriness.

Sarah Drasner: So we used a thing called the Camera Lucida. It's kind of like ancient contraption, but basically it's a microscope where you can look in and it has a mirror and you can kind of change this gauge so that until you can see your hand and you can see the thing in the microscope at the same time. So you have to be kind of technically trained as a person who draws to begin with, but then you also are somewhat tracing the thing and that technical training is really interesting because I think a lot of people think that drawing is this thing you just have to have talent for and stuff.

Sarah Drasner: It isn't really necessarily. I was a drawing teacher and would teach people who ... People would walk in who are like, "I'll never draw anything." And then you sit down and it's a bunch of formalized steps. Just like programming and you can teach people how to draw in a kind of formal way.

Sarah Drasner: So the problem was at the Field Museum or in general, they came up with this camera that took pictures at every level and composited them together. So I was kind of out of a job for the scientific illustration thing. I think we all saw that one coming.

Sarah Drasner: So they asked me if I could make websites. And this was back in the day where JavaScript was all in line, everything was done with tables. CSS hadn't really caught on yet, it was a while ago. So it was around 2000, I think. 2002. And I said, "Yes." I just picked up HTML for dummies and taught myself. But then the webmaster at the Field Museum kind of took me under their wing and showed me the ropes of making an industry standard site.

Sarah Drasner: So I kept making websites. I made a bunch of websites for the Field Museum and then I went to get my graduate degree and then I eventually was teaching in the Greek Islands as a study abroad professor. But all the while I was making websites. So I was making websites for Stanford and UCSF and a few other places. Kind of on contract, on the side because teachers don't make that much money. I don't know if you know that.

John Lindquist: I have unfortunately.

Sarah Drasner: But eventually I moved back to America from the Greek Islands and got a job at an agency and that was super intense. Almost like bootcamp work where you have to clock out to use the bathroom. If you code a newsletter one day, that takes you one more minute than the other day, you have to justify the difference in time.

John Lindquist: Oh man, yeah.

Sarah Drasner: So that definitely made me level up from where I was at, to higher class sites and stuff. We had to do all sorts of kinds of work at that agency. So that was many jobs ago, even that one. So yeah.

John Lindquist: Wow, that's really cool. Not many people I know actually started their careers in ... It sounds like your is HTML and JavaScript and CSS is the core of the way you started, right?

Sarah Drasner: Yeah, that's what I started with, I think at that agency they did a lot of word press theming so I became a word press expert eventually. And then I moved on to working for Basho that made REAC. That was a distributed systems company. After that, FaunaDB which is also a distributed system. Now I think they do a lot of server-less work that kind of pivoted. And then after that I worked at Zillow group and worked at Trulia as a manager.

Sarah Drasner: So yeah, mostly it's been front end technology. Progressively more and more JavaScript heavy work.

John Lindquist: Right, right. So you've been to that whole shift of web pages to web applications and everything. Have you seen kind of this ... From my point of view, I've seen a lot of back end developers kind of make that shift to the front end and kind of seen their influence kind of take ... You know, you see statically typed languages and all these arguments come up. Have you seen the same thing? Are you seeing the same trend with the way the web is changing?

Sarah Drasner: Oh yeah, for sure. I think that there's a lot of crossover between front and back right now. Especially right now. I think there was some before, to be honest. But definitely when functional programing and those paradigms moved more towards the front end, ended up becoming not just something that people were interested in, but really the way that everyone was developing applications.

Sarah Drasner: I thing REAC was a giant shift for a lot of people and the way that they thought about state management on the front end.

John Lindquist: Yeah, for sure.

Sarah Drasner: I think there's been a lot of shifts here and there. But that seems to me, like the most massive one. Or maybe it was just my education but when REAC came out that really seemed to be one of the biggest changes in the way I thought about making applications.

John Lindquist: Okay. So with that being said, this is 18 years you've been doing websites, what would Sarah with tens of thousands of Twitter followers and traveling the world, speaking at conferences, of now Tell Sarah of 2000. If you had a time machine, you could go back and talk to her about what's life going to be like.

Sarah Drasner: Well, I think you know, the thing that I don't do now that I definitely did do then is I just was so resistant to change in the beginning.

John Lindquist: Okay.

Sarah Drasner: Way back when I was just like, "This thing will never catch on." I think I said that about CSS actually. I was just like, "Why do we need this? We have tables."

John Lindquist: Right. I've been so wrong, so many times.

Sarah Drasner: Right. I think I had a couple of growing pains and I think the major breakthrough in my mind for when I started to accept that there could be and would be paradigm shifts was when Responsive came out. Nobody else at that agency I worked for thought that it was going to be a big deal and I was just like, "This is the future. We've got to be on this." And that was pretty early stage for Responsive and so luckily that was actually really cool because I spent a lot of time learning it before a lot of other people had kind of decided to, so that kind of ramped me up to becoming a lead.

Sarah Drasner: My first time becoming a lead was due to the fact that we got this giant Responsive project and I was the only one who had really mastered that. So I think it is good to embrace change in some ways. Too much change means you're learning too much at once. That's probably the biggest thing.

Sarah Drasner: I think the other thing that I would say to young Sarah is that there's not just one way to do things. I think I kind of understand that in a way that I didn't when I was younger. Having been like, "This is the industry standard way of doing things." Which is totally cool. I think I also just thought that there was, there's one way. And that's really not true because the web is a giant tent and we're all building different kinds of applications and we're building different kinds of websites that serve different needs. So not assuming that you can take your thinking cap off when you're developing is a good idea.

John Lindquist: I totally agree with all that. That's amazing advice. It's crazy how many things keep coming out. Every time I think the web is stabilized. "Okay, we have this new framework or this new feature. This is all we need." And then something else comes out, "Well, that's way better."

John Lindquist: [crosstalk 00:12:54]

John Lindquist: Like Nuxt right now. I can't believe how amazing that is. It makes creating pages, navigation, everything so simple. The transitions between them so simple. And before that I would have never even thought I needed that.

Sarah Drasner: Oh, totally. I completely agree. I just love Nuxt and I feel like at any point in time, if someone's like, "I have a problem with x." I'm immediately, "Can I build you an application?" It's become my favorite thing to do is just setting up these applications. Like little building blocks with Vue and Nuxt of just Lego's, putting things together. Just so much fun.

John Lindquist: It's funny how even things like using the terminal to build applications, using something like a CLI is so foreign to me back in the day, but now it's like, "Oh yeah, I'm just going to open my terminal now." And I'm going to launch this new project and run these commands because I'm a ... It seemed like computer nerds did that, not me and my cool, flashy website stuff.

Sarah Drasner: Yeah, totally. And actually Smashing magazine asked me to write an article recently. They're like, "You're putting out a lot of new content. We have a lot of people who are still using JQuery and aren't sure with themselves with the UCLI and stuff like that. Can you write an article that would speak to those people? And if people want to just include a script tag."

Sarah Drasner: And so, I did write that article, but at the end I was kind of like, when you've gotten to this point where you feel comfortable with this. You might want to check out the UCLI because I do think that the UCLI, that's my favorite and if there's just like, it's really beautifully done, it has a lot of really nice configuration options. And when I do workshops for Vue, I love to see the looks on the students' face when they realize that everything is kind of set up for them and it's set up in a way that they can handle and they understand and they can kind of move their way around. Especially with Nuxt where they realize pages are just Vue files. I can do this.

Sarah Drasner: Routing is just from a page to a page. All of that kind of stuff is really special. But I do understand for some people it's a big shift but getting to the point where you can show people, "Now that you're familiar with this, you might want to check out this other thing. I'm not saying you need to use it, but it can totally speed up your development and just be like a [inaudible 00:15:31] to everything."

John Lindquist: It reminds me of one thing. I was teaching a workshop and I brought up in the workshop if you don't know this, I can't remember what ES6 feature it was. If you don't know this ES6 feature you're falling behind and then one of the students called me out on it. And like, "Well I've been working full-time building these crazy projects. I didn't know about that." And just kind of laid into me. That really made me take a step back. I spend so much time in this almost future land of what JavaScript is that sometimes I lose touch of what actual rubber to the road, is that what the term is?

Sarah Drasner: Yeah.

John Lindquist: That's where development is. So I'm like, "Thank you for humbling me. I apologize for being an idiot and for saying that sort of thing." Because I mean, I can't really imagine what building a JQuery site would be like right now, but I can remember what it was like and trying to empathize with that transition between JQuery and ... "Alright, watch the terminal. If you know HTML, just type this one thing into the terminal. Give me this one thing. And then you have to type run and then create some HTML pages and then you have a navigation." It's crazy.

Sarah Drasner: Right. I think that some of it too, like when I've done demos for people who aren't familiar with Nuxt or something. Or even just Vue single file components. When they see it, they're like, "Oh, I don't know if I want to deal with a new structure." And then I show them and it's like, "No, it's literally like the HTML, the script and the CSS in one place and then that's a component." And they're like, "Oh, I thought it was going to be something crazy scary." Or something like, it's not too much of a shift. It's really helpful, I feel like. But it's not throwing out everything in the entire world, which is really kind of nice.

Sarah Drasner: But yeah, having respect for people at all stages of development, I think that's always a really good thing when you're teaching. It is hard to do though because there's times when not using ES6 or something can slow you down.

John Lindquist: Mm-hmm (affirmative)

Sarah Drasner: I don't know if you feel like that. But I definitely feel like when I'm teaching the Vue class, I sometimes just say like, "I'm going to assume the knowledge of some ES6 here because template literals really saved my life." And the [inaudible 00:18:09] right methods and not having the right function every time. I don't know. There's just some stuff that really is so nice to have.

John Lindquist: I taught a lot of Angular workshops and that relied so heavily on ES6 and beyond features with decorators and all that. I had to assume a base level knowledge of these things to teach anything about Angular and I think that kind of hurt Angular's adoption a bit is that there was just so many new things in there that you had to make it over that initial JavaScript hurdle so you can get to the frame work whereas REAC feels more familiar. Vue feels more like HTML and kind of sprinkling in the JavaScript.

Sarah Drasner: Yeah, yeah, and I think that all of them have their strengths for different reasons. That initial hurdle thing is an interesting one because I do feel like ... okay, so we talked about my past a little bit. I've been doing this for a fairly long time so I got to learn everything real incrementally, as things were coming out. I didn't pick up REAC and ES6 at the same time. I could learn one as they were coming out or whatever.

Sarah Drasner: I feel kind of bad for people who have to learn web now because they just must have to learn so much stuff at once that I feel like I've learned over so many years. I don't know if you feel the same way.

John Lindquist: Kind of. I've been struggling with that one. I'm trying to help my niece, teaching her JavaScript, teaching her to learn JavaScript. That's not english. Teaching her JavaScript. And I almost have to say, everything you see on the web is a legacy, JavaScript, everything on stack overflow is legacy and everything in these recently released frame works that are gaining a lot of popularity is current JavaScript are normal.

John Lindquist: That's kind of the opposite of what most people think where they think the frame works now are all new and weird, but their legacy is the comfortable place.

Sarah Drasner: Yeah.

John Lindquist: I don't know. It seems like we're kind of in between that spot.

Sarah Drasner: Yeah, and I think somebody tweeted at me and a few other people the other day saying like, "If you're teaching people how to learn JavaScript, do you teach them from ES5 or ES6?" Which I think is a really great question that at first I was like, "I don't know the answer to this."

Sarah Drasner: What I usually do is I take it for the context of the class. Right. I will usually assume that someone who's in my Vue class probably has ES6 experience. But for my SVG animations class, that's kind of a mixture of some ... that's a really broad range of skillsets, I feel like in that class. So I don't exactly ... When I'm doing live coding, what I will do is, I will type some ES5 and then I'll translate it to ES6. And say, "We could clean this up. If you don't know ES6, don't worry about this. But for the people in the class who are familiar with it, it might look something like this." That way, I'm dealing with both. I can see how that would get tiring for some people.

Sarah Drasner: What's unfortunate is if you are learning right now, you kind of need to learn both for the reasons that you said because sometimes a lot of code that I deal with and everybody else deals with is your maintaining code. You're not just ... it's not Greenfield everything. I mean, you're lucky if you're doing Greenfield everything and that's very rarely the case.

John Lindquist: Right.

Sarah Drasner: You're usually maintaining other people's code. So Kyle Simpson look this up and it was 70 percent of a developer's time is reading code not writing it. So I think you need to know both, just so that you're fluent in any kind of project that you get put into.

John Lindquist: Yeah, it's funny because there's so many new features. Speaking of, I think you just wrote an article today about JavaScript.

John Lindquist: [crosstalk 00:22:13]

Sarah Drasner: [inaudible 00:22:14] article of all time. I think I succeeded on upsetting a lot of people.

John Lindquist: No, it was great. Template literals, I couldn't like without them. All these things, they're so daily and normal now. It's funny.

Sarah Drasner: So for those who don't know the article I wrote, I came out with an article called, "JavaScript I love you, you're perfect, now change." Which is really an editorial. It's just me playing but it's all of the things that I would change about JavaScript if I could. Ignoring [inaudible 00:22:53]. All of the history of JavaScript. So there's some stuff in there that's pretty controversial. I think the one that was the most controversial today was the implicit returns in functions. So I kind of talked through what I'd liked and didn't like about arrow functions.

Sarah Drasner: And one of the things was a template literal instead of using the dollar sign and the curly brackets, just using a straight square bracket, because I felt like that would be little bit cleaner, cause less cognitive load. Which definitely made people upset.

Sarah Drasner: So that's good actually. When I first thought of writing this article, I went to Brian Holt, who's a coworker and friend of mine. He does a lot of REAC courses. And I was like, "Brian, I have a terrible idea." He's like, "Okay let's hear it."

Sarah Drasner: I told him about the article and he was like, "Okay I love it. I think you should do it." It's like, "Get out your paint brushes, today we're bikeshedding."

John Lindquist: Yeah, that's a great quote.

Sarah Drasner: Yeah.

John Lindquist: It was funny seeing some of the comments I think someone brought up, "Oh yeah, you should learn coffee script if you like all that stuff."

Sarah Drasner: Yeah, I think I heard a lot about coffee script today. [inaudible 00:24:15] and a few people brought up for some of the ways the syntax's clean up that I suggested. Yeah.

John Lindquist: I'm not brave enough to write something like that. I think some of those thoughts come into my head but I'm not much of a pot stirrer, I guess. I'll leave that up to you.

Sarah Drasner: Yeah, mostly it's fun. I think people definitely did respond with the kind of humor and levity that the article was written in. So that's been really nice. And just kind of fun to bat around ideas with the community.

John Lindquist: Yeah, for sure. So with all the JavaScript stuff I've been teaching my niece, it gets to another point where I need to teach her about managing state.

Sarah Drasner: Mm-hmm (affirmative)

John Lindquist: And showing that in a basic JavaScript way and well then REAC was this and the Vue was this and then there's these other libraries that do this. I think you should write this actually. What is the perfect state for everything?

Sarah Drasner: Yeah, I think that I'm attracted to Vue in part because I do feel like I really like the way it manages state. I feel like I don't think that I would have come up with that on my own but upon looking at it and working with it, especially working with it, it did feel very, very natural. And I think that that REAC, I mention they're an activity system a lot. I think the reactivity system was a really big thing for me because I feel like when I'm sorting with an application most of the things that I'm dealing with is reacting to change.

Sarah Drasner: And so reactivity is just such a natural way of doing that. And for those that don't know what reactivity is and does is it basically allows you to observe a bunch of things that are ordered and time. And it gives you these hooks with which to observe it. So kind of the normal example that people usually give is an excel spreadsheet.

Sarah Drasner: If you have this first cell that has and an input and then another cell that has an input and in the last cell you're saying the sum of these two inputs. You could actually change the first one, without rewriting the other two or the sum part and it would automatically update. So that's reactivity. Right? You're not having to imperatively go back through and say, "Go look at this, go watch this, go update this." It's automatically doing that for you.

Sarah Drasner: And I was really pleasantly surprised working with asynchronous code and animations. And especially things like forms I felt were so easily built in Vue because so much of what I'm doing as a developer is honestly forms. And just like a lot of formulation.

John Lindquist: Ain't that the truth.

Sarah Drasner: So there were really nice things that keep me from yak shaving, like ME Model. Which allows you to kind of capture these key press events. And for that Smashing article that's coming out soon, I do that in JQuery and then I do it in Vue and you can kind of see the different between that imperative programing style and the declarative right away.

Sarah Drasner: Like that in JQuery you're just like, fishing things out of the DOM and asking the DOM what it's doing all the time. Whereas in Vue, you're holding it yourself.

Sarah Drasner: So that's just been great.

John Lindquist: So I just want to say, just quick, quick interrupt here that the views, the event handling of keystrokes, where you can just pass and the control modifier, Eshift modifier and all those modifiers in there. Into the template saying, "When I mend this field and I hit Command-S, it should do this." And just pass that function. I think it's just one of the best arguments for Vue and the template kind of directive approach versus some of the REAC stuff because man, it's nice just to write a few characters out and be completely descriptive of what I'm doing and what I expect to happen. And I think Evan's a genius.

Sarah Drasner: Yeah, I agree there. I think that what ended up happening for me is I was a consultant and someone had hired me for this work and they were using Vue and I was like, "I don't want to learn another framework." But when I dove into this project, even though I'm dealing with this giant code base and this stuff that I've never looked at before. I was surprised at how legible everything was.

Sarah Drasner: And some of what you're talking about with the shift modifier or any kind of keystroke modifier or the ability to have filters or any of these kind of things that they give you with the directives allow me to ramp up so quickly that I was immediately like, "I really like this."

Sarah Drasner: I wasn't spending a lot of time digging around and trying to figure out how things work that kind of knew pretty quickly.

John Lindquist: Right. Was there a lot of forms and stuff. I mean that's ...

Sarah Drasner: Yeah, it was a lot of forms. And things like reacting to APIs. I think Vue was also really good at that.

John Lindquist: Yeah, that whole form story of, "You're just reading HTML and the form's right there. And the properties are just right in the data. And you can see exactly where they match up." This is what I spend my day doing. Exactly what I'm looking for.

Sarah Drasner: Yeah, and I think because I'm interested in animation, there were a couple of things that I literally have to do for every project that I no longer had to do. One thing is transition group. And there's a transition group component in Vue that has FLIP under the hood. And FLIP is a pain. It's just like, I've implemented a million times now, but you don't have to do any of that calculation. It's already doing all that calculation for you.

Sarah Drasner: So you can write CSS or JavaScript to describe what's happening in between. And it handles a lot of that, "Go get the bounding client REAC of this and measure it against this other thing." You don't have to do any of that anymore. That's so huge for me.

Sarah Drasner: And then, in terms of entrances and exits, if you have something coming into the DOM and something's leaving, you've changed the state and something is transitioning. They have a thing called transition modes. So those will allow you to say to the element, "As soon as this thing has fully left the DOM, then we'll bring this other thing in and start transitioning it in." And usually the way you do that is you write a call back or you can get into these call back hell situations.

Sarah Drasner: Or if you're using something like CSS and I know a lot of people do. They do these fake delays and what that can do is if you adjust the timing of the animation, you also have to adjust the delays, structure. So you can forget to do one or the other.

Sarah Drasner: John, you do animation? But adjusting time ...

Sarah Drasner: [crosstalk 00:31:24]

Sarah Drasner: I think you're one of the people who teaches people that animate on the web the most.

Sarah Drasner: Adjusting timing is a huge thing in animation. I've never made an animation where I didn't have to adjust timing. So it sounds like I'm being picky, but that's actually a really common used case. So it allows you to get those kinds of things stated in a really declarative way. And then you just focus on the stuff that you probably want to be paying attention to. Which is like, what is happening during that time.

John Lindquist: Yeah, I think that's a great description. Oh, Vue is wonderful. Speaking of animation, I know you're a big advocate of GreenSock. What was your GSAP, I guess is the platform's name. Do you remember what kind of got you hooked on that? Was thee a first time seeing, "Oh my gosh." Brain explodes scenario?"

Sarah Drasner: I'm not sure it was a brain explodes scenario. For me. What end up happening was I was kind of condentially interested in animation. It wasn't something that I was doing that much for my work at the time. I just really liked it. Eventually it was something that I did for my work constantly because people knew I was doing it. But at first I was just managing these giant component libraries at the time.

Sarah Drasner: When I started working with animation there was just so many options so I just said, I'm going to learn as many of these as possible so I can see how they all work. So I was just making CodePen project after CodePen project. Just trying out everything.

Sarah Drasner: At one point, I was reading these articles that was like, "This person says this is faster." Then, "This person says this is faster." I didn't have a horse in the game. Is that how you say that? I always ...

John Lindquist: I think so, like betting tracks, yeah.

Sarah Drasner: Okay. Sometimes I mix statements up.

John Lindquist: Oh, me too. I totally know where you're coming from though.

Sarah Drasner: So I decided to run these benchmarks. Which ended up being actually my first CSS tricks article and subsequently is part of why I'm on staff there now. So I benchmarked a bunch of different ways of working with ... At first it was SVG and Canvas in a bunch of different languages and with different tools and everything. And I think when I proposed the article to Chris, he was like, "This is just like a lot of data and maybe you want to take the Canvas part out and just focus on the SVGs side of things because otherwise it's going to be really confusing." Because it was really just like a mass of stuff.

Sarah Drasner: So we narrowed it down to SVG and I ran these benchmarks and what I found was that because of the way that it's implemented, GreenSock performed as well or better than some native technologies. Which I think bears repeating.

Sarah Drasner: GSAP performed as well or better than native technologies. That's really hard to do. Some of that is because the nature of SVG is that it can't be hardware accelerated in Chrome. It can be in Firefox so don't pull your hardware acceleration code out. And they're working on making it able to. There's a spec for it right now and stuff.

Sarah Drasner: So request animation frame sometimes works better that CSS. GSAP works with request animation frame under the HUD, which a lot of libraries do, but they do it really well. They handle it in a really smart way. So I saw the test results and was kind of like, "Okay, maybe I want to spend a little bit more time learning GSAP. This looks really good."

Sarah Drasner: And I was really pleasantly surprised too. All of the major companies kind of used GreenSock. If you go to their examples page, it's just really mind blowing things you can do with it. And it's been around for a very long time. So they kind of have a lot of basis covered that even if you're making a new animation library, it would take you a really long time to get to where GreenSock is in development because they've been working on these problems and just living in it.

John Lindquist: So battle tested.

Sarah Drasner: Yeah. So I've been pretty happy working with it.

John Lindquist: Awesome. You know, one of the most interesting people I've ever met is a guy named Robert Penner and he wrote the easing equations.

Sarah Drasner: Easing equations, yeah.

John Lindquist: Cubic ease in out and all the Bezier quads and all that stuff.

Sarah Drasner: For people listening, if you're not familiar with the Penner easing, you should definitely check it out because that's the defacto standard.

John Lindquist: They're just math and they've just kind of sat there for 20 years or whatever. These are still the exact same things you used for animation across all the languages, across everything.

Sarah Drasner: Isn't that cool? I mean, I feel like nothing that I do is around for than three years. So I'm so impressed with people who come up with things that stand the test of time. I just don't think that ... I think that's way hard to do in technology.

John Lindquist: Yeah.

Sarah Drasner: How did you get involved with animation, John?

John Lindquist: So I'm initially a Flash guy. So one of my first experiences of doing any sort of development was moving a little red ball across the screen on an inter-frame. So from the very beginning, I was interested in having things collide together and having things bounce off each other and grow and shrink based on where the mouse is.

John Lindquist: That rat flash had it's glory days and they were wonderful. But it died a peaceful, well not peaceful death, but it died.

Sarah Drasner: I actually still get people commenting on my YouTube videos, if I do an SVG talk, "Why don't you use Flash?" And I'm like, "Sorry guys I don't know if you've looked around lately but Flash doesn't have the most promising future of all technologies."

John Lindquist: Did you miss the memo? There was literally a memo.

Sarah Drasner: We don't often get memos like that. But we got one.

John Lindquist: Yeah. He's not around to write memos anymore, unfortunately.

Sarah Drasner: Yeah, yeah.

John Lindquist: GreenSock started back in the flash world. Jack Doyle, the author was doing flash stuff and back in ActionScript 2, which is very, very close to JavaScript, if you hate flash, but loved JavaScript. That's totally fine. You have to realize they're both based used ECMAScript.

Sarah Drasner: Just to clarify GreenSock has a JavaScript version. That's what I use. There's both versions. But obviously the JavaScript one is more heavily used now.

John Lindquist: Yeah, so I chatted with him about ... I can't remember when he first released GreenSock. He does actually wear one green sock though. I don't know if you knew that. That's his thing.

Sarah Drasner: I met him at dinner, but I didn't think to ask him what his socks looked like.

John Lindquist: Yeah, he wears that one green sock. It's kind of the same color of green that's on the website.

Sarah Drasner: That's great.

John Lindquist: But yeah, seeing that and seeing the stuff he did with it and I think I actually even had ... It wouldn't be called the polar request but because it was before GitHub but I submitted a fix for some 3D easing thing and that was the highest achievements of my life and I don't think I'll ever reach that same high.

John Lindquist: "But Jack, you know it could do this?" Anyway. I feel so far behind you now with all the SVG stuff and the amazing ... You have such beautiful art and your CodePens and incredible things with it.

Sarah Drasner: I appreciate that. I think it's really fun. I make a lot of really bad work that I don't show anybody. That's probably the most important part. It's like the thousands of CodePens you're not seeing.

Sarah Drasner: Also I just wanted to say, Jack is really awesome. If you do work with GreenSock they are always open to ideas, they have forums where people will help out and talk to each other. It's a really pretty vibrant community. One of the really cool things was when I was learning GreenSock and especially when I was developing materials for them, that we would have, Jack and I would go back and forth with these nerdy brain dumps for two pages and they would be at three in the morning. I would be typing to him, an email. At three-thirty he sends me a big response to.

Sarah Drasner: So they're just totally willing to be giant nerds and stuff and talk through. Especially if you're like, "I want to do this and that's not possible. What can we do." And they're like totally excited about thinking about the possibilities. And that's how a lot of the new ... They have all these plugins and new features. It's usually born out of people who work with GreenSock a lot saying, "What if?" They spend time to make it happen. So that's really cool.

Sarah Drasner: Morph SVG, which is one of the coolest plugins in my mind. Basically what it allows you do to is, you're feeding in one SVG pass. So if you have a really complicated shape, you can just say Morph SVG 2 and go to this other path and basically they swap out the path data and animate it. So it's like easing between two different really complicated shapes, which means you can animate from a toilet to a dollar bill. I don't know why I picked those two.

John Lindquist: Oh man.

Sarah Drasner: Alchemy.

John Lindquist: Sorry I can't get my brain off animation right now. You got to give me a second.

Sarah Drasner: That's really scary that that's where my brain goes to when it's left unattended. You can basically animate that really easily. And you might be thinking like, "Oh what's the big deal. I could probably just do that with a JavaScript or with another library ... You can't really because you can make that happen, but the animation is usually really ugly. Just doesn't fix the right path points that are closest to each other and ends up being this garbled mess in the between states.

Sarah Drasner: So using this tool, it makes this really smooth transition, but there's more. I sound like I'm in an ad for them. I don't work for them or anything. God, they should pay me. No, I'm just kidding.

Sarah Drasner: But the coolest part is you can also load up this other plugin that's not meant to be deployed and it's just to use in the moment. So you load this plugin called Sign Shape Index and you can basically feed it those two values and what it'll to is bring up this GUI, not really a GUI, but over your code it will point out the fixed point that it's going to start from and the fixed point that's going to end to and allow you to traverse all of the points in that path until you find the right movement of those in between states that you want.

Sarah Drasner: So aside from doing a really good job out of the box, before that, if you want a really refined movement there, you can totally do it. I can give you for the show notes later a demo that I did that just shows off one way of doing this. And If you just hit the plus button, you can see it the whole animation change. So that's pretty cool.

John Lindquist: Wow. Yeah, that'd be awesome. Hey, I hae one last questions I want to ...

Sarah Drasner: Yeah, let's do it.

John Lindquist: Piece of advice I want to get from you. So you released a book, let's see, end of last year your SVG stuff?

Sarah Drasner: Mm-hmm (affirmative), yeah. I think middle of last year, right?

John Lindquist: Middle of last year?

Sarah Drasner: Mm-hmm (affirmative)

John Lindquist: So I think for every book written, there's a thousand defeated aspiring authors out there. And you're able to write a book and write all these articles and produce this great written content. What sort of advice do you have for people who are looking into writing technical books, writing technical blog posts and actually getting it done versus having it stew in your head forever and ever.

Sarah Drasner: Oh, totally. So, couple of the things that I do, that I think help. One thing that's just weird, but if you can do it would be good. I actually write or code while I watch TV, to relax. So if you're able to ...

John Lindquist: What shows specifically?

Sarah Drasner: Right now, Dizzy and I are watching Dexter. He had never seen it before. I watched it a long time ago. So that's really fun. I think before that ... what were we watching? Dark. That was on Netflix. That one was really cool.

John Lindquist: Oh yeah that was good.

Sarah Drasner: We have to do dubbing instead of the subtitles though because I need to be able to hear it because I'm not always looking at the screen if I'm typing. So not everybody can do that kind of stuff I've heard that some people can really focus when something's on and some people can't.

John Lindquist: And you were writing timeline code while watching Dark, right? Is that ...

Sarah Drasner: Yeah, yeah. Exactly.

John Lindquist: I see how your brain works.

Sarah Drasner: Nice catch up there. That's really good. I like it.

Sarah Drasner: So I do that. Another thing is that, I feel kind of weird if things are half done, I don't feel as good, sometimes I imagine how I'm going to feel when it's done. Which is usually pretty good. It's like this dopamine rush of that feeling. So I remind myself ... I just kind of picture what I'm going to feel like if I get finished with it. And then I kind of chase that carrot, you know.

John Lindquist: Interesting. Is that something you learned from someone? Or you just come up with that on your own?

Sarah Drasner: Yeah, I just do that.

John Lindquist: I don't know. There's so many people pitching techniques on how to not procrastinate whatever I don't know.

Sarah Drasner: Yeah, no, it's just something I've been doing for a while now. Oh, another thing is to set other things up in a way that's kind of a reward for you. If I'm working on a thing that is kind of taking me a while and I'm not sure if I'm looking forward to working on it again, sometimes I'll reward myself with a mimosa or sit in a place, a comfy chair that I really like or some other kind of creature comforts that make me feel happy. And that also associates the activity with that thing that you like, which is kind of nice.

Sarah Drasner: And probably the last thing, now I forgot the last thing.

John Lindquist: Uh oh.

Sarah Drasner: Maybe we'll come back to it. I don't remember what the last thing was. I'll let you know ... [crosstalk 00:46:16]

John Lindquist: Sounds really important though.

Sarah Drasner: There was something else.

John Lindquist: We should just end right now. What's the last thing?

Sarah Drasner: And the last thing is a secret that I don't remember.

John Lindquist: For five dollars more ... [inaudible 00:46:34]

Sarah Drasner: There's got to be one more thing. I'll give it to you for the show notes, I guess.

John Lindquist: All right. Awesome. Well thank you so much, Sarah. That was a pleasure chatting with you today.

Sarah Drasner: Yeah, thanks for having me on.

John Lindquist: Thank you for all you do and share and I look forward to seeing more of your amazing CodePens in the future.

Sarah Drasner: Yeah, thank you so much for having me on. I really appreciate it. I'm such a fan of Egghead and your work, John, that I'm just really flattered and excited to be here.

John Lindquist: Thanks.

Sarah Drasner: Thanks.

John Lindquist: All right we'll see you.

Sarah Drasner: Bye.