using 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);
};

inside of for loop --> sectionMovement(i*750,((v.sectionIndex + 1) > v.leavingSection) ? (SIV + 1) : SIV ) — Matija, Nov 18 '16 at 18:11
There's your answer. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame — Jared Smith, Nov 18 '16 at 18:12
Also, you don't need the assignments inside the ternary expression. — Jared Smith, Nov 18 '16 at 18:14
A more complicated question. Section is obvious, what does delay mean? Delaying the start of the animation or each piece? — Jared Smith, Nov 18 '16 at 18:16
yep,I used setTimeout inside of function,cause if I use it inside of for loop,it checks the "I" value after timeoute is over — Matija, Nov 18 '16 at 18:18
first --> section is changed on every loop iteration,I always need delay to make sure that next section starts translating after the previous is finished(transition is 750ms). second--> is there a way have a chat with somebody on stackoverflow,I'm not sure that you understood everything — Matija, Nov 18 '16 at 18:24
Possible duplicate of [How to use requestAnimationFrame?](http://stackoverflow.com/questions/5605588/how-to-use-requestanimationframe) — Jared Smith, Nov 18 '16 at 18:30

Jared Smith · Answer 1 · 2016-11-18T18:25:56.980

0

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.

edited Nov 18 '16 at 18:25

answered Nov 18 '16 at 18:24

Jared Smith

19,721
5
45
83

@Matija except you don't reference it anywhere else in the code you posted. That doesn't explain *what* it is. Its JavaScript. *Everything* is an object. – Jared Smith Nov 18 '16 at 18:26
sorry,I really appreciate your help,those "..." was random characters so I can submit a comment – Matija Nov 18 '16 at 18:28
@Matija actually just realized this is a dupe. Check out the link in the question comments. – Jared Smith Nov 18 '16 at 18:30

using requestAnimationFrame

1 Answers1