title: How to boost requestAnimationFrame performance?
body: <p>It is my first time trying to create smooth animations using rAF and I would like some insight from more experinced developers. Basicaly I have 16 elements with x,y coordinates and on mousemove over their parent container, all elements move a set amount in the opposite direction. When I do tests on lower-end machines there is some stutter. Is there any technique I am not aware of that can boost my animation performance?</p>
  
  <pre><code>(function ($) {
  $(document).ready(() =&gt; {
  const animCont = document.querySelector('.shop-header-container');
  const animContWidth = animCont.offsetWidth;
  const animContHeight = animCont.offsetHeight;
  const leftOffset = animCont.getBoundingClientRect().left;
  const topOffset = document.querySelector('#primary').offsetTop;
  const animImgs = animCont.querySelectorAll('.elem');
  let mouseX = 0;
  let mouseY = 0;
  let mouseOver = false;
  let positions = [
    {
      id: 82,
      start: {
        x: 0.596,
        y: 0.654,
      },
      range: 0.4,
    }
  ...
  ]
  positions.forEach(el =&gt; {
    el.target = {};
    el.current = {};
  })
  function updateElements(){
    mouseTargetX = (mouseX - leftOffset) / animContWidth;
    mouseTargetY = (mouseY + topOffset) / animContHeight;
    positions.forEach((el,i) =&gt; {
      if (mouseOver) {
        el.target.x = ((mouseTargetX - el.start.x) * -el.range + el.start.x ) * animContWidth;
        el.target.y = ((mouseTargetY - el.start.y) * -el.range + el.start.y ) * animContHeight;
      } else {
        el.target.x = el.start.x * animContWidth;
        el.target.y = el.start.y * animContHeight;
      }
  
      if(!el.current.x) {
        el.current.x = el.target.x;
        el.current.y = el.target.y;
      } else {
        el.current.x = el.current.x + (el.target.x - el.current.x)*0.1;
        el.current.y = el.current.y + (el.target.y - el.current.y)*0.1;
      }
  
      animImgs[i].style.transform = 'translate3d('+el.current.x+'px,'+el.current.y+'px,0)';
    })
    requestAnimationFrame(updateElements);
  }
  updateElements();
  function animContMouseEnter(e){
    mouseOver = true;
  }
  function animContMouseLeave(){
    mouseOver = false;
  }
  function animContMouseOver(e){
    mouseX = e.clientX;
    mouseY = e.clientY;
  }
  animCont.addEventListener("mousemove",animContMouseOver,false);
  animCont.addEventListener("mouseenter",animContMouseEnter,false);
  animCont.addEventListener("mouseleave",animContMouseLeave,false);
  });
  }(jQuery));
  </code></pre>
  
  <p>Here is the js code.</p>