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:

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


Knowledge of HTML and CSS

Some JavaScript helps,
but it's not required ☺

A keen eye


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.


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.





Everything else


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:







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


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



Straight ahead action and pose to pose

Follow through and overlapping action

Slow in and slow out


Secondary action



Solid drawing


Squash and stretch

Adds a bit of realism to an otherwise static interface.


Squash and stretch


A subtle hesitation before the main movement.


dribbble's stripe checkout

Pose to pose

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


Follow through

Moving past the elements destination and coming back.


Horizontal menu intro, Foursquare v8.0.0


Movement that helps get your attention.


Slow in and slow out

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


Consistent and predictable motion of your product.


Secondary action

Surrounding elements that play off of the main movement.


Be quick about it. This takes some practice.




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.


Lays out the geometry of each element to the page.


Redraws visual effects and altered pixel geometry.

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



When everything is ready, the page is composited together.

This all happens very very fast...

CSS Transitions

Usage and performance


Only two properties are required for a CSS transition.



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;


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


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  


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, Form misc


Add transition properties to these form elements.

CSS Transforms

Usage and performance


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

With transforms, you can alter 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);


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


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, Card flip


Make these cards flip when clicking it's button.

CSS Animations

Usage, performance, and tips


Only two properties are required for a CSS animation.



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


@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;


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

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



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


CSS Exercise #3


Infinity Chocolate

Infinity Shapes


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


JS Exercise

Velocity stagger animation


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)


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?







How does it all work?


data (JSON)





The build system and examples


npm, Bower, and Gulp

Quick walkthrough of the interface-animations repo:


Demos and Distribution


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.


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



Great tool for native based prototyping.


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!


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 ☺



Mark Geyer - markgeyer.com

This presentation: