Interactive Web Animation with SVG

Have you ever felt uninspired by the every-day grind? Like coding is all work and no play? Come with me as I take you on a whistle-stop tour of delightful SVG animations. I’ll also ask for some audience participation, as interaction is what makes motion on the web so fun! By the end of this talk, you will feel enthused and inspired to make your own creative web animations with SVG.

Transcription

[Music]

[Applause]

Cassie Evans: Hi, everyone. This is all right, isn’t it? [Laughter] Yeah, what an amazing venue. I’m kind of quite blown away by this conference already, like a lot of people. I’ve never had so many people tell me such amazing things about a conference and I thought it wouldn’t live up to the hype, but it definitely has.

Yeah, it’s an honor to be speaking here today. I have the pleasure of being here today to talk about SVG, particularly SVG animation, which is my favorite bit.

I spend a lot of time making demos on Code-Pen. It’s like my happy place. There are tons of possibilities for creative expression with SVG. You can kind of go abstract and you can play around with SVG filters and masks and make weird blobby contraptions like this.

You can also do all sorts of cool effects with motion paths and text animation. To kind of go back to what Aaron was saying about the importance of accessibility and screen readers and stuff, the great thing about SVG is that, if you were to make something like this in canvas, which you could do, it’s all JavaScript and it’s just a little inaccessible black box. Right? But because SVG is a markup language and an image format, you can make this accessible.

You can also use displacement maps like this to make wobbly jellyfish - if that’s your thing. I mainly made this because I like making cute things. I was having a chat with a friend at lunch and we were saying that the Web needs more whimsy, and I really feel that.

Exploring Web animation and SVG has also helped me understand more about animation, in general. It’s helped me with interface animation and it’s given me more confidence with CSS and JavaScript. It’s also encouraged me to explore and play around with APIs and libraries that I might have otherwise passed by.

There’s a whole mix of people here today, so let’s rewind and start right at the beginning. What is SVG? A lot of the clue is in the name. SVG stands for scalable vector graphic. It’s an image format that’s scalable because it uses maps to plot and connect points rather than being made up out of pixels. You can make an SVG tiny or massive without affecting the resolution or file size.

As I said before, SVG isn’t just an image format. It’s also a markup language. After you get past the initial confusion of all the ones and zeros, it starts looking quite familiar. It’s kind of like HTML. You’ve got angled brackets and nested tags.

It’s a lot like HTML and I really love how my friend Richard explains SVG. He says that SVG is basically an alternate universe version of HTML focused on graphics instead of documents.

Just like HTML, SVG has a DOM. Unlike other image formats, we can actually interact with elements that are inside an SVG and kind of move them about to make animations. SVG graphics are basically illustrations that you can manipulate with code, which is super cool.

Some of you might be thinking that you can style HTML to make animations too. That’s a good point. You’re right. You can. I’ve seen amazing examples. Some people make brilliant animations using HTML elements.

[Laughter] This is done by Julia Muzafarova using divs and CSS, which is pretty mind-blowing. Can you imagine how complicated it would be to work collaboratively on something like this? Can you imagine getting a mockup of this from a designer and then having to recreate it using divs? It would take a while.

HTML just isn’t the right tool for the job.

Sarah Drasner says that SVG is built for drawing in a way that HTML and CSS are not. By creating artwork with HTML elements, even though it’s possible, you’re kind of hacking things that are meant for layout.

SVG acts as a common ground and it allows for collaboration and seamless handovers between designers and developers. The designer can create an illustration with SVG and then hand that same file over to the developer to animate. They can both contribute to the animation with different skillsets using the same file.

I mean if you’re one of the people that can design and code, then you’ve got the entire process covered. The world of SVG is your playground. It’s pretty cool.

Yeah, before we get too overexcited about SVG, let’s kind of take a step back; go back to 2001, and look at how I first got started making stuff on the Web.

[Internet dial-up tone]

Cassie Evans: When I was 11, I’d wait until my parents were asleep and then I’d quietly sneak downstairs to use the family computer. It’s a really dangerous game to play because, back then, accessing the Internet was really noisy.

