Animating with CSS, JS and SVG, and Avoiding Burnout

In this episode of the Versioning Show, Tim and David are joined by Sarah Drasner, a teacher, author, consultant and staff writer at CSS-Tricks. They discuss animating with CSS, JavaScript and SVG, the advantages of animating with SVG over static graphics, SVG 2 and mesh gradients, staving off burnout, public speaking and writing, understanding better through teaching, paid vs community work, teaching in the Greek islands, and drawing snakes and lizards and dead things for encyclopedias.

Show Notes

• HelloSign API – Embed documents directly on your website with just a few lines of code
• Sarah on Twitter: @Sarah_Edo
• SVG Animation
• Sarah on CodePen
• Web Animations Workshop
• Sarah’s website
• GreenSock
• mo.js
• Web Animations API
• D3.js
• React-Motion
• Field Museum
• Stack Overflow
• CSS-Tricks
• David Walsh Blog
• Amelia Bellamy-Royds
• Vue
• Say hello on Twitter: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

Conversation Highlights

the thing that I reminded myself when I went into consulting was the worst-case scenario is I get a job. It’s not like there aren’t engineering jobs out there or out there for my skill set, especially my experience history. The worst-case scenario was just going back to what I was doing. That wasn’t so bad either.

---

animation, when done well, is really, really powerful to guide your users. You can actually change your lead conversion, because loaders have huge impacts on perceived performance.

---

To stave off burnout, I would make little projects for myself on the weekends. I was just like, “Okay. It’s Sunday afternoon. I have a mimosa. My significant other and I are going hang out and watch TV. I’m just going to code a silly SVG animation.”

---

the world of SVG opens the door to so much stuff that is just either complicated or impossible to do with static graphics — especially for a UI/UX animation.

---

I started off as a scientific illustrator, which means that I drew snakes and lizards and dead things for encyclopedias.

---

The thing I always try to remind them is that I haven’t been doing the speaking part that long. It’s just become a rolling ball, and that they shouldn’t feel bad if they don’t have that much experience, because that’s something that you can always still get.

---

I would find something out or start to learn something, and then if I could write it down for other people, I had this two birds with one stone thing of not only could I grasp it better but other people could do stuff with it too. And that’s super exciting to me

---

I tried really, really hard to cover a gamut of technology, a gamut of techniques and address some concerns that designers have about optimization and how you work with this stuff to reduce path points and make it performant.

---

The mesh gradient part is, “Ah, what the web could be,” kind of thing. For me, like an SVG person, that’s the equivalent to a layout person really being into CSS Grid. It’s like a total game changer.

Transcript

Tim:

Hey, what’s up everybody? This is Tim Evko …

David:

… and this is M. David Green …

Tim:

… and you’re listening to episode number 31 of the Versioning Podcast.

David:

This is a place where we get together to discuss the industry of the web from development to design, with some of the people making it happen today, and planning where it’s headed in the next version.

Tim:

Today, we’re talking with Sarah Drasner, who is a writer at CSS-Tricks. She is an author, a consultant, and gives some pretty excellent talks on SVG and animations. We’re going to talk to her today about all of those things and much more. So let’s go ahead and get this version started.

David:

Hey, Sarah. Welcome to the show.

Sarah:

Hi. Thanks for having me.

David:

Thank you for joining us. This is the Versioning Show, and we usually like to start the show with a philosophical question. And your philosophical question for the day is: in your current career, what version are you, and why?

Sarah:

Well … that’s a good question. I think I’ve probably gone through a breaking change at some point. [Laughter] This is probably 2.0 or something, or 3.0, but not because it’s super advanced, but just because they were breaking versions.

David:

How do you describe what your career is these days? Because you’re doing a lot of different things.

Sarah:

Yeah, I am. I kind of like that. I’m a naturally curious person. I have been a developer and designer for 15 years, so I kind of started when those things weren’t very separate, actually, and things were done in tables and all the neckbeardy things. I have been working ever since. For the majority of my time working as a dev, I was really a generalist and worked on anything from WordPress theme development to managing giant component libraries, to being a lead front end. Projects ranging from … for typical front-end kind of duties, and a bit of back end but not super full stack or anything.

