# Site Motion

> site-motion — движение на GSAP

- Skill: `yelpin/site-motion` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add yelpin/site-motion`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yelpin/site-motion/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Yelpin (https://skillmd.com/u/yelpin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yelpin/site-motion

---


# site-motion — движение на GSAP

> Часть сборника **site-studio**. Вызывается site-director на шаге движения; подчиняется воротам site-quality.

Оживляет собранную страницу. Инструмент — **GSAP + ScrollTrigger** (реальный движок, не ручной CSS). Плагины GSAP с 2025 бесплатны целиком — используй SplitText, ScrollTrigger, ScrollSmoother по делу.

## Главное правило: мера

**2–3 точки движения на страницу.** Анимация на каждом блоке читается как дешёвый шаблон. Выбери: вход, один сигнатурный скролл-момент, мягкие ревилы — и хватит.

## Easing — никогда linear

- Появление: `power3.out` / `power4.out` (быстрый старт, мягкая посадка).
- Реакция на действие: 120–200 мс.
- Пружина (`elastic`/`back`) — только для игривых брендов, дозированно.

## Приёмы (выбирай под смысл, не все сразу)

- **Вход:** заголовок — `SplitText` по словам/буквам со stagger; ключевые блоки — `y`+`opacity`, `fill: forwards`.
- **Сигнатурный скролл-момент:** один. Параллакс фонового фото; scrub-раскрытие; горизонтальный pin-скролл галереи; счётчик цифр вверх. Один — сильный.
- **Ревилы секций:** `ScrollTrigger` на входе в кадр, срабатывание один раз, порог ~0.2.
- **Микро:** hover со смыслом (сдвиг, зум фото, подчёркивание), опц. магнитная кнопка.

## Производительность 60fps

Анимируй только `transform` и `opacity`. Не трогай в анимации `width/height/top/left/box-shadow` — дёргается. `will-change` — умеренно, снимай после.

## Обязательное

`@media (prefers-reduced-motion: reduce)` глушит нефункциональное движение. Не опция — требование доступности.

## Рецепты кодом

Не выводи паттерны заново — в `references/gsap-recipes.md` лежат каноны: reduced-motion-гейт, SplitText-вход, ревил секций, параллакс, горизонтальный pin-скролл, счётчик цифр, магнитная кнопка + шпаргалка таймингов. Бери нужное, подгоняй под бренд.

## Референсы

Витрина **madewithgsap.com** — нашёл эффект, покажи его модели, попроси разобрать в приёмы и повторить своим кодом (не копируй чужой пен целиком).

## Связка

Ты — последний слой. Не спорь с **site-quality**: если движение мешает читаемости, фокусу или скорости — убирай движение, а не правила. Лучший моушн незаметен, пока его не выключишь.