If I managed to access the Internet without waking up my parents, I’d log into Neopets. Who here had a Neopets account? Say, “Yeah. Yes.” [Laughter] That was a really enthusiastic hands up. [Laughter] Brilliant.

Yeah, Neopets was the absolute best. If you weren’t lucky enough to have a Neopet, I’m really sorry. It was an online game. It was kind of similar to Pokemon or Tamagotchi.

You could adopt a little fancy creature. This is my Shoyru. Then you could battle other people’s Neopets, play games, and trade goods on the Neopian Stock Market. They even taught kids stock market stuff.

For the bit that I found really, really exciting was the customization that the game allowed. Neopets didn’t just allow us to customize our pages; they actively encouraged it.

There was this super accessible, friendly, HTML guide on the website that talked through absolutely everything that you needed to know. When I was looking up this talk, I thought that it would be gone, but it’s actually still live now. It’s a little bit dated. There’s marquis, blink tags, and stuff in there.

At the time, this guide was absolutely brilliant. Young people everywhere, just because they were trying to play a game, learned how to code. The guide also encouraged people to make their own kind of custom background images because we didn’t have so much control with CSS back then.

Everyone learned a bit of design, too, if you can call Microsoft Paint design.

For me and many other youngsters that I knew coming of age at the same time, this was our first introduction to these concepts. I think that the sense of community, the knowledge sharing, and the drive to create things was what drew me towards front-end development as a career.

We’re going to get serious now. Yeah, front-end development has got very serious, very serious. We’ve come a really long way since the days of Neopets. It’s not all marquis tags and sparkly cursors anymore.

Jeremy was talking about complex websites earlier, so a constant stream of new devices and increasingly large and complex sites have come hand-in-hand with complicated build tools and JavaScript frameworks dominating job postings. Front-end seems to be kind of ever-expanding and shifting further into the realm of computer science.

There’s a lot to learn. This is a roadmap to modern front-end development. [Laughter] Without things like Myspace and Neopets, we’ve lost a lot of these original entry points into the field. With that expansion of the field has come a bit of a division.

Chris Coyier wrote a really great article recently called The Great Divide and he mentions a riff that seems to be opening up between people who identify as front-end developers yet have divergent skillsets. We refer to it at work as the back of the front-end and the front of the front-end.

This divergence, it does make a lot of sense because front-end development is a perfect equilibrium between design and logic. This career appeals to people, a range of people who are both visual and logical and whose skills and interests fall over varying parts of this spectrum.

But it’s important to remember that people learn in different ways, so I organize and coach at a weekly coding workshop called Code Bar. Actually, there’s one in Berlin. Are there any Code Bar Belin people here? You should go, okay? [Laughter]

We’ve found that the more visual students, they can initially struggle with a more kind of abstract approach to coding. They learn best by making things and coding concepts seem to click when they’re working with something visual or tangible.

This is where I kind of use SVG. SVG is a really great place for visual people who are learning how to code. It provides this really great bridge between something tangible and something more abstract. It works as a really fun starting point to play around with other Web technologies.

Let’s take DataVis for instance. Where I find DataVis fascinating is this wonderful blend of design, data, and storytelling. I saw a bunch of DataVis examples when I started learning how to code. I was like, “Yes! That’s what I want to do. I’m going to get stuck in. How do I do this?”

I Googled, “How do you do DataVis, DataVis coding?” and got D3. This is a JavaScript library that gets mentioned a lot for DataVis. If you start delving into the docs, even as a more experienced developer, you also realize it’s got a pretty steep learning curve.

Martin Burch says that “The trouble with D3 is to build a visualization you must also have a deep understanding of SVG, DOM, JavaScript, geometry, color spaces, data structures, the standard model, and quantum physics.”

[Audience Laughter]

Cassi Evans: He’s not over-exaggerating. It’s an amazing tool and you can do so much with it but there’s a really high barrier to entry. For a lower barrier to entry, maybe before giving D3 a go, we can do DataVis with just SVG and plain JavaScript.

