Словами самого skill
gsap-core — это входной skill для основного движка GSAP: одиночные твины с gsap.to(), gsap.from(), gsap.fromTo() и gsap.set(), а также общие vars — duration (по умолчанию 0.5), delay, ease (по умолчанию power1.out), stagger, overwrite и immediateRender. Он документирует алиасы трансформаций GSAP (x, y, scale, rotation, xPercent), autoAlpha для затуханий, clearProps, значения на основе функций и относительные значения, а также общепроектный gsap.defaults().
Большой раздел посвящён gsap.matchMedia() для адаптивных брейкпоинтов и prefers-reduced-motion, завершается официальным списком лучших практик и разделом «Не делайте». Он написан для дизайнеров и разработчиков, создающих или проверяющих анимацию GSAP в React, Vue, Svelte или чистом JS.
Что он выдаёт
- DOM-элементы, анимируемые через CSSPlugin, который поставляется внутри основного движка и не требует дополнительного плагина.
- Экземпляр Tween, возвращаемый каждым методом твина; вы сохраняете его, когда нужно поставить на паузу, запустить, развернуть, убить или прокручивать вручную.
- Трансформации, записанные как алиасы и применяемые в фиксированном порядке: translation, scale, rotationX/Y, skew, rotation.
- Анимации и ScrollTrigger, созданные внутри обработчика matchMedia, автоматически откатываются, как только запрос перестаёт совпадать.
Как это работает
- 01Выберите метод твина
gsap.to() анимирует от текущего состояния к переданным vars и является самым частым вызовом; from() делает обратное для входа элементов, fromTo() явно задаёт оба конца без чтения текущих значений, а set() применяет мгновенно, с длительностью 0.
- 02Пишите vars в camelCase
Имена свойств внутри объекта vars должны быть в camelCase, поэтому CSS-свойства вроде background-color или font-size становятся backgroundColor и fontSize.
- 03Смещение с помощью stagger
Простое число в stagger — это количество секунд между каждой целью; форма-объект добавляет опции, такие как amount с направлением from, или each с from: "random".
- 04Выберите ease
Строковые ease покрывают большинство случаев — power1.out задаёт стандартное ощущение по умолчанию, а back.out(1.7), elastic.out(1, 0.3), power3.inOut и none — задокументированные альтернативы.
- 05Вычисляйте значения для каждой цели
Функция, переданная как значение vars, вызывается один раз для каждой цели при первом рендере, поэтому значения на основе индекса, такие как x: (i) => i * 50, можно распределить по набору.
- 06Ограничивайте работу медиазапросами
gsap.matchMedia() выполняет свой обработчик настройки только пока запрос совпадает — так skill обрабатывает адаптивные брейкпоинты и пользователей с reduced-motion.