Grants UI setup and future state through rAF

paint.js

var paint = function(rAF){ 'use strict';
  return function paint(before) {
    before();
    return rAF(before), {
      then: function (after) {
        return rAF(rAF.bind(null, after)), this;
      }
    };
  };
}(
  self.requestAnimationFrame ||
  self.webkitRequestAnimationFrame ||
  self.mozRequestAnimationFrame ||
  self.oRequestAnimationFrame ||
  self.msRequestAnimationFrame ||
  function(fn) { setTimeout(fn, 1000 / 60); }
);

example

var style = document.body.appendChild(document.createElement('div')).style;
style.cssText = 'width:10px;height:10px;background:#000;transition:all .3s';

paint(() => style.transform = 'translateX(100px)')
  .then(() => style.transform = 'translateX(50px)');