使用requestAnimationFrame

Question

I'm using this function to set a transform property of some elements,but the animation is not so smooth in firefox and it's less smooth when window size is bigger(in any browser).I have read a lot of thing's on blogs which are saying that I can make much smoother animation using requestAnimationFrame,but I don't understand how I can implement it inside of my function.Can somebody explain me how I can use it inside of my function?

function sectionMovement(delay,section) {
  setTimeout(function () {
    var val = ((v.sectionIndex + 1) > v.leavingSection) ?
      val = 100 : 
      val = 0;
    document.getElementById("sec_"+section+"").style.transform = "translateY(-"+val+"%)"
  }, delay);
};

Answer 1

Something like this:

function updateSection(selector) {
  var elem = document.getElementById("sec_" + section);
  return function step() {
    var val = ((v.sectionIndex + 1) > v.leavingSection) ? // not sure what 'v' is?
      100 : 
      0;

    elem.style.transform = "translateY(-"+val+"%)";
    requestAnimationFrame(step);
  }
}

var sel = "myElementId";
requestAnimationFrame(updateSection(sel));

You will also likely want an external variable to check against to know when to stop the animation.