Last year, I quit my job at Trulia. I was a manager of UX design and engineering there, and decided to go consultant freelance, because I was working on a lot of stuff and there were a lot of opportunities arising, and I’m pretty happy doing this, and businesses is booming. So it’s pretty nice. I work on different projects. I’m curious all the time, so I get to try out different things constantly, which I really enjoy.

David:

This is cool. You’ve basically re-released yourself as a freelancer to the world?

Sarah:

Yeah. I did that about a year ago.

Tim:

Was that a challenging process for you?

Sarah:

I think it was a little scary at first, because I was getting a lot of offers to do consultant work and Val Head and I started a company called Web Animations Workshop, where we were going to start doing workshops together. It was like, okay, well, I have work for now, but what’s going to happen in four months from now when I don’t? That was a little bit intimidating at the time, but actually it’s been the opposite problem, where I have more work that I know what to do with — which is a good problem to have. I’ve been pleasantly surprised at how it’s gone. I think the only unpleasant surprise is my taxes. Consultant taxes — spoiler alert! — is really complicated. [Laughs]

David:

We could do an entire show just about how to manage your business as an independent consultant!

Sarah:

It’s so true.

David:

One nice thing about the way you’re working now — you have pushed away the illusion of security that comes from working with the company, because whether you’re working for a big brand or small, you never know if in the next four months there’s going to be more work for you or if the company is going to go in a different direction.

Sarah:

Totally. I’ve worked for giant companies, but I’ve also worked for small startups where it’s like, “Oh, we have our seed round. That’s good for now,” kind of stuff. [Laughs] It’s the nature of the business, but I think also the thing that I reminded myself when I went into consulting was the worst-case scenario is I get a job. It’s not like there aren’t engineering jobs out there or out there for my skill set, especially my experience history. The worst-case scenario was just going back to what I was doing. That wasn’t so bad either.

David [4:13]:

That’s very true. It’s exciting too, because you’re putting yourself in charge of your career. I’m really interested in these web animation workshops.

Sarah:

Basically Val and I go around … It used to be just around the country, now it’s going to be around the world when we hit Paris this year. Do these two day workshops or one day workshops where we have a plethora of material that we cover. We’re like a Venn diagram of interest and abilities when it comes to web animation. We just naturally noticed we tend to agree a lot on stuff. It came naturally. We were friends first, and started talking about web animation, and when we’d hangout and stuff we’re like, “Man, we’re really closely aligned on a lot of stuff.” So the workshop was actually pretty easy to put together.

David:

What does the workshop entail?

Sarah:

We cover the gamut. We start off with some theory. She goes over some theory about animation as a whole, and what can be learned from the history of animation, and what can be learned about the history of easings and timings and spacings and things like that. I tend to go into some UI/UX considerations for animation. We talk a little bit about getting buy-in, or integrating into a design system.

Then we start to pull into at first CSS animation, then we go to JavaScript animation with GreenSock. Then we do mo.js, then we do React implementations, and then we talk about web animation performance. And if we have time, we have the slides and stuff for Web Animations API and also D3, but we tend to get to one of those not the other one. We have tons of material.

Tim:

I was going to say, it sounds like there’s not much to cover at all really.

[Chuckling]

Sarah:

There’s a lot to keep into consideration. Oh, we talk about React-Motion also and SVG animation. God, I’m missing whole swaths of our workshop. We go over what it’s like to animate SVG and optimize and stuff.

Tim:

It’s very interesting, given that there’s so much material about animation to go over. Because, in my experience, I’m a lead front-end engineer where I work right now. I’m implementing all these designs that I get from our design team, but it always seems like animation is never really given much thought.

Sarah:

That’s why we focus on it and why we talk about it, because actually animation, when done well, is really, really powerful to guide your users. You can actually change your lead conversion, because loaders have huge impacts on perceived performance. There’s just a ton of reasons. Users are building spatial awareness. If you can hide and display things as they need then you clean up the space, you make it much more engaging for them. But when it’s done poorly, it can be jarring, which I think why it gets a bad rap sometimes.

So it’s really important to do it well, and that’s what we study. The thing about animation too is that you really need to be using the right tool for the job. If you are working with CSS animation when CSS animation is just not going to cut it and you need to move to JavaScript, that’s something that you have to work through.

