JSFiddle - React, Tailwind, and code Playground

by rafonzoo

HTML

<body onload="animateAfterPosition(200)">
  <h1 style="position: relative; top: 0; left: 0;"data-animate-left="50px" data-animate-top="50px" data-animate-time="0.2s" data-animate>Animation on scroll</h1>
</body>

CSS

body { background-color: white; }

[data-animate] {
  height: 1000px;
}

.animateAfterPosition {
  transition: attr(data-animate-time);
  left: attr(data-animate-left);
  top: attr(data-animate-top);
}

JavaScript

const dataAnimate = document.querySelector('[data-animate]');

function animateAfterPosition(scroll) {
  dataAnimate.classList.toggle('active', window.scrollY <= scroll);
}

window.addEventListener("scroll", function() {
  return animateAfterPosition(200);
});