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

Interface Animations

A workshop with Mark Geyer
BlendConf 2014

All earnings from this workshop went to:

Girl Develop It

Girl Develop It, Charlotte

Salesforce R&D UX

I work at Salesforce in R&D UX.

The Systems team at Salesforce

Specifically on the Systems team.

I see cats everywhere now.

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

What are we doing today?


Tools and setup


Some knowledge of CSS and HTML

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




Anchor / Origin


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.


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

60-30 fps

UI elements

29.97 - 23.976 fps


15 - 8 fps

Cat GIF's


Let's do this!



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

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

What was delivered

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.


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

A quick tour

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

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


JS Exercise


Velocity stagger


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)


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?






The build system


npm, Bower, and Gulp

Let's walk through the interface-animations github repository:

AngularJS Setup

How does it all work?


data (JSON)









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



I'm excited for pixate!

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


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!


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

Girl Develop It, Charlotte



Catch me on twitter @markgeyer