Jump to content
Search Community

Loading TimelineLite Correctly With NPM / Webpack

Mr. Creative 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

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

 

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

@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!

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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