Using jQuery GSAP plugin with ES6 import/export

[lvl99]

I'm currently trying to use the jquery.gsap.js with jQuery and ES6 import module (via babel).

I noticed in the code for the jquery.gsap.js doesn't have any CommonJS/AMD code, but I use browserify with browserify-shim, which should technically work, but it doesn't seem to be working with the automated shim solution.

ScrollMagic is similar to GSAP as in it has a jquery.ScrollMagic.js file, however the minor difference is that theirs already has the CommonJS/AMD shim solution built in. I currently get no issues from that (maybe perhaps because it errors on GSAP before it can get to ScrollMagic...).

Since it breaks on GSAP ("Uncaught ReferenceError: jQuery is not defined"), I assume that perhaps it's something to do with the fact that the jquery.gsap.js file doesn't include the CommonJS/AMD code. If someone knows any better or has any experience compiling all these various plugins together please let me know — I'm currently at a loss!

I think the jquery.gsap.js plugin code would benefit from CommonJS/AMD code to include the TweenLite and CSSPlugin modules too (it currently assumes they are available as globals).

Here's a snippet of what I'm trying to achieve:

In my package.json:

{ 
  // ...
  "browser": {
      "gsap.TweenLite": "./node_modules/gsap/src/uncompressed/TweenLite.js",
      "gsap.TweenMax": "./node_modules/gsap/src/uncompressed/TweenMax.js",
      "gsap.TimelineLite": "./node_modules/gsap/src/uncompressed/TimelineLite.js",
      "gsap.TimelineMax": "./node_modules/gsap/src/uncompressed/TimelineMax.js",
      "gsap.CSSPlugin": "./node_modules/gsap/src/uncompressed/plugins/CSSPlugin.js",
      "gsap.plugin.jquery": "./node_modules/gsap/src/uncompressed/jquery.gsap.js",
      "scrollmagic.plugin.jquery": "./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic.js",
      "scrollmagic.plugin.gsap": "./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"
    },
    "browserify": {
      "transform": ["browserify-shim"]
    },
    "browserify-shim": {
      "gsap.plugin.jquery": {
        "depends": [
          "jquery:jQuery",
          "gsap.TweenLite:TweenLite",
          "gsap.CSSPlugin:CSSPlugin"
        ]
      },
      "scrollmagic.plugin.gsap": {
        "depends": [
          "jquery:jQuery",
          "gsap.TweenLite:TweenLite",
          "gsap.TweenMax:TweenMax",
          "gsap.TimelineLite:TimelineLite",
          "gsap.TimelineMax:TimelineMax"
        ]
      }
    }
  },
  // ...
}

In my app JS:

  import jQuery from "jquery"
  import "gsap.plugin.jquery" // Breaks here
  import "scrollmagic.plugin.jquery"
  import "scrollmagic.plugin.gsap"

  // ...

[lvl99]

A quick edit and test adapting the CommonJS/AMD code from jquery.ScrollMagic.js into jquery.gsap.js seemed to work for me. I've made a pull request in case you want to include it into the codebase, or use it as a talking point.

I'm sure a lot more tests will need to be made before it can be integrated, since I only tested my single use case and not any existing/previous use cases that your plugin may experience.

[jackdoyle]

Thanks for the info, @lvl99. Frankly, it's hard for us to keep up with all the build systems and test every scenario, but I'm sure your example may be useful for others at some point. We haven't seen a ton of usage of the jquery plugin out in the wild; I'm curious what the draw was for you. Were you trying to avoid using the regular GSAP syntax? Does it seem too intimidating? Got an existing jQuery.animate() project that you're just trying to speed up a bit?

[fregante]

@lvl99 if you use GSAP 1.19.1+ you likely don't need any of that config.

Refer to the updated docs: https://github.com/greensock/GreenSock-JS#npm

Skip the config and just use

import jQuery from "jquery"
window.jQuery = jQuery; // jquery.gsap.js wants a global, give it a global
import "gsap"
import "gsap/jquery.gsap"
import "scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic"
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"

I just tried with browserify+babelify and it compiles correctly.

[codeofsumit]

@bfred-it thanks this helped although I'm getting

These dependencies were not found:

* TimelineMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
* TweenMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js

To install them, you can run: npm install --save TimelineMax TweenMax

Here's my import code

import 'gsap';
import ScrollMagic from 'scrollmagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

won't work even if I use ES6 destructuring for the import of those:

import { TweenMax, TimelineMax } from 'gsap';
import ScrollMagic from 'scrollmagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

any idea why this isn't working for me?

[codeofsumit]

nevermind... I touched webpack 😞

[sebastianjung]

@codeofsumit How did you manage to get it working? I am facing the exact same problem. Any help would be appreciated.

Thanks :)

[bronsonavila]

@sebastianjung Probably too late for this to help you, but hopefully other people can benefit from this information. I had the same error in a project using Webpack with Laravel Mix. I added the following code to my webpack.mix.js file:

const mix = require('laravel-mix')

mix.webpackConfig({
  resolve: {
    alias: {
      "TweenMax": path.resolve(
        'node_modules',
        'gsap/src/uncompressed/TweenMax.js'
      ),
      "TimelineMax": path.resolve(
        'node_modules',
        'gsap/src/uncompressed/TimelineMax.js'
      ),
      "ScrollMagic": path.resolve(
        'node_modules',
        'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'
      ),
      "animation.gsap": path.resolve(
        'node_modules',
        'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'
      )
    }
  }
})

Then I added the following imports to the JS file that will be handling the animation:

import 'TweenMax'
import 'TimelineMax'
import ScrollMagic from 'scrollmagic'
import 'animation.gsap'

Everything was able to compile successfully after doing so.