Jump to content
GreenSock

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

How to import Premium gsap plugins using Webpack/er

Recommended Posts

Hello,

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.

Share this post


Link to post
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

Share this post


Link to post
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

 

 

 

Share this post


Link to post
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.

 

require("gsap/TweenLite");

 

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.

https://github.com/webpack/webpack/issues/706

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×