2021-10-15 DOM Animation

by Ttt Yyy

HTML

<div id='hi'>
Hi
</div>
<button id='button'>
Animate
</button>
<div id='console'>

</div>

JavaScript

const boomerang = (element, duration, distance) => {

const startTime = performance.now();

  element.style.transform = "translateX(0)";

  let requestID = requestAnimationFrame(function helper(time) {
    const percentage = Math.min((time - startTime) / duration, 1);

    if (percentage < 0.5) {
      const distanceSoFar = percentage * distance * 2;
      element.style.transform = `translateX(${distanceSoFar}px)`;
    } else {
      const distanceComingBack = distance * (1 - percentage) * 2;
      element.style.transform = `translateX(${distanceComingBack}px)`;
    }

    if (percentage < 1) {
      requestID = requestAnimationFrame(helper);
    }
  });

  return () => {
    element.style.transfrom = "translateX(0)";
    cancelAnimationFrame(requestID);
  };
}

const animate = (element, duration, distance) => {

  const startTime = performance.now();

  element.style.transform = 'translateX(0)';
  // element.style.transition = `transform ${duration}ms linear 0s`;
//   element.style.transition = `transform ${duration}ms ease-in 0s`;
  let requestTimeID = window.requestAnimationFrame(function loop(time) {
    const percentage = Math.min((time-startTime)/duration, 1);

  	const distanceSoFar = distance * percentage;
    element.style.transform = `translateX(${distanceSoFar}px)`;

    if(percentage < 1) {
      requestTimeID = requestAnimationFrame(loop);
    }

  })

  return () => {
    cancelAnimationFrame(requestTimeID);
    element.style.transform = 'translateX(0)'
  }

}

let elementToMove = document.getElementById('hi');
let button = document.getElementById('button');
let console = document.getElementById('console')
button.addEventListener('click', e => {
	animate(elementToMove, 2000, 100)
	/* boomerang(elementToMove, 2000, 100) */
})