Search code examples
node.jsreactjsnpmwebpackgsap

NPM / Webpack don't load GSAP TimelineLite Correctly

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

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 import { TweenLite, TimelineLite } from 'gsap'; with no luck. Strangely, import { TweenMax, TimelineLite } from 'gsap'; does not work either, but import { TweenMax } from 'gsap'; does.

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' });
Solution

  • After playing around with the setup and talking with some of the GSAP maintainers, I managed to get things working.

    Turns out TimelineLite is dependent on a number of GSAP's other internal packages, like TweenLite and CSSPlugin - and you have to load them independently, too, and in the right order.

    I found that the easiest way to import TimelineLite, alone, with its basic dependencies, is directly via the GSAP npm folder structure:

    import TimelineLite from 'gsap/TimelineLite';

    This works as expected and provides a 74KB weight saving over the TweenMax library as a whole. (Haha)