Functional Animation

 

Sarah Drasner

Manager, UX Design and Engineering 

at Trulia (Zillow Group)

 

@sarah_edo : twitter || @sdras : codepen

Generate Conf, New York 2016

let's start from the beginning.

what happens when you visit a website?

Creating Spatial Awareness

Saccade

why is this important?

We already use this information

  • Websites start to all look the same
  • Buttons on a website as CTAs are the most powerful thing
  • Growth-hacking
  • User-testing

Animation gets a bad rap.

Right tool for the right job

Use appropriately

how?

context-shifting

Helps with spatial awareness

  • Morphing
  • Revealing
  • Isolation
  • Style
  • Anticipatory cues
  • Interaction
  • Space Conservation
  • Responsive

Subtlety and consistency.

Morphing

From this CSS-Tricks Article

Isolation

Revealing

  • xxx Modals die 4eva xxx
  • breaks context
  • "brute force" UX

modals suck!

it's not them, it's their typical UX pattern!

Revealing

Revealing

Revealing

style and branding:

Not one size fits all

Adhering to your branding means motion solves the problem for your users.

  • What happens repeatedly
  • Easing structures
  • User flow
  • Toggle on/off?

If animation just feels like the sugar on top, that's because you treated it that way.

Tough love

Do you hate animation?

style and Branding (Greensock)

this pen.

This pen.

style and Branding (react-motion)

STYLE AND BRANDING

this pen.

STYLE AND BRANDING

Motion Design Language

  • Consider your tooling- loss leader
  • Reuse resources like easing functions, animation keyframes in mixins, extends, variables, you name it!
  • If mobile is decoupled- easier to keep it consistent across both
  • Good animation branding guidelines means less communication down the line and reinventing the wheel.

STYLE AND BRANDING

anticipatory cues

anticipatory cues

Custom Loaders:

Viget did an experiment and found that despite some individual variation, novel loaders as a whole had a higher wait time and lower abandon rate than generic ones

22 sec

14 sec

Interaction

seat preview from codrops

drag n drop for spatial awareness

space conservation

responsive

This pen.

SVG!

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

Before we get started:

Animation Performance!

correct tools for the job

my recommendations:

CSS/SCSS

  • Small sequences and simple interactions
  • Once you get more than 3... switch to:

GSAP (GreenSock)

  • Great for sequencing and complex movement
  • Cross-browser consistency

React-Motion

  • Great for single movements that you'd like to look realistic
  • Snap.svg is more like jQuery for SVG
  • Web Animations API looks great, still waiting on support
  • Velocity is similar to GSAP with less bells and whistles
  • Mo.js looks great and is still in beta

Standalone as Illustration

Standalone SVG as an Illustration of Text

The poor-man version.

Very easy to implement. SVG stays a consistent size.

greensock (gsap)

Solves Cross-Browser Inconsistencies

Bad transform origin bug on rotation, soon to be solved in Firefox.

More in this CSS-Tricks article.

Chrome

IE

Firefox

Safari (zoomed)

Timeline

  • stack tweens
  • set them a little before and after one another
  • change their placement in time
  • group them into scenes
  • add relative labels
  • animate the scenes!
  • make the whole thing faster, move the placement of the whole scene, nesting

All without recalculation

The issue with longer CSS animations:

This pen.

GreenSock Teaching Monster

syntax

Percentage-Based Transforms on SVG!

get excited.

This pen courtesy of GreenSock.

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.

Designing Interaction in Responsive Animations

Like legos.

This pen.

//variable declaration for the global repeated animations
var gear = $("#gear1, #gear2, #gear3");
...

//animation that's repeated for all of the sections
function revolve() {
  var tl = new TimelineMax();

  tl.add("begin");
  tl.to(gear, 4, {
      transformOrigin: "50% 50%",
      rotation: 360,
      ease: Linear.easeNone
    }, "begin");
    ...

  return tl;
}

var repeat = new TimelineMax({repeat:-1});
repeat.add(revolve());
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
});
triggerPaint.add(paintPanda());

//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

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%

Problems

  • 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:

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.

context-shifting

  • Morphing
  • Revealing
  • Isolation
  • Style
  • Anticipatory cues
  • Interaction
  • Space Conservation
  • Responsive

Subtlety and consistency.

Social Coding Sites Help You Learn

Fun. Remember fun?

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

  • Codepen
  • JS Fiddle
  • Dabblet

People You Should Know About

  • Val Head
  • Sara Soueidan
  • Rachel Nabors
  • Tiffany Rayside
  • Chris Gannon
  • CJ Gammon
  • LegoMushroom
  • Ana Tudor
  • David Walsh Blog
  • Gregor Adams
  • Diaco ML
  • Amelia Bellamy-Royds
  • Taylor Hunt
  • Dudley Storey
  • GreenSock
  • I Hate Tomatoes (Petr Tichy)
  • Lucas Bebber
  • Rachel Smith
  • Joni Trythall
  • Jake Albaugh
  • Blake Bowen
  • Matt DesLauriers

More!

Designing Interface Animations- Val Head

Web Animation Weekly

More Technical Information:

Frontend Masters Course

Advanced SVG Animation

O'Reilly Book

SVG Animation

Thank You!

@sarah_edo on twitter

@sdras on codepen

These Slides:

slides.com/sdrasner/generateny