Robin Rendle has written a really great article about making charts with SVG. He points out that because SVG is an image format that you can design in a graphics editor and also a markup language. You can design an infographic in a graphics editing program, export it, and then pop it straight into your website.

Why stop at charts? DataVis, after all, is all about storytelling and illustrations are perfect for that.

Clearleft, where I work, we had some solar panels installed on the roof. They came with an API, which is exciting. For Earth Day, I made this little illustration of our office and then used it to show off our power savings. We saved 4.5 trees worth of CO2 so far, which you can see in your virtual roof garden. Then the windows of the building also light up according to how much solar power we’re currently using or currently storing. It’s only at 33% here because it’s England. It’s not sunny. [Laughter]

[Audience Laughter]

Cassie Evans: If you want to start exploring this and you want to start making your own SVGs, there’s a whole load of graphics editors out there. I personally use Illustrator, but Adobe software is undeniably expensive and not accessible to everyone.

I asked the Internet for some cheaper alternatives. Figma and Inkscape got a lot of love. They’re both free. Sara Soueidan, who is the queen of SVG, recommends Inkscape as she says it generates good quality SVG code, and that’s arguably the most important thing. If you can’t spring for Illustrator, I’d go with this recommendation.

Now, there are a lot of tutorials out there to help you get started with designing vector graphics. If you are sitting there and you’re like, “I don’t want to draw things. That’s not my idea of a good time. I don’t want to make my own SVG illustration from scratch,” but if you still want to play around with the coding side of it, you can download vector art online. You can go somewhere like Free Pic and you can download some unicorns. [Laughter] You can use that as a starting point. You just have to remember to credit artist because, otherwise, they’re sad. This is also an SVG illustration, which I really love. It’s super cute.

Right, so you now know how to get an SVG. Let’s break down what you need to know in order to create a little animation. We’re going to animate a Neopet. Yeah, a lot of the tricky bit with SVG animation is in the setup. SVGs are made up of different elements. How these shapes are actually drawn will dictate which bits you can animate.

The body and the legs here, they’re actually joined together. They’re one shape, so you won’t be able to animate bits of it, whereas the wings are a separate shape, so you can animate them separately from the body. Then anything that you might target in your animation, you’re going to want to put into a group or onto its own layer. If you name your layers nicely, when you export out your SVG you’ll get IDs with that layer name, which makes things a lot easier because SVG code can be really unwieldy and very confusing to navigate.

Then the white box here, this, once you’ve exported the SVG out, will actually be the SVG viewport. A viewport is like a window into infinite SVG space. It’s the bit of the SVG that’s visible. Anything that’s outside of the box will be cut off. You want to make sure that everything is within the viewport and there’s enough space around the outside to move your elements around.

Then once you’ve got your SVG, whether you’ve made it or someone else did or you downloaded it, it’s important to clean up the code before you start animating. The code that you get straight out of a graphics editor can be really confusing, really unwieldy, bloated, and difficult to work with. I personally really love SVG OMG. It runs in your browser and you can see the changes as you update things so there’s less chance of you changing something and then ruining your illustration.

Once you’ve done that, CodePen is a really great place to start exploring the coding side of it. There’s a really great community on CodePen. There are tons of examples to explore and you don’t have to faff about getting a whole project set up. You can just paste your SVG markup and just get coding.

Then once you’ve got your SVG into CodePen, you might want to do a little bit more organizing of the groups. If you want to target a particular bit of your SVG and it’s made up of a collection of shapes and parts, it’s a good idea to group them together so that you can animate the container. It’s kind of like a div, an SVG.

SVG elements also have an implicit drawing order. Z index doesn’t actually work in SVG. There are shapes that are visually on the bottom of your SVG, like his wings need to be at the top of the SVG code. Otherwise, stuff like that happens.

Right, so animation time. Yay! Cool. CSS is a really great place to start. You don’t need to add in your libraries. The syntax is nice and declarative and you can reuse keyframes on multiple elements.

Jeremy was talking about things drifting down the pace layers. There are actually some really exciting things coming with CSS soon, like we’ve got the CSS motion path module, which is on its way and that will allow us to animate elements along an SVG path and also animate DOM elements as well, but that’s not my talk but it’s also exciting.

