Loading TimelineLite Correctly With NPM / Webpack

[Mr. Creative 1 Likes (Newbie)]

I am refactoring and running cleanup on a production app, and optimizing dependencies.

 

We have a React component that uses GSAP for some transition-related stuff, but only the TimelineLite library. It's all simple stuff, without any eases or anything, so we have no need for any of the more complex GSAP items and can now scrub them out to optimize. 

 

Originally, we just imported the whole GSAP library via NPM like so:

 

import 'gsap';

 

Per the GSAP npm docs (https://www.npmjs.com/package/gsap)... 

 

Quote

The default (main) file is TweenMax which also includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and all of the eases...

 

Now, I'd like to trim the fat off our import, and switched to:

import { TimelineLite } from 'gsap';

 

However, this is compiling correctly but throwing the following client-side error:

Uncaught TypeError: _gsap.TimelineLite is not a constructor

 

Does anyone know why this is? Our weight savings from importing `TimelineLite` alone aren't huge, but they are worth doing. Do I need to import other parts of the GSAP libraries specifically?

----------

NOTES:

I have also tried this with no luck.

import { TweenLite, TimelineLite } from 'gsap'; 

 

Strangely, this does not work either:

import { TweenMax, TimelineLite } from 'gsap';

 

but this does (for obvious reasons):

 import { TweenMax } from 'gsap';

 

Here is the animation we are using, super basic:

 

      new TimelineLite()
        .to('#urlCopyMessage', 0, { visibility: 'visible', opacity: 1 })
        .fromTo('#urlCopyMessage', 0.35,
          { opacity: 0, y: 20 },
          { opacity: 1, y: -30 }
        )
        .to('#urlCopyMessage', 0.35,
          { opacity: 0, delay: 0.25 }
        )
        .to('#urlCopyMessage', 0, { visibility: 'hidden' });

 

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

You're on the right path, just missing one component : CSSPlugin.

 

TimelineLite sequences individual TweenLite tweens so you need TweenLite any time you use TimelineLite (as you found out). 

Since you are tweening the css properties of DOM elements you need CSSPlugin.

 

I know you probably want to run as lean and mean as possible, but IMHO loading all of TweenMax.min.js is as easy as it gets. TweenLite, TimelineLite and CSSPlugin together make up the majority of the TweenMax.min.js file so the filesize savings of only loading those 3 is going to be fairly insignificant. 

 

 

--

 

Side note I see you are tweening visibility to "visibilble" and opacity to 1. Take a look at autoAlpha as it handles both properties for you.

For 0-duration tweens you can also just use set().

 

.set('#urlCopyMessage', {autoAlpha:1})

 

[Mr. Creative 1 Likes (Newbie)]

@Carl - thanks for the clarification! Everything is working now. 

As far as weight savings, I agree - and we're shipping to production with TweenMax.min currently. No reason to do anything else, until you get to the final stages of optimizing. Those little savings all add up  

 

PS - Thanks for the autoAlpha tip - I had forgotten that it existed!

[Carl 9,066 Likes (Superhero)]

Awesome! glad it helped.

[dgmldr 0 Likes (Newbie)]

Adding the CSSPlugin import doesn't solve this error issue for me:

 

Uncaught TypeError: _gsap.TimelineLite is not a constructor

 

[OSUblake 9,990 Likes (Superhero)]

If you're not using any member plugins, I would just use a CDN.

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js