Yelpin 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: если движение мешает читаемости, фокусу или скорости — убирай движение, а не правила. Лучший моушн незаметен, пока его не выключишь.