DIGITAL.ERA

GSAP ES6

Алексей Добрый -

По умолчанию в версии 2.0 используются ES модули. Теперь можно импортировать индивидуальные пакеты.

import TweenMax from 'gsap/TweenMax'
import Draggable from 'gsap/Draggable'

TweenMax включает (и экспортирует) множество обще-используемых классов и мы можем импортировать их:

import { TweenMax, TimelineLite, Power2, Elastic, CSSplugin } from 'gsap/TweenMax'

// TweenMax includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, DirectionalRotationPlugin, AttrPlugin, and all eases except CustomEase, CustomWiggle, and CustomBounce

Также есть all файл, который включает все инструменты GSAP (исключая только премиальные плагины):

import { TweenMax, CSSPlugin, ScrollToPlugin, Draggable } from 'gsap/all'
Если плагины не работают, например плагины анимации, то скорее всего проблема с Tree shaking.

Некоторые сборщики такие как Webpack предлагают специальную возможность называемую `tree shaking`, которая пытается определить модули неиспользуемые, не имеющие ссылок в приложении и "выбрасывает" их их общего пакета. Но в GSAP плагины (например CSSPlugin) обычно не имеют прямых ссылок в приложении. Чтобы избежать этого, достаточно добавить ссылки на плагины:

import { TimelineLite, CSSPlugin, AttrPlugin } from 'gsap/all'

// если строку не добавить, модули
// плагинов будут удалены из финального пакета
const plugins = [ CSSplugin, AttrPlugin ]

var tl = new TimelineLite()
tl.to('.my', 1, {x: 100, attr: { width: 300 }})
для максимальной обратной совместимости и чтобы предотвратить негативные эффекты tree shaking для плагинов, основной файл TweenMax автоматически активирует все классы, которые исторически поставлялись вместе (такие как CSSPlugin, BezierPlugin, AttrPlugin и другие). Это конечно увеличивает размер бандла. Если необходим только сам TweenMax (без какаих-либо других активированных классов), то используем TweenMaxBase:
// никакие дополнительные плагины/классы не будут активированы
import { TweenMax } from 'gsap/TweenMaxBase'

Для того чтобы tree shaking работал в Webpack, возможно потребуется установить {modules: false} в файле конфигурации babel. Необходимо проконсультироваться с документаций webpack:

UMD/CommonJS

Если приложение не использует ES модули, то используем umd версию GSAP. UMD версии располагаются в директории umd, они совместимы с различными модульными системами (RequireJS, Browserify, и так далее)

import { TweenMax, Power2, TimelineLite } from 'gsap/umd/TweenMax'
import ScrollToPLugin from 'gsap/umd/ScrollToPlugin'
import Draggable from 'gsap/umd/Draggable'

Bonus Plugins

Для премиальных плагинов, которые не распространяются через NPM. Потребуется скачать плагины и поместить их в отдельную директорию приложения, например `src/gsap-bonus`, и затем импортировать 

import MorphSVGPlugin from './gsap-bonus/MorphSVGPlugin'
import SplitText from './gsap-bonus/SplitText'

CDN

Ну и никто не отменял старый дорый CDN, можно просто подключить необходимые скрипты с CDN

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

Почему нельзя просто импортировать классы из gsap?

Это связано с обратной совместмостью. Исторически gsap был связан с TweenMax и изменение подобной логики может сломать существующие проекты. Возможно в версии 3.0.0 ситуация измениться.