animation-on-scroll

MengTo/Skills · Agent Skill

Usa quando hai bisogno di un movimento controllato dalla scroll che sembri intenzionale, piuttosto che rumoroso o eccessivo.

Vai all'installazione ↓

Panoramica

AutoreMengToCommunity
RepositoryMengTo/Skills ↗
Cartella dello skillanimation-on-scroll
Stelle7038
Fork819
File inclusi4
LicenzaMIT
Aggiornato25 ottobre 2026
LinkSorgente dello skill ↗ · Repository ↗

Verifica Mozgi

Cosa abbiamo trovato nei file dello skill. I dettagli con l’abbonamento.

Sicurezza
rischio basso · nessun rischio evidente — il report completo mostra i dettagli
Compatibilità
solo istruzioni — funziona con la maggior parte degli agenti
Skill simili
58 skill simili trovati
Inoltre con l’abbonamento

Installazione

Uno skill è una cartella con un file SKILL.md. Scegli il tuo agente ed esegui i comandi in un terminale (macOS, Linux o Git Bash su Windows) dalla radice del progetto.

Incolla il prompt in Claude, Codex o un altro assistente: controllerà lo skill e lo installerà.

Install the “animation-on-scroll” skill from mozgi.io (https://mozgi.io/skills/mengto-animation-on-scroll/) for me.

1. Download the archive: https://mozgi.io/skills/mengto-animation-on-scroll/download
   If it fails, take the skill folder from the source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/animation-on-scroll
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “animation-on-scroll” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/animation-on-scroll/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

File dello skill

4 file Scarica ZIP

Leggi SKILL.md e i file correlati prima di installare. Clicca un file per l'anteprima.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

Animation On Scroll Skill

Workflow

1. Confirm animation style, timing, and whether animations should run once or repeat.

2. Provide the keyframes + JS observer snippet and the exact Tailwind class to apply.

3. 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

<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

<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

<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?

Domande frequenti

Che cosa fa lo skill animation-on-scroll?

Usa quando hai bisogno di un movimento controllato dalla scroll che sembri intenzionale, piuttosto che rumoroso o eccessivo.

Come si installa animation-on-scroll?

Apri il blocco “Installazione” in questa pagina e scegli il tuo agente — Claude Code, Codex, Cursor o Gemini CLI — per i comandi pronti che copiano la cartella dello skill nel posto giusto. Oppure copia il prompt dalla scheda “Con l'assistente” e lascia che sia l'assistente a controllare e installare lo skill.

Con quali modelli AI funziona animation-on-scroll?

Gli skill sono semplici istruzioni in Markdown (formato Agent Skills), quindi animation-on-scroll funziona con qualsiasi agente che legge SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode e altri. Il modello carica le istruzioni solo quando il compito corrisponde alla descrizione dello skill.

animation-on-scroll è gratuito?

Lo skill è pubblicato apertamente da MengTo con licenza MIT. Lo skill in sé non costa nulla: paghi solo il tuo fornitore AI per i token usati.

È sicuro installare gli skill?

Uno skill è un insieme di istruzioni che il tuo agente seguirà: leggi SKILL.md e i file correlati prima di installarlo. Gli script nella cartella dello skill vengono eseguiti solo se li esegue l'agente: controlla cosa fa e non concedere permessi superflui.

In cosa differisce uno skill da un server MCP o da un plugin?

Un server MCP o un plugin danno al modello nuovi strumenti: codice che viene eseguito e restituisce un risultato. Uno skill fornisce conoscenza e metodo: come affrontare il compito, quali passi seguire e com'è un buon risultato. Non servono server né chiavi API.

Skill correlati

Tutti gli skill →
animation-systems Utilizza al posto di singole correzioni di movimento per costruire un sistema di animazione olistico. MengTo7k gsap Utilizza quando si implementa il movimento con GSAP e quando si desidera ottenere consigli pratici sulla struttura dell'animazione e sulla sequenza. MengTo7k gsap-scrolltrigger-storytelling Utilizza la creazione di sezioni di storie in base alla scroll con GSAP ScrollTrigger. MengTo7k marquee-loop Utilizza quando si creano cicli di marca che richiedono un ritmo stabile, un intervallo e una consapevolezza delle prestazioni. MengTo7k masked-reveal Utilizza quando si rivela il contenuto con movimento mascherato, transizioni ritagliate o ingressi multistrato. MengTo7k matterjs Utilizza Matter.js per creare interazioni e comportamenti di layout fisicamente basati. MengTo7k