Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
heldrida

How to import Easing package correctly when using ES6?

Recommended Posts

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 })
Link to post
Share on other sites

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). 

  • Like 3
Link to post
Share on other sites

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.

Link to post
Share on other sites

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). 

Link to post
Share on other sites
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 :)

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×