Installing Scrollmagic and gsap with npm/webpack

[bethshook]

I have read and tried seemingly every approach that exists to import ScrollMagic with gsap while using webpack on the frontend, but I cannot get past this error for the life of me: (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

Can you please share the current best practice for this, in terms of imports, aliases, and loaders?

[johanholm]

You just have to import the gsap plugin like this

import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap";

---

If you wanted to you could create a webpack alias and then you just import like this;

import "animation.gsap";

And to create the alias in webpack: webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
    }
  }
};

If you are using vue-cli like I am you will have to create a vue.config.js in your project root instead vue.config.js (only if you're using vue-cli)

const path = require('path');

module.exports = {
  //...
  configureWebpack: {
    resolve: {
      alias: {
        "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
      }
    }
  }
};

[k33n8nc]

Make sure to install (latest) gsap so that u can use it trough scrollmagic. yarn add gsap or via npm: npm install gsap

after that, make sure to FIRST load gsap and SECOND load scrollmagic! In ES6 you van load gsap via: import { TweenMax} from "gsap/TweenMax";

If you need more than TweenMax you can comma separate and call anything out of the gsap folder located in your node_modules folder. For example: import { TweenMax, TimelineLite, Power2, Elastic, CSSPlugin } from "gsap/TweenMax";

[eliawk]

@johanholm I've follow your advice but I still get the same error

ERROR in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '../node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/js/home.js
 @ ./src/index.js

ERROR in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TweenMax' in '../node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/js/home.js
 @ ./src/index.js

the error is at line 31 of animation.gsap.js, this one: define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory);

I don't know how to fix this on webpack., if anyone have a clue..

[k33n8nc]

It cant resolve TweenMax and it cant resolve TimelineMax cause they are loaded after scrollmagic is loaded. So first load gsap (TweenMax and TimelineMax) then load scrollmagic.

[eliawk]

It cant resolve TweenMax and it cant resolve TimelineMax cause they are loaded after scrollmagic is loaded. So first load gsap (TweenMax and TimelineMax) then load scrollmagic.

this resolve my problem: https://github.com/janpaepke/ScrollMagic/issues/665

[ilkinnamazov]

Hi All,

After escalating this issue for 1 month I guess I found great solution. So this issue shows that in React environment we can not get animation.gsap file. This fix does not require any webpack changes except animation.gsap file itself.

1. Find these files in "node_module" directory tree (may have different location on you PC) and import it in this way to your working JS file (App.js for example). import "../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; import "../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";

2. Go to animation.gsap and add these two lines of code at the beginning of file. import { TimelineMax, TweenMax, TweenLite} from "gsap/all"; import ScrollMagic from "scrollmagic";

3. Go to debug.addIndicators and add this line of code at the beginning of file (in case if you need indicator debugger, but I strongly suggest not to skip this step). import ScrollMagic from "scrollmagic";

4. In animation.gsap find first function and delete all "root" variables and change them to variables that I provided below. ( you should find 8 of them).

Before:

(function (root, factory) {
    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);
    }
}

After:

(function (root, factory) {
    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(ScrollMagic || (jQuery && jQuery.ScrollMagic), TweenMax || TweenLite, TimelineMax || TimelineLite);
    }
}

5. In debug.addIndicators also delete all "root" variables ( you should find 4 of them ) and change them to variables that I provided below.

Before:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['ScrollMagic'], factory);
    } else if (typeof exports === 'object') {
            // CommonJS
            factory(require('scrollmagic'));
    } else {
            // no browser global export needed, just execute
        factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic));
    }
}

After:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['ScrollMagic'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('scrollmagic'));
    } else {
        // no browser global export needed, just execute
        factory(ScrollMagic || (jQuery && jQuery.ScrollMagic));
    }
}

I hope this solution will work for you. In any case you can reach me for help.

[ayyoobcastro]

3. import ScrollMagic from "scrollmagic";

This is not working for me. I did the same code you've done. just changed the path to my path. React.js project

[ilkinnamazov]

Can you attach screenshot or piece of code in order to help you ?

[dmetree]

Can you attach screenshot or piece of code in order to help you ?

Hi #ilkinnamazov I've done as you say. But I get this mistake:

Uncaught TypeError: Cannot read property 'ScrollMagic' of undefined at animation.gsap.js:44 at Module../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js

In animations.gsap.js import ScrollMagic from "scrollmagic"; is defined but never used.

Would be great if you have some ideas

[ilkinnamazov]

Hi @dmetree please see updated comment with fix for your issue.

[ilkinnamazov]

