Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to import Premium gsap plugins using Webpack/er

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


Maybe its a silly question but i was wondering the best way to get gsap into our project.

Because i have paid the license, now i have a src/ folder with all the files.


Before that i was using nicely the npm/yarn package for the gsap free version.

But now i have to use the local ones ?


This doesn't look the best too keep my gsap plugins updated. Am i suppose to check the web for new versions ?

Or there is a way to load this "paid" plugins into my project as a npm package.


Thanks in advance.

Link to comment
Share on other sites

Sorry about any confusion or hassle that causes. There's really no way for us to efficiently and securely put the members-only plugins into NPM, so the best way to handle it is to simply download the zip from our site and either drop the plugins into the node_modules directory (well, inside the "gsap" folder of course) or point your build system at a folder containing those elsewhere. It should be pretty easy. In the zip, there's a "bonus-files-for-npm-users" folder so it should be obvious which files to us. We don't need to update the members-only plugins very often at all, so it's not as if you need to worry about missing lots of updates. We generally send out an email notification if there's anything major you need to know about. 


Thanks for joining the club! I assume you used a different account, right? (I don't see a membership associated with @hectorleon).


Happy tweening!

  • Like 1
Link to comment
Share on other sites

Hi again, yes i used to play with gsap free in Codepen and i finally got a license at my company :)  
So now i want to include it in my webpacker 
Rails + Webpacker for bundle.

The Point.
Makes more sense for me then to put the gsap folder into my build system ( never in node_modules, because i used to remove his content to run yarn install again in case some package miss a dependency )


If i use NPM gsap free packages

import 'gsap/TweenLite';          //OK import
import 'gsap/CSSPlugin';         //OK import
import 'gsap/ScrollToPlugin'; //OK import

But if i store gsap folder in my source folder

import '../js/gsap/uncompressed/TweenLite';                            //OK import
import '../js/gsap/uncompressed/plugins/CSSPlugin';           //  retun an error
import '../js/gsap/uncompressed/plugins/ScrollToPlugin';  //  retun an error
Failed to compile.
Module not found: Error can't resolve 'TweenLite'


All the files into the plugin folder return me an error.

Same if i try this

import TweenLite from  '../js/gsap/uncompressed/TweenLite';  //OK import
import '../js/gsap/uncompressed/plugins/CSSPlugin';           //  retun an error
import '../js/gsap/uncompressed/plugins/ScrollToPlugin';  //  retun an error



At the begining i thought was a webpacker issue, but now seems to me to be the files. The main differences is that in the first case i didn't use the files stored into the plugins folder. But in the second i don't have those files.



Any solution here would be much appreciated




Link to comment
Share on other sites

You're going to run into issues using a regular folder like that. Particularly when trying to import the bonus plugins because the require statements are going to be looking for a package named gsap. The path's aren't relative to the folder.




That's a recent change that was supposed to make it easier for users to get the plugins working from a regular folder, but it ended up breaking things for other people.


Another issue that has been popping up with regular folders is when people use Babel for modules, it's changing the exports, treating some of the files as ES modules, which they aren't, causing all sorts of problems. I've been seeing this in the output, which is the source of the problem.



Object.defineProperty(exports, "__esModule", {
  value: true



So what to do? You need to install gsap somehow. I know this isn't ideal, and it requires some extra work on your part, but you need to create your own package. It doesn't have to be a private repo or npm package. A simple, local folder works just as well. 



  • Like 2
  • Thanks 1
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.