Performant Web Animations

The Search for 60fps

Eli White

@eli_white

http://eli-white.com

How to *not* do animations

jQuery.animate

$('.selector').animate({top: '100px'}, 2000);

vSync

from http://www.html5rocks.com/en/tutorials/speed/rendering/

More Reading: http://www.html5rocks.com/en/tutorials/speed/rendering/

Animating Layout Props

More reading: http://csstriggers.com/​

How we *should* do animations

Simple Animations

transforms: position, scale, rotation

opacity

only requires compositing, done on the GPU

Simple Animations

transforms: position, scale, rotation

opacity

only requires compositing, done on the GPU

from http://css-tricks.com/css-pie-timer/

Complex Animations

Use JS to specify transforms,

and use RAF!

More reading:  https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript

function mousedown(e) {
  lastEvent = e;
  requestAnimationFrame(tick);
}

function mousemove(e) {
  currentX += changeX;
  currentY += changeY;
   
  lastEvent = e;
}

function mouseup(e) { lastEvent = null; }

function tick() {
  box.style.transform = 'translate('+currentX+'px,
                        '+currentY+'px)';
  
  if (lastEvent) {
    requestAnimationFrame(tick);
  }
}

Complex Animations

Use JS to specify transforms,

and use RAF!

More reading:  https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript

var position = 0;
var velocity = 0;
var acceleration = 1;

var ball = document.getElementById('ball');

function tick() {
  velocity += acceleration;
  position += velocity;
  
  position = Math.min(position, 180);
  
  if (position >= 180) {
    velocity *= -1;
  }
  
  ball.style.top = position + 'px';

  setTimeout(tick, 16);
}

tick();

Bad!

Complex Animations

Use JS to specify transforms,

and use RAF!

More reading:  https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript

var position = 0;
var velocity = 0;
var acceleration = 1;

var ball = document.getElementById('ball');

function tick() {
  velocity += acceleration;
  position += velocity;
  
  position = Math.min(position, 180);
  
  if (position >= 180) {
    velocity *= -1;
  }
  
  ball.style.transform = 'translateY('+position+'px)';

  requestAnimationFrame(tick);
}

tick();

Good!

Conclusions

• Know how the browser executes your animations
• Prefer to animate things that only require compositing
• Avoid animating things that modify layout
• Don't use setTimeout / setInterval for animations

More Reading

• Layout Thrashing

• YouMightNotNeedjQuery

• JankFree.org

• Page Layers

• CSS Paint Times

Questions?

• @jmeistrich and @WattersGrant
• The websites these examples were pulled from

Thanks