Import extra eases like ExpoScale in GSAP v3

[iDVB]

We've been all over google and the GSAP docs and can't seem to find any references as how to import extra eases like ExpoScale now in GSAP v3.

Previously:

import TimelineMax, { ExpoScaleEase } from 'gsap';
...
{ ease: ExpoScaleEase.config(1, 10, Expo.easeOut) }
...

 

Now:

import gsap, { ExpoScaleEase } from 'gsap';
...
{ ease: 'expoScale(1, 10, expo.out)' }
...

 

Also tried:

import gsap from 'gsap';
import { ExpoScaleEase } from 'gsap/EasePack';

 

Also...

Now assuming that its a global import like...

import 'gsap/EasePack';

... do we only need to import once in a whole react project or do we need to keep importing into each component that needs it?

 

Is this correct for the import? Seems odd to import an object and then never use it.
Also, it does not seem to work.

[OSUblake]

I already answered your question.

https://github.com/greensock/GSAP/issues/328

 

[OSUblake]

@ZachSaucier @GreenSock Can we get installation instruction added to the documentation page for every plugin/ease? Importing the EasePack is not obvious. 

 

[ZachSaucier]

@OSUblake I included a bit about loading the EasePack on the Installation page. Are there any other parts that are particularly different to load? Plugins are loaded in the same format as each other AFAIK so I don't think it's worth listing every single one's import. 

[iDVB]

Thanks @OSUblake @ZachSaucier!

 

Maybe simply adding to these call outs...

https://www.screencast.com/t/nTC0jlC4

 

something that just says "For examples of how to import this optional plugin/module please see..."

and then give the link to:  https://greensock.com/docs/v3/Installation

 

We spent a good deal of time searching and browsing around the docs for both v2 and v3 and did not come across the import directions on the install page.

 

[OSUblake]

9 hours ago, ZachSaucier said:

Plugins are loaded in the same format as each other AFAIK so I don't think it's worth listing every single one's import. 

 

The docs should show how to import EVERY plugin. How is someone supposed to know how to import a plugin if they don't know what name/path to use? Don't assume that people can just figure that out on their own.

 

I also think what I wrote here it kind of important, and should be mentioned. Not only about the errors, but yarn installation.

 

 

[OSUblake]

17 hours ago, ZachSaucier said:

Plugins are loaded in the same format as each other AFAIK so I don't think it's worth listing every single one's import. 

 

If today were my first day using gsap, and I wanted to import Draggable and the PhysicsPropsPlugin, I would probably try some variation of this. It looks like it should work.

 

import { gsap, Draggable, physicsProps } from "gsap";

Draggable.create("#box");

gsap.to(".foo", {
    duration: 2,
    physicsProps: {
        x: {velocity: 100, acceleration: 200},
        y: {velocity: -200, friction: 0.1}
    }
});