Hey there... I'm Mark. Let's do this!

The Art of

UI Animations

A workshop with Mark Geyer
Wednesday, November 12, 2014

Use keyboard arrows OR swipe to navigate ;)

In case you bail...

Here are the slides:

markgeyer.com/pres/the-art-of-ui-animations
Salesforce R&D UX

I work at Salesforce in R&D UX...

The Systems team at Salesforce

... specifically on the Systems team.

... because of that illustration, I saw cats for dayz!

What are we doing tonight?

Tools and setup

Foundation

Knowledge of HTML and CSS

Some JavaScript helps,
but it's not required ☺

A keen eye

Motion

As a skill

Everyone who touches UI,
needs to have motion skills.

From interaction to visual to front-end designers.

Creatures of habit

By nature, we problem solve and connect patterns.

We all want to understand.

Motion can help connect these patterns!

Three movement principles that I stick to:

  1. It becomes it

1. It becomes it

It's already on the screen, why reintroduce it?

Common UI elements

A lot of these elements have states... on/off, opened/closed, etc.

  • Buttons
  • Checkboxes
  • Radios
  • Text inputs
  • Pagination
  • Tables
  • Navigation
  • Lists
  • Progress bars
  • Alerts
  • Modals
  • Etc.

Views

We typically see these as static layouts, going from one to the next...

  • Homepage
  • List views
  • User views
  • Table views
  • Column views
  • Settings

... instead, try to reuse view elements to become other views ☺ This takes a bit of planning.


Google Material design > Meaningful transitions > Visual continuity

Three movement principles that I stick to:

  1. It becomes it
  2. Just friggin' show the thing

2. Just friggin' show the thing

If content is Batman, then everything else is Robin.

User

(Mark)

Content

(Batman)

Everything else

(Robin)

Animations should be quick and always help promote content.

Three movement principles that I stick to:

  1. It becomes it
  2. Just friggin' show the thing
  3. Create wonder

3. Create wonder

Where possible, make it magical.

What does motion mean to you?

What about for the things you create / build?

You'll have to figure this out

Today we're going to move
things in these ways:

Position

Scale

Rotate

Origin

Opacity

Principles

Breaking down movement

Frank Thomas & Ollie Johnston

Two of the first nine animators at Disney

Features they've worked on together:

  • '37 Snow White and the Seven Dwarfs
  • '40 Pinocchio
  • '40 Fantasia
  • '42 Bambi
  • '45 The Three Caballeros
  • '46 Make Mine Music
  • '46 Song of the South
  • '48 Melody Time
  • '49 The Adventures of Ichabod and Mr. Toad
  • '50 Cinderella
  • '51 Alice in Wonderland
  • '53 Peter Pan

Continued...

  • '55 Lady and the Tramp
  • '59 Sleeping Beauty
  • '61 101 Dalmatians
  • '63 The Sword in the Stone
  • '64 Mary Poppins
  • '67 The Jungle Book
  • '70 The Aristocats
  • '73 Robin Hood
  • '77 The Many Adventures of Winnie the Pooh
  • '77 The Rescuers
  • '81 The Fox and the Hound

Disney Animation: The Illusion of Life

Printed in 1981; 489 pages.

The 12 basic principles of animation

Squash and stretch

Anticipation

Staging

Straight ahead action and pose to pose

Follow through and overlapping action

Slow in and slow out

Arcs

Secondary action

Timing

Exaggeration

Solid drawing

Appeal

Squash and stretch

Adds a bit of realism to an otherwise static interface.

Example:

Squash and stretch

Anticipation

A subtle hesitation before the main movement.

Example:

dribbble's stripe checkout

Pose to pose

Block out states of what you're animating.
This is good planning.

Example:

Follow through

Moving past the elements destination and coming back.

Example:

Horizontal menu intro, Foursquare v8.0.0

Exaggeration

Movement that helps get your attention.

Example:

Slow in and slow out

A natural movement with more frames
at the start and end of a movement.

Arcs

Consistent and predictable motion of your product.

Example:

Secondary action

Surrounding elements that play off of the main movement.

Timing

Be quick about it. This takes some practice.

Links

dribbble

Workflow

How we feel after
posting work to dribbble...

I do this... and you should too!

Shoot work that you give developers

Example #1: Salesforce1, Publisher

Worked with one of our iOS devs:

Some publisher specs

AFX animation

The AFX animation

What was delivered

Same AFX file, different composition

Example #2: Salesforce1, Onboarding

Worked with another awesome iOS dev:

The flow aka a storyboard

The AFX animation

The AFX animation

  • Prototyped in AngularJS
  • Assets in PaintCode

What was delivered

Posted to dribbble

Chrome dev tools

It's your best friend

Theres a few things to keep in mind in
regards to web animation performance.

Recalculate styles

User agent, external, internal, and inline styles.

Layout

Lays out the geometry of each element to the page.

Paint

Redraws visual effects and altered pixel geometry.

