AIKraft/AI/Войти
AIKraft/Skills/Кинематографическая система анимации GSAP Lenis

Кинематографическая система анимации GSAP Lenis

Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.

mengto official Разработка

Что делает навык

Создание премиальной кинематографичной системы веб-анимации, объединяющей GSAP, ScrollTrigger и Lenis для обеспечения плавного скролла и синхронизированных эффектов. Реализует сложные взаимодействия, такие как параллакс, поэтапное появление контента и магнитные курсоры, в стиле люксовых редакционных сайтов.

Когда применять

  • Разработка портфолио креативных студий с иммерсивным сторителлингом
  • Создание сайтов с плавным скроллом и кинематографичными переходами (Awwwards-стиль)
  • Реализация параллакс-эффектов и слоистого движения, реагирующего на прокрутку
  • Добавление премиальных анимаций появления текста и изображений (reveal)

Как работает

  1. Установить зависимости gsap и lenis через npm и инициализировать Lenis, подключив его к GSAP ticker для синхронизации
  2. Настроить CSS-фундамент, скрывая элементы с атрибутами motion до начала анимации, и определить базовые токены (eases, длительности)
  3. Разделить текст на слова или строки с помощью splitWords/splitLines и применить анимации появления с задержкой (stagger) через ScrollTrigger
  4. Настроить сцены прокрутки (Scroll Reveals) для групп элементов или отдельных блоков с использованием пресетов (fade-up, blur-in)
  5. Реализовать параллакс для изображений и слоев, используя разные скорости движения относительно скролла
  6. Создать закрепленные (pinned) секции для горизонтальных галерей или линейного повествования с синхронизацией движения

Примеры запросов агенту

Настрой кинематографичную систему анимации с GSAP и Lenis для моего портфолио, добавь плавный скролл и анимацию появления текста по строкам
Реализуй параллакс-эффект для фоновых изображений и горизонтальную прокрутку галереи в закрепленной секции
Добавь премиальные reveal-анимации для карточек и изображений с эффектом размытия и плавным появлением при скролле

Что понадобится

  • npm-пакеты gsap и lenis
  • DOM-элементы с атрибутами data-motion-text, data-reveal, data-parallax-image и др.
  • Стили CSS для скрытия элементов до анимации и позиционирования кастомного курсора

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «cinematic-gsap-lenis-motion-system» из репозитория: # https://github.com/mengto/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r cinematic-gsap-lenis-motion-system/ ~/.claude/skills/cinematic-gsap-lenis-motion-system/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.