If you want to make something more complex like the example that I showed you right at the beginning, it starts getting a little bit messy. It’s not impossible. You just have to be really patient.

With CSS, we can’t chain animations one after another. You have to kind of fake chaining with delays. If the first animation is two seconds long, we’ll add a two-second delay to the second animation so that, when it ends, the next one starts. But then if we want to add a third animation, we have to add the duration of the first and the second animation to work out the delay and then so on for every animation that you add on. Then if you want to tweak things, as you always do, it’s a lot of work.

Animations are never finished the first time. You’re going to have to go through and you’re going to have to fine-tune things. About 90% of the work I put into an animation is fine-tuning stuff once I’ve already written the animation code out.

If a complex animation is with a lot of moving parts, working like this is a little bit of a nightmare. If you want to change something, you might have to end up replacing a whole bunch of things in order to achieve that.

Also, when it comes to SVG animation, at the moment, there’s a downside to using CSS. Transforms applied to SVG elements can behave differently in different browsers. [Laughter]

[Audience Laughter]

Cassie Evans: It’s not good. Nobody wants that. Aww.

This is particularly frustrating because transforms are how we move things around. The issue with transforms in SVG is actually down to how transform-origin is implemented.

DOM elements, they measure transform-origin from their own top left corner. But with SVG, in some browsers, transforms are measured from the SVG canvas itself, not the element.

There’s a relatively new CSS property called transform box that looks really promising to fix this issue, but the browser compatibility isn’t 100% yet. We don’t have Edge or Internet Explorer.

Transform box defines the layout box that the transform and transform-origin properties relate to. If the transform box property is specified as fill box, then it will take the element as the reference box. If it’s specified as view box, the nearest SVG viewport is used as the reference box.

If you’re happy with going CSS keyframes, if you’ve got the patience for that and you don’t mind writing them all out, you can go the progressive enhancement route and we can use feature queries to check if the browser supports transform box and then pop all of our animation code in there. If you do need to have that animation in Internet Explorer or Edge and your animation is too complex -- I’m talking about complexity, aren’t I? [Laughter] -- If your animation is too complex to write out with CSS, then it might be time to reach for a JavaScript animation library.

There are a lot of JavaScript animation libraries out there. These three are some of the most popular. I’ve had previous talks where people have thought that these are SVG animation libraries but they’re not. They’re just JavaScript animation libraries, so you can animate DOM elements and SVG with them. Some of them, you can even animate WebGL properties. Yeah, but they all handle SVG transforms cross-browser, which is the most important thing, so that’s good.

GreenSock and Anime, they give you the ability to organize your animations on timelines, which makes chaining and sequencing quite a lot easier. Velocity uses sequences and doesn’t have a native timeline, so I find this a little bit harder to work with. Anime is the most lightweight and GreenSock used to be the heaviest by quite a long way but, excitingly, a couple of days ago, they released V3 and that’s cut the file size in half, so they’re all now on pretty equal footing, which is good.

Licensing wise, Anime and Velocity are both MIT licensed, so you can do whatever you want for free. With GreenSock, all the core GreenSock features are open source and free to use too, but you do need a license if you’re selling a product to multiple end-users. Then some of their plugins are behind a membership fee.

I think one of the most important things is to be able to get help when you get stuck. All of these libraries have really great docs and really great examples on CodePen, but GreenSock also had forums. The forums are very active and they’re full of people that are ready to lend a hand.

When it comes to choosing one, as always, it depends. I think you should weigh up your options and choose on a project-by-project basis. The core concepts behind all of them are the same, though, so if you learn one, you’re basically going to be comfortable with most of them. It’s just going to be the syntax that will change.

I tend to use GreenSock for most. That’s mainly because of their forums and they’ve got SVG specific plugins. I mentioned the membership fee for some of the plugins, but they’re all free to use on CodePen, so you can just knock yourself out. You can make whatever you want.

Yeah, there are a few of their plugins that are made for SVG like DrawSVG. DrawSVG allows you to show and hide SVG paths. That looks a little bit boring. You’re like, “Why would you want to do that?”