React-Motion is really good at a certain type of motion that‘s interruptible, it’s a single gesture, but it’s not good at sequential movement, and that’s part of the way that the author designed it. We go over when to use what, where: this is really good for this kind of thing, this is really good for this text stack. Get your hands on it, work with it a little bit. The students can see for themselves what we mean when we say that. It’s not just like, “Take us at our word.” It’s like, “Okay. You play around with it, see what you think,” because there’s a lot of considerations. You don’t want to put a huge thing into a library or make an investment there and realize it’s the wrong choice for your needs or your customer’s needs.

Tim [8:16]:

That is very, very good advice. I’ve more than once gotten bitten by approaching an animation with the wrong strategy from the get-go. I’m curious, though, how you got in to the subject of animation to begin with?

Sarah:

That’s actually interesting. I was a lead front end and also managing giant component libraries, and at times I would get burned out — not just because there’s so much work to do, and just giant systems are complicated, and there’s social politics between design and engineering that you have to navigate if you’re going to work with both worlds. To stave off burnout, I would make little projects for myself on the weekends. I was just like, “Okay. It’s Sunday afternoon. I have a mimosa. My significant other and I are going hang out and watch TV. I’m just going to code a silly SVG animation.”

It was at first, I was just curious and just interested in it, and then I noticed it really helped. Even though I had worked some during the weekend, I would come back to work feeling super jazzed. You think, that doesn’t quite make sense. You’d think that the more time off you have, the better you’d feel, but I was noticing that even if I took a vacation, I would feel better for a little while and then start to feel like, “Ugh.” Again soon, two weeks later, three weeks later. What I was really missing was the excitement.

That dopamine rush of like, “Wow. I got this thing to work and it’s super strange and maybe a little ridiculous.” I think I initially got into it because of that, and also because of UX and UI concerns. There were so many things to consider when we were dealing with animation at work, and I really wanted to do it well. I think some of this stuff did immediately translate to something I could use at my job, and that was like doubly rewarding. I’m making something ridiculous and silly on the weekend and then I can also apply it once I got to work and be like, “Look, everyone. We can do this now.” They’re like, “Whoa. Okay cool.” That was probably one of the biggest shifts in my career.

David:

Everybody who just heard this: SVG animation is addictive.

Sarah:

It is definitely addictive!

[Laughter]

David:

It’s funny, because I think of SVG primarily as — it’s the scalable, vector-based way of presenting images on the screen, but I don’t think of it immediately as an alternative for animation. And yet, it offers a number of advantages in certain contexts. I’m curious, what have you discovered to be the advantages for SVG animation?

Sarah:

SVG animation is not an alternative to animation. SVG animation is animation, and it uses the same tools. But you have different concerns with SVG. If you’re manipulating a <div> or a bitmap — like you’re used to working with maybe PNGs or JPEGs for graphics. The thing about them is they’re flat. If you have to move around specific pieces of a JPEG, like let’s say you have an ocean scene with a boat in it, you’d have to actually cut up the boat from the sea and move them around separately, kind of thing.

It gets a little hacky. You have to do some positioning. Maybe you have a position: relative on the containing unit. You have a position: absolute inside to have the boat moving. SVG is a graphic that has a navigable DOM. It’s built with math. There is an ability to dive right into it, grab a piece of it and move it around in a way that a static graphic can’t do. It opens up doors for accessibility. You can play with it like a piece of string, because you actually literally have these Béziers that are the curve commands that you can manipulate with requestAnimationFrame().

There’s so many cool and interesting things you can do with it. All of the things that you know about CSS animation or JavaScript animation can be applied to SVG animation. They’re not two different things. But the world of SVG opens the door to so much stuff that is just either complicated or impossible to do with static graphics — especially for a UI/UX animation. If we’re talking <canvas>, that’s a whole other thing, but if you’re talking about manipulating stuff on the page, SVGs are really powerful, and they’re super small, so they’re really performant.

David [12:52]:

I love that. That’s a really clear way of explaining why it’s important for people to understand this particular approach to presenting this information.

Tim:

Also I really hope someone makes a t-shirt with the phrase, “SVG, it’s built with math,” on it, because I’ll buy five of those.

