14

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

5 Answers 5

20

The Solution

You have to tell Webpack to stop using the AMD syntax by adding the following loader that deactivates the define() method.

// Webpack 4+
module: {
  rules: [
    { parser: { amd: false }}
  ]
}

// Webpack <= 3
// Don’t forget to install the loader with `npm install imports-loader --save-dev`
module: {
  loaders: [
    { test: /\.js$/, loader: 'imports-loader?define=>false'}

    // Use this instead, if you’re running Webpack v1
    // { test: /\.js$/, loader: 'imports?define=>false'}
  ]
}

Why?

The problem lies in the fact that Webpack supports the AMD (define) and CommonJS (require) syntax. That is why the following factory script within plugins/animation.gsap.js jumps into the first if statement and fails silently. That is why setTween() etc. are never added to the ScrollMagic Constructor.

By telling Webpack not to support the AMD syntax (using the loader mentioned above), the plugin jumps into the second if statement correctly, embracing the CommonJS syntax.

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory);
} else if (typeof exports === 'object') {
    // CommonJS
    // Loads whole gsap package onto global scope.
    require('gsap');
    factory(require('scrollmagic'), TweenMax, TimelineMax);
} else {
    // Browser globals
    factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.TweenMax || root.TweenLite, root.TimelineMax || root.TimelineLite);
}

I hope this prevents other people from spending a whole evening trying to figure out what is going on.

2
  • 1
    Just FYI, missing $ in regex: { test: /\.js$/, loader: 'imports?define=>false'} Aug 4, 2016 at 20:23
  • 2
    Just want to add that if your trying to use this soultion with webpack 5 it wont work, well at least it didn't for me. I ended up adding, parser: { amd: false } and that did the trick. docs link : webpack.js.org/configuration/module/#ruleparser
    – K4S3
    Jul 29, 2021 at 14:41
4

The solution I came across that doesn't require you to alter your webpack.config.js file and actually works for me can be found here: https://github.com/janpaepke/ScrollMagic/issues/665

The gist of it is to make sure you have ScrollMagic and GSAP added via npm (hopefully that's obvious) as well as imports-loader:

npm install --save scrollmagic gsap
npm install --save-dev imports-loader

Then in the file you want to use ScrollMagic with GSAP do the following imports:

import { TimelineMax, TweenMax, Linear } from 'gsap';
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

Using Webpack 4.x and imports-loader 0.8.0

3

medoingthings solution has since changed syntax to include "-loader" suffix.

module: {
 loaders: [
   { test: /\.js$/, loader: 'imports-loader?define=>false'}
 ]
}

https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

0
2

In imports-loader 1.1.0, the syntax of the configuration has changed a bit, so now you have to use the following to get the ScrollMagic plugins to work:

{
  test: [
    path.join(config.root, '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic.js'),
    path.join(config.root, '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
  ],
  use: [
    {
      loader: 'imports-loader',
      options: {
        additionalCode: 'var define = false;'
      }
    }
  ]
}

Hopefully this helps others.

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.