/*
To experiment with a different CSS property:
1. Update the lines marked with "start" and "end" in the CSS.
2. Update `animatedPropName` in the JS below.
3. Run the experiment!

Note: the layout CSS of this codepen itself can bork some animations. For example, animating `float` does nothing because the subject div is positioned via `grid`.
*/

const animatedPropName = 'text-transform';

/* you probably don't need to change anything below */

const start = document.getElementById('start');
const subject = document.getElementById('subject');
const output = document.getElementById('output');
const propName = document.getElementById('prop-name');

start.addEventListener('click', startExperiment);
subject.addEventListener('animationstart', startAnimation);
subject.addEventListener('animationend', endAnimation);

propName.innerText = animatedPropName;

let isAnimating = false;
let startTime;

function startExperiment() {
  // change button
  start.disabled = true;
  start.innerText = 'Animating...';
  
  // clear previous experiment
  subject.classList.remove('animate');
  output.innerText = '';
  
  // begin animation
  addSnapshot('start');
  subject.classList.add('animate');
}

function startAnimation() {
  isAnimating = true;
  startTime = Date.now();
  window.requestAnimationFrame(update);
}

function endAnimation() {
  // wrap things up
  isAnimating = false;
  addSnapshot('end');
  
  // change button
  start.disabled = false;
  start.innerText = 'Restart Animation';
}

function update() {
  if (isAnimating) {
    const elapsedTime = Date.now() - startTime;
    addSnapshot(elapsedTime + 'ms');
    window.requestAnimationFrame(update);
  }
}

function addSnapshot(time) {
  const styles = window.getComputedStyle(subject);
  const propValue = styles.getPropertyValue(animatedPropName);
  output.innerText += time.padStart(5) + ': ' + propValue + '\n';
  
  // scroll output to bottom
  output.scrollTop = output.scrollHeight;
}