[Laughter]

Sarah:

That would actually be a really fun one to do. If you got a designer who could do really crazy mathy kind of graphics, that would be nice.

David:

Maybe somebody who had a background in scientific design.

Sarah:

That’s true.

David:

Which I believe is one of your backgrounds.

Tim:

I was going to say, speaking of backgrounds, I think we have yet to hear about yours.

Sarah:

Oh, yeah. I started off as a scientific illustrator, which means that I drew snakes and lizards and dead things for encyclopedias. My parents are scientists, and I was getting into art at the time, so that was my way of rebelling. But of course, the way to be the most nerdy as possible while drawing is to be a scientific illustrator. You can’t get that far away from your parents. I started working at the Field Museum in Chicago. It’s the Field Museum of Natural History. They are really a cool museum. They have that giant SUE T-Rex thing.

The reason why people used to use drawings instead of, say, a photo, is that a photo necessarily has a depth of field. So if you have something that’s small, you have an aperture and something is blurry always. That’s why they would hire people like me to draw drawings. But, while I was working there, they invented a type of camera that took images at every level of the thing and then composited them together to make a totally crisp image and I was soon not really that employable anymore. Even if that machine is expensive, they buy it once and they don’t have to buy it again.

But they liked me, I think. They were like, “Oh, we want to keep you on. Can you build websites?” This is back in 2000. It’s a while ago. That was back in the days where you could pick up a book like HTML for Dummies and learn in a weekend kind of thing. The tech stack was not complicated; it was really, really simple. It was table layouts. It was inline JavaScript — which is cool again! People weren’t even — at the museum at the time — people weren’t even using CSS yet. It was still kind of like, “This is controversial.” [Chuckles]

I started to learn table layouts, but the webmaster there taught me more and taught me industry standard practices and stuff. I started building sites for them, and then I built sites for … Once I was in the scientific community, people knew about me so I built sites for UCSF and Stanford and like a couple of other nerdy places. Then I went to grad school, and then I became a professor in the Greek islands. I was a study abroad professor there for four years, and took students around to the different islands and taught them about the histories there and did some digital studies.

I still did website stuff on the side, because I was paid $10K a year, I think — like really, really low teacher salary. It turns out you can’t not pay your student loans for that long. I eventually did have to get a real job. I came back to the States and started working for an agency here. Then I’ve just been working in the San Francisco tech scene ever since.

Tim [16:35]:

I have to say, in 31 episodes, that’s probably one of the more interesting origin stories that we’ve heard so far.

Sarah:

[Chuckles] I’m a little older, so I have more time to generate stories.

David:

I love how you’ve put it together. But you left out one part that I find particularly interesting, which is that you went into public speaking and writing, which isn’t something that a lot of nerdy tech people tend to go into.

Sarah:

Yeah. I guess that stuff really only started the last year or so. It’s gotten really fast. I’m invited to a lot of stuff now, which is really awesome, but when people ask me about … A lot of people contact me wanting to speak, especially like women in tech, and for advice and mentorship. The thing I always try to remind them is that I haven’t been doing the speaking part that long. It’s just become a rolling ball, and that they shouldn’t feel bad if they don’t have that much experience, because that’s something that you can always still get. Put that word out there that if you want to speak, definitely keep trying. It’s not like the first time you submit, you get all the speaking engagements. It’s like you try and then you show up for it and it comes as it goes.

David:

I know you’ve also been writing for a bit longer than that though, right?

Sarah:

I guess writing and teaching for me has always been a way to understand things better, too. I was a professor before, so I’m familiar with the teaching format. And what I’ve noticed is, I grasp a concept much more when I have to write it down. When I worked for big companies, that wasn’t a lot of times in the form of documenting what I was making — like writing a bunch of code, then documenting what we did for a giant system or something like that.

When it comes to community work, what I thought was cool was like, I would find something out or start to learn something, and then if I could write it down for other people, I had this two birds with one stone thing of not only could I grasp it better but other people could do stuff with it too. And that’s super exciting to me, especially when I see SVG animations and somebody is like, “I learned this from reading Sarah’s thing.” That’s the coolest feeling in the world — that somebody is able to do something because of something that you taught them, especially because the community has taught me personally so much stuff.

