Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Animation On Scroll Skill — measured AI agent skill | DecimalAI

mengto/animation-on-scroll

NewSkillScoreMaintained

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.

by mengto

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull mengto-animation-on-scroll

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/mengto-animation-on-scroll/SKILL.md

Raw file: /s/mengto-animation-on-scroll/SKILL.md ↗ · machine-readable summary at /s/mengto-animation-on-scroll.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 2h ago

Yes — +55% lift+7% tokens0% turns86% of whole cases pass with skill (19/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-03	✗→✓	▲ Improved	-23%	0%
case-04	✗→✓	▲ Improved	0%	0%
case-06	✗→✓	▲ Improved	10%	0%
case-07	✗→✓	▲ Improved	52%	0%
case-08	✗→✓	▲ Improved	2%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

mengto / skills

agent-skills/web-design/animation-on-scroll/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

Animation On Scroll Skill

Workflow

Confirm animation style, timing, and whether animations should run once or repeat.
Provide the keyframes + JS observer snippet and the exact Tailwind class to apply.
Offer focused tweaks only (threshold, rootMargin, duration, delay, transform/blur values).

Usage checklist

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

IntersectionObserver trigger

html
<script>
  /*
    Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:

    1) Insert this code in the <head> along with the Animation Keyframe code.

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
  */
  (function () {
    // Inject CSS for paused/running states
    const style = document.createElement("style");
    style.textContent = `
      /* Default: paused */
      .animate-on-scroll { animation-play-state: paused !important; }
      /* Activated by JS */
      .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); // observing twice is a no-op
      });
    };

    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

html
<style>
  /*
    Sequence animation intro. Usage:

    1) Insert this code in the <head>

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
  */
  @keyframes animationIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0px);
    }
  }
</style>

Tailwind example

html
<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 to allow replays when re-entering.
Motion: tweak translateY and blur in keyframes.
Timing: change duration and delay in the Tailwind animation value.

Common pitfalls

Forgetting to include the keyframes before the JS snippet.
Using a different keyframe name than in the Tailwind animation.
Animations not running because the element is already in view before observer init.

Questions to ask when specs are missing

Should animations run once or every time the element re-enters?
How far before entering the viewport should they start?
What motion style (fade, slide, blur, scale) do you want?

Want to see if mengto/animation-on-scroll would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.