Установка и подключение

GSAP (GreenSock Animation Platform) — это мощная библиотека для создания высокопроизводительных анимаций в JavaScript. Чтобы начать работать с GSAP, необходимо корректно подключить библиотеку к проекту. Существует несколько способов установки и подключения: через CDN, npm, а также локально.

Подключение через CDN

Самый простой способ использовать GSAP — подключение через CDN (Content Delivery Network). Это позволяет моментально начать работу без установки дополнительных пакетов.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>GSAP Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body>
    <div id="box" style="width:100px;height:100px;background:red;"></div>
    <script>
        gsap.to("#box", { x: 200, duration: 2 });
    </script>
</body>
</html>

Ключевые моменты при работе с CDN:

Подключение через <script> обеспечивает мгновенный доступ к глобальной переменной gsap.
Версии можно менять в URL для получения последних обновлений или фиксов.
CDN подходит для быстрого прототипирования и небольших проектов.

Установка через npm

Для проектов на современных сборщиках (Webpack, Vite, Parcel) рекомендуется установка через npm. Это позволяет управлять версиями и использовать модульную структуру.

npm install gsap

После установки импортировать библиотеку можно следующим образом:

// Для ES6 модулей
import gsap from "gsap";

// Пример анимации
gsap.to("#box", { x: 300, rotation: 360, duration: 2 });

Преимущества npm-установки:

Контроль версий и возможность обновлений через package.json.
Использование Tree Shaking для минимизации итогового бандла.
Совместимость с современными фреймворками (React, Vue, Angular).

Локальное подключение

Если проект работает без интернета или необходимо включить библиотеку напрямую в проект, можно скачать GSAP с официального сайта и подключить локально:

<script src="path/to/gsap.min.js"></script>

Особенности локального подключения:

Не зависит от внешних серверов и CDN.
Требует контроля версий вручную.
Подходит для полностью автономных проектов или корпоративных приложений.

Подключение дополнительных модулей GSAP

GSAP предоставляет расширения и плагины, такие как ScrollTrigger, Draggable, SplitText. Подключение происходит аналогично основной библиотеке:

Через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

Через npm:

import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

Ключевые моменты:

Плагины не активны автоматически, их необходимо регистрировать через gsap.registerPlugin.
Некоторые плагины доступны только в платной версии GSAP Club GreenSock.

Проверка корректного подключения

После подключения важно убедиться, что библиотека работает корректно. Наиболее простой способ — запустить анимацию тестового элемента:

gsap.to("#box", { x: 100, y: 50, duration: 1 });

Если элемент движется, подключение прошло успешно. В случае ошибок следует проверить:

Корректность пути при локальном подключении.
Совпадение версии библиотеки с синтаксисом анимации.
Регистрацию плагинов при использовании расширений.