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 ситуация измениться.