In case you bail...

Here are the slides:

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

... specifically on the Systems team.

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

What are we doing tonight?

Tools and setup

• Any browser ;)
• Install node.js (nodejs.org) via their site or through Homebrew
• Install Git (git-scm.com)
• Clone: github.com/markgeyer/interface-animations
  and follow the install instructions.
• Code editor

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?

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:

Principles

Breaking down movement

Frank Thomas & Ollie Johnston

Two of the first nine animators at Disney

Features they've worked on together:

Continued...

Disney Animation: The Illusion of Life

Printed in 1981; 489 pages.

The 12 basic principles of animation

Squash and stretch

Adds a bit of realism to an otherwise static interface.

Example:

Anticipation

A subtle hesitation before the main movement.

Example:

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:

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

• 12 Principles of Animation
• A New Mobile UX Design Material
• Provide meaning with motion
• The Illusion of Life [video]
• The Illusion of Motion

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

Same AFX file, different composition

Example #2: Salesforce1, Onboarding

Worked with another awesome iOS dev:

The flow aka a storyboard ☺

The AFX animation

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!

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);
}

• Cubic Bezier
• Ceaser CSS Easing Animation Tool
• Easings

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   ☺

• Everything You Need to Know About
  the CSS will-change Property

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.

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!

.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);
}

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

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.

Tips

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

Links

• Effeckt.css
• Animate.css
• Bounce JS
• Animation Principles in UI Design: Understanding Easing
• Intro to CSS 3D transforms

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:

• GreenSock Animation Platform (GSAP)
• velocity.js
• famo.us
• Transit
• and yes, jQuery

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?

The build system and examples

npm, Bower, and Gulp

Quick walkthrough of the interface-animations repo:

Demos and Distribution

Links

• Code School: Free AngularJS course
• Remastered Animation in AngularJS 1.2

Other tools

For interaction and animation

Been using AFX for 16+ years...

It's awesome for creating polished motion ideas.

Allows you to not be bound to any technical limitations.

Designers at Salesforce use invision.

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

He's amazing btw!

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

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