How to import Easing package correctly when using ES6?

[heldrida]

Hi,

I'd like to know how to import the Easing package when using ES6? Or any other for that matter.

At the moment I noticed that even though I did not import easing, it's available when importing TweenLite. So, I'd like to understand what I'm importing and when I have to import (a package, or the need to be specific).
 

import { TweenLite } from "gsap";
TweenLite.fromTo(this.refs.logo, 0.8, { opacity: 0, x: 50 }, { opacity: 1, x: 0, ease: Bounce.easeOut })

[GreenSock]

Good question. The package.json file defines the "main" as TweenMax.js, and TweenMax contains all of the following (as exports):

 

Core

• TweenLite
• TweenMax
• TimelineLite
• TimelineMax

Plugins

• CSSPlugin
• AttrPlugin
• BezierPlugin
• DirectionalRotationPlugin
• RoundPropsPlugin

Eases (everything in EasePack)

• Power0
• Power1
• Power2
• Power3
• Power4
• Back
• Bounce
• Circ
• Cubic
• Elastic
• Expo
• Linear
• Quad
• Quart
• Quint
• RoughEase
• Sine
• Strong
• SlowMo
• SteppedEase 

TweenMax is intended to be the feature-rich, "gimme-the-essentials-plus-some-goodies-without-having-to-load-multiple-files" package.

 

As of 1.19.1, if you're using NPM you can reference most of the individual files, like require("gsap/TweenLite") and require("gsap/CSSPlugin"), but the eases aren't all broken out like that, otherwise it'd get pretty nuts with the number of files. We're aiming to do an ES6 rewrite later this year, but that's a much bigger task and I need to do more testing to make sure there won't be too much of a performance drop (I've read that a lot of these ES6 options are actually slower in the browser which is certainly a concern for us). 

[heldrida]

In my previous projects, I'm loading TimelineLite, TweenLite & the CSSPlugin from cdnjs through a <script> tag; Let's say I'm was using webpack. If I import these in the entry js file, would it load all the goodies and would that work? I'll test it.

[GreenSock]

Yep, TweenMax has all of those, so they should all be available to you. It's also fine to just load things from the CDN (in fact, I'd generally recommend that because you instantly get the benefits of ubiquitous caching). 

[Shqipognja]

Reposting in Appropriate Forum

[GreenSock]

2 minutes ago, Shqipognja said:

This is the exports on my all.js file in node modules. 

@Shqipognja it looks like you're talking about the GSAP 3.0 beta, right? Please keep those discussions in the private GSAP 3 forums if you don't mind.

 

SlowMo hasn't been ported over to GSAP 3 quite yet, but we're definitely planning on it soon. Sorry about any confusion there. My goal is to have that ready within the next week. Stay tuned