#NEJSConf: Animation basics with Snap.svg

This is my talk on SVG animation from #NEJSConf in Omaha. You can walk through the presentation slides here. (They're also on GitHub.)

Why SVG

Today we’re going to talk about SVG. More specifically, we're going to talk about how to animate SVG graphics with a really awesome little library called Snap.

I’m not sure how many of you work with SVG regularly, but just in case you’re unfamiliar, here’s a quick refresher on why SVG is a totally viable thing to use in your web apps.

SVG stands for Scalable Vector Graphic, and it is exactly that. It’s a 2-d, vector-based image format, and it opens up a lot of possibilities for interesting interaction design.

Resolution Independent

The first useful thing about SVG is that it’s resolution independent. It looks good at any size and will never appear fuzzy.
Full screen

Lightweight

Because the images are defined as text elements and attributes, SVG images can be significantly smaller to download than you standard JPGs, PNGs or GIFs, and that opens a lot of doors for creating visually complex yet performant experiences for your users.
Full screen

Also, if you need the same image in different sizes (like a logo or icons), you’re in luck! With SVG you can use the same file for all purposes, which cuts down on bandwidth. Along the same lines, you can repurpose the same image file with different colors and treatments, which negates the need for raster sprites with all the possible hover states and retina sizes, etc. You don’t need to do that anymore and it’s wonderful.

Styleable

Like I just mentioned, SVGs are styleable. You can access and modify different properties for paths, shapes, gradients, opacity, filters, text, clipping masks – all those good things.
Full screen

Interactive

You can attach event handlers to SVG elements with JavaScript, similar to the way you’re used to with HTML. Plus, SVG is based on a coordinate system so it’s easy to animate.

Full screen

However, be aware that jQuery selectors and SVGs don't mix. How this plays out in practice is that if you’re trying to use jQuery to work with an SVG, you'll end up writing a lot more vanilla JavaScript than you probably bargained for. So don’t use jQuery with SVG. Just use Snap.

Accessibility

SVG is rendered to the page as markup, so all the text within the graphic is available to search engines and – as long as you configure it appropriately – it’s also available to assistive technologies like screen readers. Plus with the SVG 2.0 spec that’s coming out, we’ll have more universal support for tabindexes on SVG elements. I’m super excited about this because it opens all sorts of doors for exposing data via keyboard navigation.
Full screen

Why animate?

So now that we know why we’re using SVG, the next question is: Why make the effort to animate things?

This is a question I’ve struggled with, having very conflicted opinions about when the extra code and computation for animations does or does not outweigh performance concerns. There’s a give-and-take with that decision-making process, but for now, I’d like to put performance hits on the backburner and just focus on the opportunities that animation offers to enhance the user experience. We'll go over the goals of animating on-screen elements, and then review a few best practices for animated interfaces.

It's about time

When you think about animations in interaction design, the key thing to keep in mind is that animations are time-based – and good animations smooth the transition of an element’s state in order to add meaning and value to the user's experience.

Things like physics, speed, and synchronization all come into play when designing animations. The more you can mimic true-to-life experiences, the more seamless and invisible the animation will be to your user – which is exactly what you want. The goal of animating an element is to make the screen function more like the real world. In real life, things don’t abruptly change state. An ice cube doesn’t go from solid to liquid in a split second. Rather, it melts, transitioning from one state to the next.

Without the transition an ice cube and a puddle of water seem like two completely different things – it’s the transition that ties them together. And the same goes for animated graphics and UI elements. When things change abruptly, your user gets lost. But by animating the change – for example, animating the scroll to an anchor link instead of directly jumping to it – then your user always knows how they came to be where they are, and context is preserved.

Here’s a basic example:
Full screen

Facebook’s Jake Blakely recently wrote an awesome post on the “why” of animation design, some of which we’ve gone over already, but I’ll summarize again here:

  1. Animations create more fluid transitions, which feels more natural to the user.
  2. Animations can provide visual feedback or context to an interaction. An example would be a progress bar or loading icon – something to let the user know that an action is happening.
  3. Animations can guide the user’s attentions. Our eyes are naturally drawn to motion, and animations can help the user know what to do next. An example is a submit button that changes color once the form is complete, which catches the user’s attention and lets them know which action to take next.
  4. Animations can elicit an emotional response. This is the really interesting thing about effective animations – because animations that are well executed – animations that seem fluid and natural and mimic the real world in some way – have real-world effects on humans. Humans can be delighted or disappointed or frustrated, all thanks to your UI.

Why Snap.svg?

Now that we know why we should use SVG and why we should animate things, the next question is: Why Snap? Why should we use Snap.svg to animate our vector graphics?

The quick answer is: because it’s super easy.

But of course there’s a longer answer. Here’s some background on Snap:

Snap replaces Raphael

Snap is essentially the replacement for Raphael.js, the original go-to library for SVG animation. Raphael was really cool because it could support browsers as far back as IE6 with it’s VML fallback for environments that didn’t support SVG. Thankfully, most of us don’t need to support old IE anymore, so we can stop weighing down our apps with huge libraries that try to cater to every old IE quirk. Snap.svg supports IE9+, and it was written by the same guy, Dmitri Baranovskiy, who created Raphael back in the day. So it’s a very comprehensive solution.

Snap is powerful

The functionality goes far beyond what Raphael was able to do. Snap allows you to not only generate new SVGs, but it will actually work with existing SVGs that you created in Illustrator or Inkscape or some other way. It provides a robust API for manipulating SVG content, and the animations it supports are spectacular – smooth, performant, and they even work surprisingly well on mobile devices. The official Snap.svg website describes the animation API as “simple and intuitive” – but it actually is. A click is a click, a hover’s a hover, and .animate() gets you into all sorts of fun.

Snap is free and open source

It’s also fairly lightweight. What's not to love?

How can you get started?

Here are some slides:

Full screen

Full screen

Full screen

Full screen

Full screen

Resources