Jank - A transition or animation that looks jittery or janky.
Yo son... that animation looks jank!

jankfree.org

Composite

When everything is ready, the page is composited together.

This all happens very very fast...

CSS Transitions

Usage and performance

Usage

Only two properties are required for a CSS transition.

transition-property

transition-duration

The other two properties are optional
(transition-delay and transition-timing-function).

You could breakout everything:

.my-button {
  transition-property: transform; /* opacity, etc. */
  transition-duration: 1s; /* 200ms */
  transition-timing-function: ease; /* ease-in, ease-out, ease-in-out,
    linear, and cubic-bezier */
  transition-delay: 2s; /* 200ms */
}

or do shorthand:

.my-button {
  transition: transform 1s 2s;
}

timing-functions

Since transitions and animations must have a beginning and end,
cubic-bezier will give you the best unique motion.

.my-button {
  transition: transform 1s 2s cubic-bezier(0,.5,.5,1);
}

will-change

Give the browser a heads up by listing CSS
properties that will more than likely change.

.my-button {
  will-change: transform, opacity;
}

No more translateZ(0) or translate3d(0,0,0) hacks  

Performance

You'll want to stick to transitioning
transform and opacity as much as possible.

Altering anything else can be costly at a larger scale.

Transitioning layout properties creates
browser paint and composite issues.

csstriggers.com
caniuse.com/#feat=css-transitions

CSS Exercise #1

Transitions

Transitions, Form misc

cdpn.io/yklLx

Add transition properties to these form elements.

CSS Transforms

Usage and performance

Usage

Transforms can seem complicated at first, so start
with altering translate, rotate, and scale.

With transforms, you can alter anything!

ANYTHING!

Whoa...
.my-box {
  width: 288px;
  height: 250px;
  color: #3d3d3d;
  background-color: white;
  border-radius: 5px;
  transform: translate(0,-30px) rotate(30deg) scale(.8);
}

But there's more... way more!

							.other-transforms {
  transform: none;

  transform: translate(12px, 50%);
  transform: translateX(2em);
  transform: translateY(3in);
  transform: translateZ(2px);
  transform: translate3d(12px, 50%, 3em);

  transform: scale(2, 0.5);
  transform: scaleX(2);
  transform: scaleY(0.5);
  transform: scaleZ(0.3);
  transform: scale3d(2.5, 1.2, 0.3);

  transform: rotate(0.5turn);
  transform: rotateX(10deg);
  transform: rotateY(10deg);
  transform: rotateZ(10deg);
  transform: rotate3d(1, 2.0, 3.0, 10deg);

  transform: skewX(30deg);
  transform: skewY(1.07rad);

  transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
  transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0,
             11.0, 12.0, 13.0, 14.0, 15.0, 16.0);

  transform: perspective(300px);
}

transform-origin

.my-box {
  transform-origin: 50% 50%; /* center */
}

It's just like animating the anchor point
layer property in After Effects.

Couple of things to setup for 3D:

.my-3d-box {
  transform-style: preserve-3d; /* 'flat' is the other option */
}

Then add perspective to either a parent element (multiple things in 3D):

.container {
  perspective: 1000px; /* anything between 300-1000px looks pretty good */
}

or on the element's transform (only thing in 3D):

.my-3d-box {
  transform: perspective(1000px);
}
Whoa... 3d.
.my-3d-box {
  width: 288px;
  height: 250px;
  color: #3d3d3d;
  background-color: white;
  border-radius: 8px;
  transform: perspective(1000px) translate(0,0) rotateY(30deg) rotateX(-30deg);
  transform-style: preserve-3d;
}

Also when doing 3D stuff, depending on the effect,
backface-visibility should be used.

.my-3d-object {
  backface-visibility: visible; /* hidden */
}

Performance

Anything within transforms are fair game
i.e. translate, rotate, scale, etc.

It's just a matter of browser support for the transform property.

caniuse.com/#feat=transforms2d
caniuse.com/#feat=transforms3d

CSS Exercise #2

Transforms

Transforms, Card flip

cdpn.io/cCBbq

Make these cards flip when clicking it's button.

CSS Animations

Usage, performance, and tips

Usage

Only two properties are required for a CSS animation.

animation-name

animation-duration

All other properties are optional.

@keyframes is the timeline for an animation:

@keyframes my-ani {
  0% { /* Your CSS properties */ }
  50% { /* that change */ }
  100% { /* over time */ }
}

or

@keyframes my-ani {
  from { /* Your CSS properties */ }
  50% { /* that change */ }
  to { /* over time */ }
}

You could breakout everything:

.my-animation {
  animation-name: my-ani;
  animation-duration: 2s; /* 200ms */
  animation-delay: 1s; /* 100ms */
  animation-iteration-count: 2;
  animation-timing-function: ease; /* ease-in, ease-out, ease-in-out,
    linear, and cubic-bezier */
  animation-direction: normal; /* reverse, alternate, alternate-reverse */
  animation-fill-mode: none; /* forwards, backwards, both */
  animation-play-state: running; /* paused */
}