@dmetree If you got any issue please hit me up at Discord chat : ilkinnamazov#7208 (I can speak Russian).

[dmetree]

@dmetree If you got any issue please hit me up at Discord chat : ilkinnamazov#7208 (I can speak Russian).

Ahhhahhaa! It works! Thank you! @ilkinnamazov

[ayyoobcastro]

Hi All,

After escalating this issue for 1 month I guess I found great solution. So this issue shows that in React environment we can not get animation.gsap file. This fix does not require any webpack changes except animation.gsap file itself.

1. Find these files in "node_module" directory tree (may have different location on you PC) and import it in this way to your working JS file (App.js for example). import "../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; import "../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";
2. Go to animation.gsap and add these two lines of code at the beginning of file. import { TimelineMax, TweenMax, TweenLite} from "gsap/all"; import ScrollMagic from "scrollmagic";
3. Go to debug.addIndicators and add this line of code at the beginning of file (in case if you need indicator debugger, but I strongly suggest not to skip this step). import ScrollMagic from "scrollmagic";
4. In animation.gsap find first function and delete all "root" variables and change them to variables that I provided below. ( you should find 8 of them).

Before:

(function (root, factory) {
    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);
    }
}

After:

(function (root, factory) {
  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(ScrollMagic || (jQuery && jQuery.ScrollMagic), TweenMax || TweenLite, TimelineMax || TimelineLite);
  }
}

1. In debug.addIndicators also delete all "root" variables ( you should find 4 of them ) and change them to variables that I provided below.

Before:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['ScrollMagic'], factory);
    } else if (typeof exports === 'object') {
            // CommonJS
            factory(require('scrollmagic'));
    } else {
            // no browser global export needed, just execute
        factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic));
    }
}

After:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module.
      define(['ScrollMagic'], factory);
  } else if (typeof exports === 'object') {
      // CommonJS
      factory(require('scrollmagic'));
  } else {
      // no browser global export needed, just execute
      factory(ScrollMagic || (jQuery && jQuery.ScrollMagic));
  }
}

I hope this solution will work for you. In any case you can reach me for help.

it works perfectly thank you for the help.

[kencue]

Just noting here that I fixed this issue with this error

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

by using the solution presented in #665.

I tried the solution from @ilkinnamazov but it requires modifying animation.gsap itself, and since my project doesn't track node_modules and I am working with other people, I can't modify any dependencies directly.

Thus, I installed import-loader and added import "imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; wherever I was using ScrollMagic with setTween.

I hope this helps for cases where one can't modify animation.gsap.js directly.

[anag004]

I found an npm package (published recently) which wraps ScrollMagic with animation.gsap. It solved the problem for me. The package is called scrollmagic-plugin-gsap and can be found here.

[syed-haroon]

Use ScrollScene, it's an extra layer on top of ScrollMagic as well as using IntersectionObserver to achieve similar effects. https://github.com/jonkwheeler/ScrollScene

[siasjustin]

from @anag004 > I found an npm package (published recently) which wraps ScrollMagic with animation.gsap. It solved the problem for me. The package is called scrollmagic-plugin-gsap and can be found here.

This is the best news in a long time! Great find.

[syed-haroon]

@siasjustin gsap3 is released and now ScrollMagic is compatible with it but scrollmagic-plugin-gsap is doing thing in old way, eg: import { TweenMax, TimelineMax } from "gsap";

so please check https://github.com/jonkwheeler/ScrollScene

[sandinodev]

from @anag004 > I found an npm package (published recently) which wraps ScrollMagic with animation.gsap. It solved the problem for me. The package is called scrollmagic-plugin-gsap and can be found here.

This is the best news in a long time! Great find.

this works for me. Thanks!

[k33n8nc]

This is overdue, since GSAP 3.0 is released and now offers the scrollTrigger plugin. No more scroll hijacking but full control over the animation playhead :)

[AlexPlunkr]

Hello Ikinnamazov

I am using gsap with Angular 8. I am following your advice to fix gsap and scrollmagic. You say that we can delete the .root variables in 'animation.gsap' file. And also you say to change them to variables you provide. But in your example you just removed .root variable. What variable should I replace instead of '.root' ? Thanks in advance.

[k33n8nc]

@AlexPlunkr if you already pull in gsap... why don't you go with the scrollTrigger plugin? https://greensock.com/scrolltrigger/

[AlexPlunkr]

Thanks a lot Baggio for writing to me and thanks for the advice!! I had not notice your comment about the new Scroll trigger plugin!! I will try it!!

[Nimash68]

Hi @ilkinnamazov

That's great! Thank you