Jump to content
Search Community

NPM Gsap & import

Torrfura 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'm using gsap through NPM, packaged with webpack.


If I do 

import TweenLite from 'gsap/TweenLite';

I don't have access to the dom elements, I get thrown an error. 

But if I import as following:

import TweenLite from 'gsap';

It works, but then everything is included in the package, TweenMax etc... 


Anyone stumbled upon this problem?

Link to comment
Share on other sites

I assume "I don't have access to DOM elements" means that you're trying to animate CSS properties, right? That requires CSSPlugin which is included inside of TweenMax but if you're only using TweenLite, you need to make sure you load CSSPlugin too in order to animate CSS properties. 


The "gsap" package actually points to TweenMax (that's what "main" is in the package.json), thus when you did this:

import TweenLite from "gsap";

It was loading TweenMax (and exporting TweenLite from that). In other words, CSSPlugin was along for the ride :) 


When you did this:

import TweenLite from "gsap/TweenLite";

...that was ONLY getting you TweenLite (no CSSPlugin...no TweenMax). 


So all you've got to do is *also* load CSSPlugin (in addition to TweenLite) if your goal is to animate CSS properties. 


Or just stick with using the "gsap" (TweenMax). 


Make sense?

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