Stack Overflow — I am indebted to them for the rest of my life, and same with CSS-Tricks and same with David Walsh Blog. There’s so many concepts that I’ve learned because the community is so open, that giving back felt pretty good.

David:

It sounds like that can be addictive too.

Sarah:

Yeah, definitely.

David:

What kind of problems do you see people coming to you with around the issues that you’ve been teaching?

Sarah [19:36]:

People come to me with a bunch of different things. I would say that the work that they come to me with for contract work is a little bit different from the community work that I do. For contract work, it’s usually either how do I get animation into this giant system and can you come teach us how to do that, and what the concerns are. Sometimes people hire me to teach them about SVG, or sometimes people mocked up an SVG animation for a client and then couldn’t figure out how to do it.

Sometimes I’m called in as a last ditch thing to fix the thing. I get a myriad of stuff and some are just animation user flows, microinteraction kind of things. The community work that people usually ask me to do is more along the lines of someone tweeting at me at 2:00 AM, “I can’t figure this out. I don’t know why the stroke is not there. This has to be shipped for production tomorrow. Please help. Here’s a CodePen.”

Those are a little bit more like tiny bits of bugs or tiny bits of interaction that they didn’t quite get or something like that. I would say that of course the stuff that people hire me for are bigger projects, and the stuff that people are asking for in the community are just to clarify something, or debug something.

Tim:

I’ve sent that please help me with this SVG tweet, I think to Joni Trythall, at least twice.

[Laughter]

Sarah:

Yeah, she’s a great one too, and Amelia Bellamy-Royds. She’s probably the smartest person I know. She did the technical edits for my book, and there was like one thing in hundreds, hundreds of things that she wrote that was not quite accurate, and for a day I was like, “What did I get wrong here? I don’t understand. It can’t be that Amelia is wrong,” because she’s literally never wrong. She’s just super on it all the time, and can dig down and debug really, really well.

Tim:

So, speaking of this book that you wrote, can you give us a little bit more of an update on what that is all about, and the process and all those things?

Sarah:

Sure, yeah. It just came out a couple of weeks ago. I’m super stoked. If you are following me on Twitter, I’m sorry, because I’m retweeting and tweeting about it all the time, and I know I’m probably annoying people at this point, but I’ve never written a book before and I’m really excited to see it out. The tweets of people actually receiving it are really exciting to me, too. I worked on it for two years. Actually the demos in it are a whole other year of work, so it’s actually like the combined effort of a lot of time.

I tried really, really hard to cover a gamut of technology, a gamut of techniques and address some concerns that designers have about optimization and how you work with this stuff to reduce path points and make it performant. And then that developers have about how to animate all of the tools available to you. I run from, here’s how you work with it in Illustrator, to here’s how to work with these tools, to here’s a bare metal implementation with just requestAnimationFrame() and just creating an SVG and JavaScript — if that’s your bag. I tried to make it as cohesive as possible.

David:

It sounds pretty comprehensive. I was going to ask you where you recommend people look to start learning about these things, but I think I know the answer to that now.

Sarah:

I mean I did try to make it the thing that I could point to when people have questions and stuff, too, because I get that question a lot. Like, I want to start learning this but I’m not sure how. The book is really meant to take you on that journey.

Tim:

I think I do have an actual technical question, and that question is what happened to SVG 2?

Sarah [23:37]:

Ah, I can answer that, actually. Just like a lot of browser specs, it was proposed. People didn’t really see the use for it that much, because it’s kind of a catch-22. There’s a lot of stuff in there that’s really super … you won’t know that you need this unless you are really super into SVG, which rightfully the browsers were like … people aren’t really there yet kind of stuff. There’s one piece of the spec, though, that I’m sad isn’t going through, or I hope gets implemented eventually, and it’s the mesh gradient.

Right now, we can define radial gradients and we can define linear gradients and you can combine them with opacity or something, but what a mesh gradient would allow you to do is basically map out gradients on a coordinate system and make, like the name suggests, a mesh of different colors that blend in to each other. You can make full faces, you can make robots, machines and all sorts of really beautifully dimensional textures without a lot of data.

