Jump to content
Search Community

How to import Easing package correctly when using ES6?

heldrida test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
Share on other sites

  • 2 years later...
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 comment
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.
×
×
  • Create New...