Javascript Animation

JSAnimations.md

Javascript Animations

Google Developers CSS vs JavaScript animations:

• Use CSS when you have smaller, self-contained states for UI elements. CSS transitions and animations are ideal for bringing a navigation menu in from the side, or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS.
• Use JavaScript when you need significant control over your animations. The Web Animations API is the standards-based approach, available today in Chrome and Opera. This provides real objects, ideal for complex object-oriented applications. JavaScript is also useful when you need to stop, pause, slow-down or reverse.
• Use requestAnimationFrame directly when you want to orchestrate an entire scene by hand. This is an advanced JavaScript approach, but can be useful if you’re building a game or drawing to a HTML canvas.

setInterval, clearInterval

Example:

function animate(opts) {
  var start = new Date  
  var id = setInterval(function() {
    var timePassed = new Date - start
    var progress = timePassed / opts.duration

    if (progress > 1) progress = 1

    var delta = opts.delta(progress)
    opts.step(delta)
    if (progress == 1) {
      clearInterval(id)
    }
  }, opts.delay || 10)
}

function move(element, delta, duration) {
  var to = 500
  
  animate({
    delay: 10,
    duration: duration || 1000, // 1 sec by default
    delta: delta,
    step: function(delta) {
      element.style.left = to*delta + "px"    
    }
  })
  
}

requestAnimationFrame

MDN defenition:

The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

Using requestAnimationFrame:

requestAnimationFrame returns an ID you can use to cancel it, just like setTimeout or setInterval does. jQuery used here only to demonstrate a simple animation and bind events.

var globalID;

function repeatOften() {
 $("<div />").appendTo("body");
 globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
 globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
 cancelAnimationFrame(globalID);
});

Why better?

• The browser can optimize it, so animations will be smoother
• Animations in inactive tabs will stop, allowing the CPU to chill
• More battery-friendly