Keyframe Animation to Scroll

scrollanimation.js

:root * {
  /* Pause the animation */
  animation-play-state: paused;
  /* Bind the animation to scroll */
  animation-delay: calc(var(--scroll) * -1s);
  /* These last 2 properites clean up overshoot weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

document.addEventListener( 'DOMContentLoaded', function () {
  var root = document.body.style;
  console.log(root);

  // Initialize variables
  root.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));

  // Scroll events
  window.addEventListener('scroll',scroll,false);
  function scroll() {
    root.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
  }
});