Wealthfront Blog Embed RAF move

RAFMove.js

var element = document.getElementsByClassName('selector')[0];
var current = element.style.top;
var start = 0;
var goal = 100;
var duration = 2000;
 
var prevTime;

var tick = function(timestamp) {
    if (!prevTime) {
      prevTime = timestamp - 16.67; // set prevTime to a reasonable timestamp for the previous frame
    }

    current += (goal - start) * (timestamp - prevTime) / duration;

    element.style.transform = 'translateY(' + current + 'px' + ')';
 
    prevTime = timestamp;
    if (current < goal) {
        requestAnimationFrame(tick);
    }
};
 
requestAnimationFrame(tick);