animation-on-scroll — скилл для Claude Code: анимация при скролле
Скилл добавляет элементам появление при входе во вьюпорт: IntersectionObserver плюс классы и кейфреймы под Tailwind.
npx skills add MengTo/Skills --skill animation-on-scroll -a claude-codeЧто делает animation-on-scroll
Скилл описывает рабочий процесс из трёх шагов: сначала уточняет стиль анимации, тайминг и нужно ли проигрывать её один раз или повторять, затем выдаёт кейфреймы, JS-сниппет наблюдателя и точный класс Tailwind, а после — точечные правки по threshold, rootMargin, длительности, задержке и значениям transform и blur.
Внутри два блока кода. Первый — скрипт с IntersectionObserver: он вставляет стили с animation-play-state: paused, вешает наблюдатель с threshold: 0.2 и rootMargin: "0px 0px -10% 0px", а при пересечении добавляет элементу класс animate. Второй — кейфреймы animationIn с прозрачностью, сдвигом по Y и размытием. В разметке это выглядит как animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both].
Скрипт нужно вставить в <head> после кейфреймов, иначе анимация не запустится. Имя кейфрейма в Tailwind-значении должно совпадать с объявленным — расхождение здесь ломает всё молча. Ещё одна частая осечка: элемент уже виден до инициализации наблюдателя, и тогда анимации не будет. Повтор при повторном входе включается переменной once = false.
Какие задачи решает
- сделать появление блоков при скролле без сторонних библиотек
- подключить scroll-reveal к проекту на Tailwind
- настроить задержку и длительность анимации под макет
- запускать анимацию один раз или при каждом входе во вьюпорт
- починить анимацию, которая не срабатывает из-за порядка подключения кода
Примеры запросов агенту
- добавь scroll-reveal для секции с карточками, анимация один раз
- сделай появление заголовка с блюром и сдвигом вверх на Tailwind
- анимация не запускается — проверь, что кейфреймы идут перед скриптом
Как установить animation-on-scroll
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill animation-on-scroll -a claude-code2Вручную: положить файлы
~/.claude/skills/animation-on-scroll/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/animation-on-scroll/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill animation-on-scroll -a codex2Вручную: положить файлы
.agents/skills/animation-on-scroll/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill animation-on-scroll -a cursor2Вручную: положить файлы
.cursor/skills/animation-on-scroll/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills animation-on-scroll2Вручную: положить файлы
.github/skills/animation-on-scroll/SKILL.md1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill animation-on-scroll -a gemini-cli2Командой платформы
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/animation-on-scrollВручную: положить файлы
.devin/skills/animation-on-scroll/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill animation-on-scroll -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора148
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о animation-on-scroll
Как установить animation-on-scroll в Claude?
Выполните npx skills add MengTo/Skills --skill animation-on-scroll -a claude-code. Скилл окажется в ~/.claude/skills/animation-on-scroll/SKILL.md.
Что делает animation-on-scroll?
Помогает настроить появление элементов при входе во вьюпорт: отдаёт кейфреймы, JS-сниппет на IntersectionObserver и класс для Tailwind.
Почему анимация не срабатывает?
Скилл называет три причины: кейфреймы подключены после скрипта, имя кейфрейма не совпадает с тем, что указано в Tailwind, либо элемент уже был в зоне видимости до инициализации наблюдателя.
Исходный текст
SKILL.md · MIT
---
name: animation-on-scroll
description: 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.
---
# 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
```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?
© MengTo · MIT · MengTo/Skills