It’s really, really small, and really, really rich. That’s the part that I cry about not being … I think the rest of SVG 2, I’m excited for it, but nothing is going to make or break my life. The mesh gradient part is, “Ah, what the web could be,” kind of thing. For me, like an SVG person, that’s the equivalent to a layout person really being into CSS Grid. It’s like a total game changer. There’s this catch-22 of like, “Well, nobody is using it”, but there’s no implementation, so nobody can use it. That part’s a little bit hard for me.

David:

I think that’s true about every web standard out there. You can’t know if anybody is going to use it until it’s there and it’s available.

Sarah:

Right, exactly. It’s not even like available under a flag or available in some browser. It’s not available anywhere.

David:

How can people find you, and find out more about what you’ve been teaching, also find your book?

Sarah:

I’m on Twitter. I’m @Sarah_Edo, E-D-O, on Twitter. Sarah with an H. I tweet there like I tweet my articles or my talks or any resources that I work on, or other people’s resources that I think are cool. My book is available on Amazon or O’Reilly. Either one works. It’s called SVG Animation, so it’s pretty easy to find. I also write for CSS-Tricks. I came out with a post today. I come out with about one or two a month. Some months, I go crazy and write five, and I wrote about Vue, which I’m wearing a t-shirt of right now, which is a JavaScript framework that I’m into.

David:

Represent.

Sarah:

Yeah, I love it. I also like React. People tend to think that it’s an either-or kind of thing, but it’s not. Oh, and CodePen of course. I do tons and tons of open-source work on CodePen, and make tons of demos, so that you can explore code and try to make a lot of resources there.

David:

So many different places that you forget about them yourself.

Sarah:

That’s usually the first one I mention. I can’t believe I forgot it.

David:

It’s an impressive portfolio, and I know that people are going to be out there looking for all of your stuff. Thank you so much for joining us on the show today.

Sarah:

Yeah. Thanks for having me.

[Musical interlude]

---

David:

Now I’m excited to tell you about a new sponsor of the show, HelloSign, with their developer-focused eSignature API.

Long gone are the days where you’d have to mail or fax a contract or agreement to a client, partner or new hire, waiting days or weeks to confirm everyone was on the same page.

Thanks to platforms like HelloSign, you can get documents emailed, signed and projects under way in no time.

But now you don’t even need to email them, with HelloSign’s eSignature API. The eSignature API allows you to bring HelloSign’s document signing platform to your site, making it even easier for partners or new hires to sign on to your next big project.

Integration is quick, the documentation is clean, and you can get documents embedded into your site or app with just a few lines of code. Now you can take advantage of HelloSign’s eSignature implementation, ranked #1 on G2Crowd, with the best API support you’ll ever need.

Go to hellosign.com/api, sign up, get signing, and get things moving.

---

David [28:20]:

Wow. She’s amazing. She’s doing so much that she can’t even keep track of all of it herself.

Tim:

Yeah. It was incredible hearing her background story. First off, I didn’t know there was such a thing as a — what was the term? — scientific illustrator. Did I get that right?

David:

I hadn’t really heard of it until I read her bio, but once she described it, it made perfect sense.

Tim:

There’s a need for that, right, at some point? Because when you think about old encyclopedias and things like that, you can envision those sorts of drawings.

David:

She schooled me on SVG, too.

Tim:

First off, I have a big confession to make on my side. I don’t actually do that much animation with SVG. In fact, it’s not that I avoid it … Well, maybe it is, because I’ve never really done any SVG animation like on my own for fun, because it just sounds so hard. I mean really when you look at an SVG first off, it’s like you’re punched in the face with math. There’s just numbers everywhere. There are some people who can literally write SVGs by hand, which … don’t even get me started on that.

But it is this intimidating thing when you look at it. It’s just a bunch of decimal points and there are paths and things like that, but it’s a lot of tedious stuff. There are weird properties that go on SVGs and things like that. But it seems like Sarah has really been able to make it this digestible and, dare I say, fun sort of thing.

David:

