JSFiddle - React, Tailwind, and code Playground

DOM Animation Practice

by Ttt Yyy

HTML

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

</div>

JavaScript

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

  let startTime = performance.now();

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

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

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

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

  let 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) {
    let 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) */
})