or do shorthand:

.my-animation {
  animation: my-ani 2s 1s 2 ease-in forwards;
}

Performance

Same things... you'll want to stick to
animating transforms and opacity.

Animating layout properties will
create layout, paint, and composite issues.

csstriggers.com
http://caniuse.com/#feat=css-animation

Tips

  • Add negative delays (-.5s) to start further in the animation.
  • Change z-index between keyframes to simulate layer switching.

Links

CSS Exercise #3

Animations

Infinity Chocolate

Infinity Shapes

cdpn.io/ypihk

Setup @keyframes sets to move three shapes in random
order and have the square shape be the only shape left over.

Infinity Shapes

My pass (link)

JS Animations

Dynamic controlled movement

Some popular JS libraries:

The thing about jQuery...

Try not to use it for animation.

  • The $.animate() method causes paint issues.
  • It can't avoid layout thrashing which creates jank.
  • It's memory consumption freeze animations sometimes.
  • It doesn't use requestAnimationFrame (rAF) :(

These are pretty good reasons.

For today, let use velocity.js because...

  • it's familiar (if you've used jQuery before) and it has great performance.
  • it's well documented and meant for motion designers :)
  • it was built with the intention to replace jQuery's $.animate() method.

How does velocity.js work?

$('.my-dialog').velocity({ css properties }, { options });

Options: duration, easing, queue, begin, progress,
complete, loop, delay, display, and mobileHA

Docs: http://julian.com/research/velocity

UI Pack

julian.com/research/velocity/#uiPack

JS Exercise

Velocity stagger animation

cdpn.io/olLHg

Add different UI pack transitions to stagger the paragraphs and images in.

UI pack usage: Faster UI animations with velocity.js

So... what should I use?

A CSS transition a CSS animation or a JS animation?

Use CSS transitions...

  • for smaller mirco interactions.
  • to toggle html element states.
  • for pseudo elements (:hover, :active, :checked, etc).

Use CSS animations...

  • for single state animation.
  • for an intricate animation sequence.
  • if it's more comfortable for you.

Use JS animations...

  • for multiple state animations.
  • for access to requestAnimationFrame (rAF).
  • for wider support (IE 8-9 and/or Android Browser 2.3)

AngularJS

Implementing and distributing

What will we be doing?

  • Why AngularJS?
  • My first impressions of AngularJS
  • Quick walkthroughs of npm, Bower, and Gulp
  • AngularJS setup
  • Exercises
  • Prototype

Why AngularJS?

  • Use it to build prototypes quickly
  • It's designer friendly
  • It's open source

My first impressions of AngularJS...

:(   Great... another tool to learn.

:|   Oh, that's cool.

:|   Whoa wait, what... that's cool too!

Okay, let's build stuff!

What's the setup?



npm


Bower




Gulp




AngularJS




Chrome

MVC

How does it all work?

Model

data (JSON)

View

HTML5

Controller

JS

The build system and examples

              

npm, Bower, and Gulp

Quick walkthrough of the interface-animations repo:

github.com/markgeyer/interface-animations

Demos and Distribution

Links

Other tools

For interaction and animation


After Effects

Been using AFX for 16+ years...

It's awesome for creating polished motion ideas.

Allows you to not be bound to any technical limitations.


invisionapp.com

Designers at Salesforce use invision.

Check out this interview on with our very own Adrian Rapp.

He's amazing btw!


flinto.com

Designers at Salesforce use Flinto.

It's quick and easy.


Quartz Composer

Quartz Composer

Tried it... was kind of hard to pick up :-/

Learn Quartz Composer & Origami through Video

Might want to look at Form instead: relativewave.com/form.html


pixate.com

Pixate

Great tool for native based prototyping.

Books

Movement references

The Illusion of Life: Disney Animation

by Ollie Johnston and Frank Thomas

Check this book out for:

  • Full descriptions and character driven examples of the 12 animation principles.
  • The History of Disney Animation and the thinking behind some of Disney's flagship characters.

Animation in HTML, CSS, and JavaScript

by Kirupa Chinnathambi

Check this book out for:

  • Great starter book for designers getting into animation with interest in CSS and JS.
  • If you want to laugh. Kirupa is hilarious!

Programming 3D Applications with HTML5 and WebGL

by Tony Parisi

Check this book out for:

  • Great designer and prototyper resource for various deep dives into doing 3D on the web.
  • Great examples for you to dissect and experiment with.

Motion Design for iOS

by Mike Rundle

Check this e-book out for:

  • Mike is so on point with his descriptions of movement.
  • His examples are super clear and totally work. Get this e-book now!

Tips

General guidance

Own the voice of animation for
the products you design.

Become friends with
developers that you work with.

There will always be a new skill to learn.
Never stop learning.

Give back.

And do it for free.

Sometimes ☺

Thanks!

Questions?

Mark Geyer - markgeyer.com

This presentation:
markgeyer.com/pres/the-art-of-ui-animations