If she can make it fun … I’m sure she can, and I’m going to go get her book and I’m going to try, because when I look at SVG, the thing that intimidates me and that stops me from moving forward with it is all of … Basically it brings me back to the early days of XML, when you’ve got all of this complex structure and it’s distinct. It’s separate from the structure that you have in your HTML document, and there are separate CSS properties that apply to the types of elements that live inside of an SVG that look like they’re doing the same things that the properties in CSS are doing to DOM elements, but they’re doing the same thing to an SVG element, so it’s a different property. I love CSS as it applies to HTML. I’m passionate about it. I enjoy it. But then I think, “Oh my god. I have to learn another one?”

Tim:

Every now and then I’ll be fooling around in developer tools. In the CSS portion, you hit the one key and it auto fills for you. Every once in a while, I’ll accidentally hit Q or something, and I’ll get to CSS property and I’m like, “What is this for?” Sure enough, it’s some sort of thing that applies to SVG only.

David:

Sometimes I get excited when I see those things and I think maybe I can do something with CSS on an HTML element that I didn’t know I could. No, it turns out it was only on SVG.

Tim:

Actually, Sara Soueidan speaks a lot about this — that in a lot of cases, SVG is better than the CSS hacks that we usually use. For example, a triangle as a decoration. SVG handles that so much better and so much more simply than a CSS pseudo attribute will. But, we don’t often reach for it first, because … and maybe this is just a part of if you were in the industry early enough to know what XML is. I mean it really does get associated at least in my head with XML, and when I think about the two things, I think, uck, I really don’t want to touch that because it’s just a complicated and weird and foreign.

David [32:07]:

It’s not just that it’s complicated, weird and foreign, but some of us have been in the industry long enough that browser support for SVG was very iffy.

Tim:

Yeah, that’s very true. That’s one of the reasons why I asked Sarah about SVG 2, because … The only reason I actually know about that is because I wanted to learn SVG better maybe a year or two ago, and I started to write a mini-library that would help you do some SVG stuff easier with JavaScript. I started to make certain functions, and you add this method and you get this property out of an SVG.

I started looking at what are some more things that I could do with SVG for this library. So I pulled up MDN, and sure enough I saw a whole bunch of things that had no support and were just … this is just in a spec. This is maybe coming later. There’s a whole bunch of very interesting but complicated and obscure things that SVG 2 would be able to do. I mean I certainly don’t remember seeing anything about mesh gradients. I looked at it for a few minutes and I was like, No. No way. I’m not going to be able to do any of this stuff.

That said, the browser support issue is a frustrating one, because there are properties where … Of course nobody is interested in his thing because we don’t know that it’s possible. Nobody’s even tried to use it before. If browser vendors implement it, it would change how we work with the web. How do you solve that problem? Because you just can’t go and build a polyfill for mesh gradients.

David:

The way our industry has been solving it for years is some browser developer decides that they’re going to be the first to implement this and if they’re Microsoft, maybe they’re going to do it to the exclusion of other companies that also have browsers, and try to get people to use their browser exclusively. I’m not sure that they’re still doing that, but they have been doing that in the past. Then that standard gets implemented in one place. They convince developers to start using it. People see that it works, and think they can use it elsewhere. It fails elsewhere, and then the other browser developers have to play catch up. I’m not sure that that’s really a good approach.

Tim:

Now that you mentioned it, that’s exactly what happened with responsive images. Yoav Weiss actually got crowdfunded to literally write the commit for Blink to enable responsive images according to the specification. That was maybe a few years ago, but for all of us nerds, it was a very exciting time, and it worked. Maybe we can have Yoav on the show and convince him to just do it all over again. I’m sure it was very stressful and a lot of hard work, but maybe we can make it happen.

David:

It’s kind of terrifying, but that might actually be the only way that you can make something like this happen if you want to really force it on the community.

Tim:

Also, Yoav, if you’re listening, I apologize. I don’t mean that it has to be you. Yoav is an excellent guy. He one time was driving home from a conference, I think with his family somewhere in Europe, and I tweeted him with a question, and I’m not sure if I remember this correctly. I think he pulled over in the side of the road to answer my tweet, which I felt terrible about, but that was a thing that happened. That’s the type of person that it takes to just go on their own and add a new feature to the web for the whole world to use.

David:

And Tim, you are making a reputation for yourself with everybody as the guy who’s tweeting that question.

Tim:

That’s how I got here today. That’s how I’ve gotten to the position that I’m in. I just tweet the right people at the most random times.

