How To Use ScrollMagic with GSAP and Webpack

Question

In order to use ScrollMagic with GSAP, you need to load the animation.gsap.js plugin. With Webpack you would do something like this to accomplish that (assuming you use the CommonJS syntax and installed everything with npm):

var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');

To make sure that this actually works, you have to add an alias to your Webpack configuration, so that Webpack knows where the plugin lives.

resolve: {
  alias: {
    'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
  }
}

Unfortunately, ScrollMagic keeps throwing an error, when you are using this configuration and the CommonJS syntax like above.

(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

Answer 1

I was having the same issue and found this question.

For those using Webpack 5 I believe imports-loader is out of date so according to the webpack docs add this code to your js rule to disable AMD:

{
            test: /\.js$/,
            include: /node_modules/,
            parser: {
                amd: false
            }
        }

documentation: https://webpack.js.org/configuration/module/#ruleparser