Словами самого skill
Официальные рекомендации GSAP по анимации компонентов Vue, Nuxt, Svelte и SvelteKit, где жизненный цикл фреймворка определяет момент существования DOM-узлов. Агенту предписывается создавать твины и ScrollTrigger только после монтирования — onMounted в Vue, onMount в Svelte — внутри gsap.context(scope) с ref контейнера, переданным вторым аргументом, чтобы селекторы вроде .box оставались внутри этого компонента.
При демонтаже ctx.revert() уничтожает анимации и ScrollTrigger и возвращает инлайновые стили. Также описан композабл useGSAP для Nuxt 4, который регистрирует ScrollTrigger один раз и лениво загружает плагины, такие как SplitText, через динамический импорт, а также обновляет позиции триггеров после изменений разметки.
Что он выдаёт
- Готовый к запуску пример проекта на Vite + Vue 3, демонстрирующий паттерны context и cleanup.
- Композабл Nuxt, используемый в компонентах через useGSAP(), который предоставляет экземпляр gsap и метод ленивой загрузки.
- Типизированный хелпер lazyLoadPlugin, который динамически импортирует плагин, регистрирует его в gsap и возвращает его.
Как это работает
- 01Дождитесь появления DOM перед созданием
Твины и ScrollTrigger создаются только после того, как DOM компонента доступен — с использованием onMounted в Vue или onMount в Svelte, чтобы ref контейнера действительно существовал.
- 02Ограничивайте область действия корнем компонента
Вся настройка анимации оборачивается в gsap.context(callback, scope), с ref контейнера, переданным вторым аргументом, чтобы селекторы вроде .item разрешались только внутри этого поддерева.
- 03Откатывайте изменения при демонтаже во фреймворке
В каждом примере context сохраняется в переменной, а ctx.revert() вызывается из onUnmounted (Vue) или из функции очистки, возвращаемой onMount (Svelte).
- 04Обновляйте после изменений разметки
Позиции ScrollTrigger пересчитываются после стабилизации разметки, например после того, как загрузка данных изменяет позиции триггеров.