Animation On Scroll Skill

Usage checklist

• Insert the JS snippet in the <head> after the keyframes
• Add animation class and animate-on-scroll to elements
• Ensure keyframe name matches the Tailwind animation reference

IntersectionObserver trigger

<script>
  (function () {
    const style = document.createElement("style");
    style.textContent = `
      .animate-on-scroll { animation-play-state: paused !important; }
      .animate-on-scroll.animate { animation-play-state: running !important; }
    `;
    document.head.appendChild(style);
    const once = true;
    if (!window.__inViewIO) {
      window.__inViewIO = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            if (once) window.__inViewIO.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    }
    window.initInViewAnimations = function (selector = ".animate-on-scroll") {
      document.querySelectorAll(selector).forEach((el) => window.__inViewIO.observe(el));
    };
    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

@keyframes animationIn {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

Tailwind example

<div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">...</div>

Customization knobs

• Trigger: Adjust threshold and rootMargin for earlier/later reveals
• Repeat: Set once = false for replay on re-entry
• Motion: Tweak translateY and blur in keyframes
• Timing: Change duration/delay in the animation value

Tips for AI Agents

• Ask whether animations should run once or repeat.
• Confirm motion style (fade, slide, blur, scale).