JSFiddle - React, Tailwind, and code Playground

Animation

by Ttt Yyy

HTML

<!doctype html>
<head /> 
<body>
  <div id='container'>
  <div id='hi'>
  Hi
  </div>
  <div>
    Test
  </div>
    </div>
  <button id='button'>
    Animate
  </button>
  <button id='cancel'>
    Cancel
  </button>
  <div id='console'>
   0
  </div>
</body>

CSS

#container {
  display: flex;
}

#hi {
  /* transition: left 3s */
}

JavaScript

let element = document.getElementById('hi');
let animateButton = document.getElementById('button');
let cancelButton = document.getElementById('cancel');

/* const animate = (element, duration, distance) => {
  let timePerFrame = 1000/60;
  let distancePerFrame = distance/duration * timePerFrame;
  let distanceSoFar = 0;
  let interval = setInterval(() => {
    distanceSoFar += distancePerFrame
    if(distanceSoFar >= distance) {
      distanceSoFar = distance;
      clearInterval(interval);
    }

element.style.transform = `translateX(${distanceSoFar}px)`;

  }, timePerFrame)
  
  return () => {
    element.style.transform = `translateX(0px)`;
    clearInterval(interval); 
   
  }
} */

// Date.now()
/* const animate = (element, duration, distance) => {

  const startTime = Date.now();
  
  element.style.position = 'relative';
  
let req = window.requestAnimationFrame(function loop(time) {
    const percentage = Math.min(1, (Date.now() - startTime)/duration);
    element.style.left = `${percentage*distance}px`
    
    if(percentage <1) {
      req = window.requestAnimationFrame(loop);
    }
  })
  
  return () => {
  element.style.left = '0px';
  cancelAnimationFrame(req);
  }
} */

// performance.now()
 const animate = (element, duration, distance) => {

  const startTime = performance.now();
  element.style.transform = 'translateX(0)'
/*   element.style.position = 'relative'; */
// add transition element below for easing
/* element.style.transition = `left ${duration}ms`; */
element.style.transition = `transform ${duration}ms`;
let req = window.requestAnimationFrame(function loop(time) {
    const percentage = Math.min(1, (time - startTime)/duration);
    // would probably alter percentage*distance function below for easing
/*     element.style.left = `${percentage*distance}px`
     */
     element.style.transform = `translateX(${percentage*distance}px)`;
    if(percentage <1) {
      req = window.requestAnimationFrame(loop);
    }
  })
    return () => {
   ...