Overcoming the Great Animation Divide

Animation is important

Does it help the user see more clearly?

Good animation conveys meaning

frees users from thinking about states

Bad animation distracts

Good animation improves useability

See the Pen <a href='http://codepen.io/tjacobdesign/pen/dPJoWW/'>Animate on Create</a> by Timothy Miller (<a href='http://codepen.io/tjacobdesign'>@tjacobdesign</a>) on <a href='http://codepen.io'>CodePen</a>.

Bad animation slows users down

Good animation creates memories

See the Pen Modal window destroy concept by LegoMushroom (@sol0mka) on CodePen.

Bad animation creates frustration

Animation is hard

WAAPI is coming!

The greatest API OF ALL TIME!

...a great API

var moveTopAnimation = new Animation(el,
[
  { transform: 'translateY(100px)' },
  { transform: 'translateY(0)' }
],
{
  duration: 300,
  easing: 'cubic-bezier(0,0,0.32,1)',
  fill: 'forwards'
});

Don’t be a lazy ginger!

Better times are coming, but until then we have plenty of animating power in CSS and JS

FLIP your animations

First, last, inverse, play.

The world’s smallest example™

.thing {
  width: 500px;
  translate: transform 100ms ease-out;
}
.thing:hover {
  transform: scale(1.2);
}

This is BAD

The world’s smallest good example

.thing {
  width: 600px;
  transform: scale(0.83);
  translate: transform 100ms ease-out;
}
.thing:hover {
  transform: scale(1);
}

This is super simplified!

In this example it wouldn't really make a difference

var first = el.getBoundingClientRect();
el.classList.add('totes-at-the-end');
var last = el.getBoundingClientRect();

var invert = first.top - last.top;
el.style.transform = 'translateY(' + invert + 'px)';

requestAnimationFrame(function() {
  el.classList.add('animate-on-transforms');
  // GO GO GOOOOOO!
  el.style.transform = '';
});

el.addEventListener('transitionend', tidyUpAnimations);

In summary:

Animation is important

Don't be a lazy ginger

Use FLIP principles

Sit on your pile of gold

Thanks!

Timothy Miller

@tjacobdesign

ForADesigner.com/presentations

Overcoming the Great Animation Divide – Animation is important – Animation is hard

tjacobdesign

Overcoming the Great Animation Divide – Animation is important – Animation is hard

0 0