This is the kind of thing that you can achieve with DrawSVG. It wouldn’t be an SVG animation talk without an example from Chris Gannon. This was originally done by Salih Abdul-Karim from Airbnb. He was using Bodymovin, which is an After Effects plugin that exports animations to HTML and SVG and canvas. But Chris remade it using SVG and GreenSock to kind of prove a point that SVG animation is just as flexible as animation in After Effects.

There’s also MorphSVG where you can morph circles into hippos or just one shape, SVG shape, into another SVG shape. If anyone has tried to do that without the use of a library with shapes that have different points in them, you’ll know why this is so useful. It’s a pain. They will handle shapes that have completely different numbers of points.

This is also super -- it was a sneak peek at V3, but it’s come out now, so that’s exciting. They’ve got a motion path helper in their motion path plugin, so you can actually edit the SVG path that you’re animating along in the browser, which is so cool because a lot of the time I’ll do a little animation and then the path isn’t quite right. Then I’ve got to go back into Illustrator and do the path and back into the CodePen and back in Illustrator and back into CodePen. You can just do it in the browser now, which is amazing.

Yeah! Super cool.

Right, so I could talk about the cool features of GreenSock for the whole talk, but we definitely don’t have time for that. We’re going to focus on the need to know and then get our Neopet animated.

Before getting started, you need to add the GreenSock library to your project. Then once you’ve got that sorted, you’re ready to start tweening.

What is tweening? I’m so glad you asked. Tweening is short for inbetweening. The tween is the name for a single movement in animation. This could be a movement from A to B in space or it could be a movement in state from one color to another.

Then the ease that you choose is what determines the timing and then the spacing of the in-between frames. Things in the real world don’t just move consistently from A to B unless they’re in space and they don’t have gravity to contend with. Easing is what makes your animation feel more lifelike and kind of gives it personality. GreenSock provides a whole bunch of easing equations, like loads more than you get with CSS and Cubic Bezier, so you can make really interesting animations, like realistic animations.

In GreenSock, a tween looks like this. There are a whole bunch of GreenSock methods but, most of the time, you’ll be choosing to animate to or from some values. You’ll choose what you want to animate and how long you want to animate for and then what values you want to change. You can create individual tweens like this or you can take tweens and you can sequence them together on a timeline, which is the thing that CSS doesn’t have.

Timelines act as a container that you can place tweens or other timelines inside. Timelines kind of help you keep your tweens organized. They give you a lot more precise control over the animation. Timelines themselves have a whole bunch of methods you can call if you want to speed up the whole sequence, reverse it, or pause it.

GreenSock also has dev tools. This is super handy for when you’re making something complicated because you can scrub through and you can debug your animation.

Let’s take a step back from the tools for a second. The best thing, in my opinion, about Web animation isn’t to do with the developer experience or the specific tools that we use. It’s to do with the user experience. When you animate on the Web, people can interact with your animation. [Laughter]

[Audience Laughter]

Cassie Evans: This adorable example is from Katherine Kato. Being able to factor in external interaction when you’re making something brings this level of playfulness, whimsy, and creativity that you don’t get with animation in After Effects. We don’t just have to stop at hover effects, though. We have all sorts of cool stuff that we can play within the browser, like the Web Audio API.

Speaking of which, I’ve made our little Neopet interactive. This is not at all a cheap gimmick to make it sound like you’re enjoying my talk but, the more you cheer him on, the happier he gets.

[Audience Cheering]

Cassie Evans: Oh, no! We’re going to get this sorted. It’s fine. Don’t worry.

Yeah, CodePen is down. There’s a video of it, though. Just a little video. Aww.

[Audience Cheering]

Cassie Evans: Pretend!

[Audience Cheering and Clapping]

Cassie Evans: [Laughter] Yay! I’ve linked to the CodePen too, so if you want to check it out and shout encouraging things at him later when CodePen is working, you can. Thank you for your patience.

We can also play around with interaction from a webcam. This little chameleon that I made; he changes color when you hold different objects up. It’s pretty fun.

