animation-on-scroll

MengTo/Skills · Agent Skill

Используйте, когда вам нужно движение, управляемое прокруткой, которое кажется намеренным, а не шумным или чрезмерным.

Перейти к установке ↓

Обзор

АвторMengToСообщество
РепозиторийMengTo/Skills ↗
Папка скиллаanimation-on-scroll
Звёзды7 038
Форки819
Файлы4
ЛицензияMIT
Обновлён25 октября 2026 г.
СсылкиИсходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность
низкий риск · явных рисков не найдено — полный отчёт покажет детали
Совместимость
только инструкции — подходит большинству агентов
Похожие скиллы
найдено 58 похожих скиллов
Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «animation-on-scroll» с mozgi.io (https://mozgi.io/skills/mengto-animation-on-scroll/).

1. Скачай архив: https://mozgi.io/skills/mengto-animation-on-scroll/download
   Если не скачивается — возьми папку скилла из исходника: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/animation-on-scroll
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «animation-on-scroll» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/animation-on-scroll/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

Файлы скилла

4 файла Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

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?

Вопросы и ответы

Что делает скилл animation-on-scroll?

Используйте, когда вам нужно движение, управляемое прокруткой, которое кажется намеренным, а не шумным или чрезмерным.

Как установить animation-on-scroll?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает animation-on-scroll?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому animation-on-scroll подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл animation-on-scroll бесплатный?

Скилл опубликован автором MengTo в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.

Похожие скиллы

Все скиллы →
animation-systems Используйте при построении целостной системы анимации вместо единичных корректировок движения. MengTo7k gsap Используйте при реализации движения с GSAP и когда вы хотите получить практические рекомендации по структуре анимации и последовательности. MengTo7k gsap-scrolltrigger-storytelling Используйте при создании разделов рассказов на основе прокрутки с GSAP ScrollTrigger. MengTo7k marquee-loop Используйте при создании циклических марке, требующих стабильного ритма,间隔а и осведомленности о производительности. MengTo7k masked-reveal Используйте при раскрытии содержимого с маскированным движением, обрезанными переходами или многослойными входами. MengTo7k matterjs Используйте при создании физически обусловленных взаимодействий и поведений макета с помощью Matter.js. MengTo7k