GR
gsap-scrolltrigger
Официальный плагин GSAP ScrollTrigger для создания анимаций, привязанных к скроллу, с поддержкой pinning, scrub и триггеров. Используйте при разработке параллакса, закрепленных секций или когда пользователь запрашивает scroll-анимации без указания конкретной библиотеки.
Что делает навык
Официальный плагин GSAP ScrollTrigger для создания анимаций, привязанных к скроллу, с поддержкой pinning, scrub и триггеров. Используется для реализации параллакса, закрепленных секций и анимаций, запускаемых при прокрутке.
Когда применять
- Триггеринг tweens или timelines при прокрутке страницы
- Закрепление (pinning) элементов в заданных диапазонах скролла
- Синхронизация анимации с положением скролла через scrub
- Создание горизонтального скролла с помощью containerAnimation
- Координация анимаций для группы элементов через ScrollTrigger.batch()
Как работает
- Загрузить скрипт плагина и зарегистрировать его один раз с помощью gsap.registerPlugin(ScrollTrigger)
- Связать tween или timeline с позицией скролла, указав параметры start, end и scrub
- Настроить триггеры с использованием синтаксиса позиций вьюпорта, пиксельных смещений или функций
- Применить toggleActions для управления поведением play/pause/reverse/reset при входе/выходе из зоны видимости
- Использовать ScrollTrigger.batch() для пакетной обработки элементов или scrollerProxy() для кастомных библиотек скролла
- Вызывать refresh/cleanup утилиты для динамического контента и SPA
Примеры запросов агенту
Создай параллакс-эффект для секции с помощью GSAP ScrollTrigger
Закрепи элемент на экране при скролле и запусти анимацию его исчезновения
Реализуй горизонтальный скролл, управляемый вертикальной прокруткой
Что понадобится
- Библиотека GSAP (для использования плагина требуется регистрация через gsap.registerPlugin)
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «greensock-gsap-scrolltrigger» из репозитория:
# https://github.com/greensock/gsap-skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r greensock-gsap-scrolltrigger/ ~/.claude/skills/greensock-gsap-scrolltrigger/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.