Under the hood, I’m getting the average color from the feed and then I’m updating some CSS variables. It can be a little bit tricky working with pixel data, but I learned something that will definitely help if you want to give it a go.

In order to get the pixel data from a webcam feed, we draw the webcam feed to a canvas and then we sample the underlying data. The array of pixel data that you get back is massive. We’re talking near a million color values. It’s huge. There are a ton of pixels to sift through.

What we can do is we can kind of change the canvas dimensions, so we can draw the image frames to a smaller canvas. For example, four-by-four pixels. You can also visualize this with CSS, which is super cool, with image rendering pixelated. If you want to get an average color from a webcam feed, this is a much more manageable number of pixels to be working with. I’ve linked to the CodePen as well if you want to check it out.

Color detection is not the only thing that we can do with a webcam. Machine learning and things like face detection are becoming more common and accessible. There are a lot of face detection libraries out there. I’ve used Face API, which is built on top of TensorFlow, before and that’s quite good.

Did you know that you can do face detection in the browser, which is pretty crazy? Face detection is pretty computationally expensive. That’s been a downside to a lot of libraries in the past. But mobile manufacturers have been supporting it for quite a while using hardware-accelerated detectors.

Chrome has a shape detection API and it accesses these and then exposes them for us to use. It’s technically not out yet, and it’s available behind a flag in Chrome. If you paste this address into your browser, you can enable it and then you can play around.

Don’t worry too much about the code. It’s all in CodePen, which I’ve linked to, and you can check that out later.

In order to give the face detector a webcam feed that it can analyze, you have to get the webcam feed and then stream it to a video or HTML canvas element. Then, once you have your feed and you’ve created a face detector, you can call the detect method to look for faces. You can also detect faces in images or normal videos, but it’s not as much fun.

It’s really accurate. When I was trying it out, I thought it was broken because I kept moving away from my laptop and it was still detecting faces, but it was picking up a face that was on a poster and it was on the other side of my room. It was like this big.

It doesn’t work on dogs, though. I tried. [Laughter]

[Audience Laughter]

Cassie Evans: Even if they’re cleverly disguised as humans. [Laughter]

When you give it actual human faces, you get back an object for every face that it finds. Each face object has a bounding box showing the position of the face and then an array of landmark objects for your features. Like that, yeah.

I’m not going to pretend that face detection is all fun and games. The fact that we’re actually going to be getting face detection in the browser is kind of terrifying. A lot of the use cases are quite morally contentious. But, in a world that’s getting increasingly dystopian by the day, we can choose to use our power for good.

We can use technology to inspire, educate, or just to make people smile. This little blob that I made gets shy when you watch it dance.

[Audience Laughter]

Cassie Evans: [Laughter] I made a tutorial for a kids’ coding camp and I was aiming to spark an interest in tech in young girls, but it wasn’t just kids that liked it. [Laughter]

[Audience Laughter]

Cassie Evans: Seeing as it was interactive, people could play with it. I just started getting videos from people playing with this SVG. I loved that I managed -- there are a few people here who are very serious developers. I managed to get them to take time out of their day to play peekaboo with an SVG.

[Audience Laughter]

Cassie Evans: The young girl in the top, as well, her mom is a developer and she had just not been interested at all until she saw this. Then she was like, “Teach me! I want to know.”

Yeah, what I love the most about SVG animation is how it provides a link from the world of design to the world of development. I still find it really amazing that I can create something in Illustrator and then pop it into a webpage and use Web technologies to bring it to life.

Yes, front-end development may have come a really long way since the days of Neopets, and the amount of stuff out there to learn may be intimidating. But we also have more technology to experiment with. We don’t have to rely on marquis tags, blink tags, or GIFs for animation anymore. We have SVG, GreenSock, CSS motion path modules, and ways to create interaction right there in the browser.

A lot of us got into careers on the Web because we want to make stuff because we enjoy creating and tinkering. It can be really easy to lose sight of this in the race to catch up and learn the latest things. If you relate to this, make sure that you don’t lose sight of that motivation.

Keep the Web full of whimsy. Keep making fun stuff. If you do, I’d really love to see it. Thank you.

[Audience Cheering and Applause]