All earnings from this workshop went to:

Girl Develop It, Charlotte

I work at Salesforce in R&D UX.

Specifically on the Systems team.

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

What are we doing today?

Tools and setup

• Photoshop and After Effects (CS6 or CC)
• Chrome
• Install node.js (nodejs.org)
• Install Git (git-scm.com)
• GitHub client (optional) Mac / Win
• Clone: github.com/markgeyer/interface-animations
  and follow the install instructions.
• Sublime Text (or your code editor)

Foundation

Some knowledge of CSS and HTML

Some JavaScript helps,
but it's not required ☺

A keen eye

Courage

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 want to understand.

Motion can help connect patterns!

Three simplistic movement
principles that I try to stick to:

It becomes it.

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

Just show the thing.

Content is Batman, motion is Robin. Don't make it the star.

Create wonder.

Where possible, make it magical.

What does motion mean to you?

What about for the things you build?

You'll have to figure this out ☺

Today we're going to move interface
elements in these ways:

Position / Translate

Scale

Rotation

Opacity

Anchor / Origin

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.

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

After Effects

Bringing everything to life

What will we be doing?

• Tour the interface
• Compositions and nesting
• Importing assets
• Timeline, shapes, solids, layers, and masks
• Position, rotation, scale, keyframes, and easing
• Exporting

Frames per sec (FPS)

8 fps

12 fps

15 fps

24 fps

30 fps

60 fps

The spectrum of FPS

Links

• After Effects CC tutorials from novice to expert
• Lynda.com AFX CC Essential Training
• The Illusion of Motion

Let's do this!

dribbble

Workflow

How we typically 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

What will we be doing?

• Using what we just made, let's make a GIF
• Look at some doctored photos
• Effects
• Exporting from AFX
• Photoshop timeline
• Optimizing and exporting

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

A quick tour

... because you might already know about this stuff.

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

codepen.io/markgeyer/pen/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

codepen.io/markgeyer/pen/cCBbq

Make this card 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

codepen.io/markgeyer/pen/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 tho...

Don't use it for animation!

• The $.animate() method causes severe paint issues.
• It can't avoid layout thrashing which creates jank.
• It's memory consumption freeze animations sometimes.
• It uses setInterval instead of requestAnimationFrame (rAF).

These are pretty good reasons.

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

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

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

http://julian.com/research/velocity/#uiPack

JS Exercise

Animation

Velocity stagger

codepen.io/markgeyer/pen/olLHg

Add different UI pack transitions to reveal the paragraphs and images.

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, 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 animation.
• 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?
• First impressions of AngularJS
• Walkthroughs of npm, Bower, and Gulp
• AngularJS setup
• Exercises
• Prototype

Why AngularJS?

First impressions of AngularJS...

:(   Great... another tool / framework to learn.

:|   Oh, that's cool.

:|   Whoa wait... that was cool too!

☺   Okay, let's build stuff!

How is it all setup?

npm


Bower

Gulp

AngularJS

Chrome

The build system

npm, Bower, and Gulp

Let's walk through the interface-animations github repository:
https://github.com/markgeyer/interface-animations

AngularJS Setup

How does it all work?

Exercises

Prototype

Distribution

Links

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

Other tools

For interaction and animation

Designers at Salesforce use invision.

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

He's amazing!

Designers at Salesforce use Flinto.

It's quick and easy.

Quartz Composer

Quartz Composer

I tried it... and 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

I'm excited for pixate!

There's definitely a rise in the
native based prototyping world.

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 getting this e-book!

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 ☺

All earnings from this workshop went to:

Girl Develop It, Charlotte

Thanks!

Questions?

Catch me on twitter @markgeyer

markgeyer.com/pres/interface-animations