David:

I think I like Sarah’s method better. She found things that she was passionate about, she dove in, she started building these things that were fun and got that little dopamine rush. By the way, I have to admit, I have said it before that I get a little thrill when I make a CSS thing work the way that I want it to work, but the way she described it, it was like she was looking to my soul and saying, “Oh, yes. This addictive personality that you have, it has a practical application, and here it is.”

Tim [36:23]:

In fact, she grouped burnout with working on something else as a cure burnout, and I think when she mentioned that, both of our heads cocked to the side like, “Wait. What? You were burned out, and then working on stuff that you do at work sort of helped you out of that?” But now that I think about it more, I’ve done that very same thing. In fact, sometimes when I get home from work or even on weekends, sometimes my wife and I will drive out to Long Island during the weekends and I’ll bring my laptop with me, and I’ve been in my spare time hidden away on GitHub. I’ve been building a stupid battleship game. It’s fully client side, service worker and all that stuff, but it’s just so much fun to work out these challenges. I’ve never made a game before. It’s probably all wrong, but the code looks very nice. It’s refreshing for some reason.

David:

I can understand that. I’ve had that exact same experience. I’m working on a little animation thing myself on the side, not something that I can publish yet, but something that needs a live generative component to it as well as being visually compelling and engaging. Something that draws you in. You find that working on something like this — as opposed to working on the project that you’re fulfilling for somebody’s contract that you have to finish on a certain deadline according to somebody else’s specifications — it’s a very different experience. It massages different nodes in your brain.

Tim:

I think there’s a lot to be said about getting excited again as being the cure for burnout.

David:

Sarah is a good embodiment of that. You can see the enthusiasm that she brings to her work right down to the point of crying over mesh gradients.

Tim:

Yes. I’ve probably cried over lots of things on the web, but mesh gradients hasn’t been one of them.

David:

Now that I know about them, maybe I will, because it does sound like it’s a pretty cool concept.

Tim:

Especially considering how small you can get with those mesh gradients. I haven’t seen this concept drawn out, but the way that Sarah described it, it almost sounds like it could good start to rival actual non-vector images.

David:

I’ve seen mesh gradients. I’ve used them myself in Adobe Illustrator, and I know how powerful they can be in terms of simulating real-world textures. The idea that you might be able to do that dynamically in a very small file using SVG 2 — talking to you guys who are controlling the standards … [Clears throat]

Tim:

Those of you who listen to us ramble.

David:

[Laughter]

They’re out there, trust me. It sounds very compelling, and I can understand why that would be an important thing.

Tim:

The writing. Man, every time I hear somebody talk about how much writing they do, I feel a little bit convicted, because I know I should be, and I actually … I said that I would this, David, and I followed through with it. I launched my blog, but so far it only has one post, and that post says that I launched a blog.

David:

That’s the first step. There are other blogs out there that also have only one post, but yours won’t be one of those.

Tim:

No. In fact, when I finish the game, which I’m rushing to do now, that’s going to be my second post, detailing about how I built that thing. Hopefully it’ll look good. Then hopefully I’ll get a third post out explaining my first attempt at animating an SVG.

David:

I would recommend doing some little intervening posts that talk about the frustrations that you’ve been encountering along the way as you’ve been building your game, because I think now, we have a couple of people out here who might be interested in finding out how you built a battleship game, and what they’re going to stumble across while they’re trying to do that.

Tim:

Yes, definitely. That’s a very, very good point. Maybe I’ll get to work.

David:

Okay, everybody. Go out there and follow Tim’s blog, because you’re going to learn a lot.

Tim:

Or don’t. Just forget about it.

David:

Do you want me to edit that out of the show?

Tim:

No. You have to leave that in for authenticity’s sake.

David:

Okay, fair enough.

Tim:

Well, thank you so much for listening, everybody. We always getting to talk technology with all of you.

David:

We would also like to thank SitePoint.com, and our producers, Adam Roberts and Ophelie Lechat, with production help from Ralph Mason. Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes to let us know how we’re doing.

Tim:

We’ll see you next time, and we hope you enjoyed this version.

Frequently Asked Questions about Animating with CSS, JavaScript, and SVG