# gsap-animation

Связывает GSAP с Remotion для рендеринга моушн-графики и сложных таймлайнов. Нужен при анимации текста, морфинге SVG и нестандартных кривых смягчения.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 313 установок · ★ 339
- Автор: notedit
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/notedit/happy-skills/tree/HEAD/skills/video/gsap-animation/SKILL.md
- Обновлён: 2026-03-03
- HTML: https://affpapa.org/nevibecode/skills/gsap-animation

## Что делает

Скилл учит агента совмещать экосистему GSAP с покадровым рендерингом в Remotion. Основа интеграции — хук `useGSAPTimeline`, который ставит таймлайн на паузу и синхронизирует его через `seek(frame / fps)`. В набор входят рецепты для SplitText и сложных функций CustomEase.

Для простого затухания автор запрещает брать GSAP. В таких сценах оставляйте нативный `interpolate()` из Remotion. Библиотека нужна для вложенных таймлайнов со смещениями вроде `"-=0.5"`. При работе со шрифтами хук вызывает `delayRender()` и ждёт `document.fonts.ready`.

Эффект ScrambleText генерирует случайные символы внутри GSAP. Рендерить такие композиции придётся строго с флагом `--concurrency=1`. Иначе кадры в потоках разойдутся.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add notedit/happy-skills --skill gsap-animation -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/gsap-animation/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/gsap-animation/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add notedit/happy-skills --skill gsap-animation -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/gsap-animation/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add notedit/happy-skills --skill gsap-animation -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/gsap-animation/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install notedit/happy-skills gsap-animation
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/gsap-animation/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add notedit/happy-skills --skill gsap-animation -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/notedit/happy-skills --path skills/video/gsap-animation
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/gsap-animation/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add notedit/happy-skills --skill gsap-animation -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/notedit/happy-skills/tree/HEAD/skills/video/gsap-animation/SKILL.md

## Когда брать
- синхронизировать таймлайн GSAP с покадровым рендерингом Remotion
- анимировать появление текста по буквам и строкам через SplitText
- предотвратить мерцание шрифтов при расчёте слоёв через `delayRender`
- настроить морфинг SVG-контуров с помощью MorphSVG

## Примеры запросов агенту
- Напиши компонент титров в Remotion с каскадным появлением букв через SplitText и GSAP
- Создай хук `useGSAPTimeline` для управления анимацией через `frame / fps`
- Добавь эффект декодирования текста с помощью ScrambleText и покажи команду рендера с `--concurrency=1`

## Похожие
- [gsap](https://affpapa.org/nevibecode/skills/mindrally-gsap.md) — скилл · 769 установок
- [gsap-framer-scroll-animation](https://affpapa.org/nevibecode/skills/gsap-framer-scroll-animation.md) — скилл · 3900 установок
- [diagram-animation](https://affpapa.org/nevibecode/skills/diagram-animation.md) — скилл · 1500 установок
- [logo-animation](https://affpapa.org/nevibecode/skills/logo-animation.md) — скилл · 2800 установок
- [article-highlights](https://affpapa.org/nevibecode/skills/article-highlights.md) — скилл · 947 установок
- [gsap-react](https://affpapa.org/nevibecode/skills/gsap-react.md) — скилл · 66300 установок

Из того же набора: [notedit/happy-skills](https://affpapa.org/nevibecode/by/notedit/happy-skills.md) — 2 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md