Complex Responsive SVG Animations

Sarah Drasner

 Manager, UX Design & Engineering at Trulia

@sarah_edo : twitter || @sdras : codepen

Keynote, Fluent Conf, March 2016

Why?

• Animation is powerful to convey meaning
• Can guide your users
• Because otherwise we're not using the web to it's full potential
• FUN!

SVG!

• Crisp on any display
• Less HTTP requests to handle
• Easily scalable for responsive
• Small filesize if you design for performance
• Easy to animate
• Easy to make accessible
• Fun! (there's a pattern here)

SVG!

• SVGOMG
• SVGO / SVGO-GUI
• Peter Collingridge's SVG Editor

Before we get started:

Optimize!

This pen.

Compare to using text with photos to illustrate an article.

8KB Gzipped.

That Whole Animation and SVG was

CSS Animation

[class^="star"] {
  animation: blink 2s ease-in-out infinite both;
}

[class^="dot"] {
  animation: blink 5s -3s ease-in-out infinite both;
}

@keyframes blink {
  50% { opacity: 0; }
}

Animation MEDIA QUERIES

+ Adjust initial object, affects animation

[class^="mountain"], [class^="grass"] {
  ...
  transform: skew(1.5deg);
}

@media screen and ( min-width: 500px ) {
  [class^="mountain"], [class^="grass"] { 
    transform: skew(2deg);
  }
}

!Important part

No width and height for the SVG itself, instead define it in CSS

.initial { 
  width: 50%;
  float: left;
  margin: 0 7% 0 0;
}

ViewBox Shift with JavaScript

var shape = document.getElementById("kells-shape");

// media query event handler
if (window.matchMedia) {
  var mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}
// media query change
function WidthChange(mq) {
  if (mq.matches) {
    shape.setAttribute("viewBox", "0 0 490 474");
  } 
  else {
    shape.setAttribute("viewBox", "0 490 500 500");
  }
};

Acts like a window to show and hide the requisite parts of the sprite

Fallbacks

Options:

• Fallback w/ modernizr
• Fallback to a png equivalent
• Fallback with the picture element (+ polyfill)
  Sara Soueidan's article
• Recommended: look at your analytics

Standalone SVG as an Illustration of Text

The poor-man version.

Very easy to implement. SVG stays a consistent size.

But Sarah, You Said COMPLEX

we want to do really complex stuff

OK COOL!

But we're going to use some JavaScript. GSAP, to be exact.

here's why...

(I don't work for them and they don't pay me.)

Cool Things

for Complex Animation

• Timeline
• Motion along a path (widest support)
• Draggable
• CSS Properties
• Draw SVG- make an SVG look like it draws itself.
• MorphSVG
• Relative Color Tweening
• CycleStagger
• Solves cross-browser inconsistencies

We can do stuff like this, All fully responsive in every direction

It doesn't neccessarily have to be fully fluid, either. Let's Implement some Responsive Design.

Like legos.

This pen.

function paintPanda() {
  var tl = new TimelineMax();

  tl.to(lh, 1, {
    scaleY: 1.2,
    rotation: -5,
    transformOrigin: "50% 0",
    ease: Circ.easeOut
  }, "paintIt+=1");
  ...

  return tl;
}

//create a timeline but initially pause it so that we can control it via click
var triggerPaint = new TimelineMax({
  paused: true
});
...

//this button kicks off the panda painting timeline
$("#button").on("click", function(e) {
  e.preventDefault();
  triggerPaint.restart();
});

...

Design + Information + Animation

Revisiting old approaches

Responsive animated Infographic

Rethinking Information Presentation article

Three Sources with Detailed Analysis Showing Lead Improvements

• Social Media Impact

• Brand Awareness

• Return On Investment

Conversion

(one source example, The Whole Brain Group)

• increased traffic to their website by over 400%
• lead increase by almost 4500%
• the number of new visitors to their site to almost 78%

• Not responsive- tipping point: Tim Kadlec
• Not updated to current context
• ^ Especially design

All posts older than 2 years.

What Happened?

This pen.

Change the viewbox in JavaScript like we did before:

Responsive:

Responsive:

Media queries for layout, and fallback with Modernizr:

/* media query example element, mobile first */
@media (max-width: 825px) {
  container {
    width: 100%;
  }
}
@media (min-width: 826px) {
  .container {
    width: 825px;
  }
}

/* fallback */
.inlinesvg .fallback {
  display: none;
}

.no-inlinesvg .fallback { 
  width: 500px;
  height: 500px;
  display: block;
}

Accessibility

Title and associative aria tags: (WIP)

<svg aria-labelledby="title" id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 765 587">
<title id="title" lang="en">Circle of icons that illustrate Global Warming Solutions</title>

You can also add a title for elements in the SVG DOM

This resource, with support charts.

Also, this article by Dudley Storey.

This pen.

Fallback to light or nothing on mobile

More Technical Information:

Frontend Masters Course

Advanced SVG Animation

O'Reilly Book

SVG Animation

Thank You!

Sarah Drasner

@sarah_edo on twitter

@sdras on codepen

These Slides:

slides.com/sdrasner/fluent-keynote