Installing Scrollmagic and gsap with npm/webpack #842

bethshook · 2018-10-23T22:26:56Z

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 · 2018-10-24T17:24:46Z

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 · 2018-10-27T01:31:06Z

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 · 2018-11-21T18:49:20Z

@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 · 2018-11-21T18:58:53Z

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 · 2018-11-21T21:09:18Z

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: #665

ilkinnamazov · 2019-11-25T16:31:29Z

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.

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";
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";
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";
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);
	}
}

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 · 2019-11-26T11:29:26Z

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 · 2019-11-26T12:15:12Z

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

dmetree · 2019-11-26T15:42:26Z

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 · 2019-11-26T16:05:14Z

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

ilkinnamazov · 2019-11-26T16:07:23Z

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

dmetree · 2019-11-26T17:31:25Z

@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 · 2019-11-27T07:28:21Z

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.

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";

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";

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";

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);
	}
}
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 · 2019-11-27T09:47:51Z

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 · 2020-01-11T10:20:04Z

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 · 2020-02-06T19:51:49Z

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 · 2020-02-06T21:14:46Z

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 · 2020-02-07T12:50:07Z

@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 · 2020-04-04T16:09:17Z

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 · 2020-06-14T20:06:45Z

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 · 2020-09-25T23:16:02Z

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 · 2020-09-25T23:39:29Z

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

AlexPlunkr · 2020-09-28T15:44:54Z

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 · 2021-07-07T12:23:28Z

Hi @ilkinnamazov

That's great! Thank you

AjayPoshak mentioned this issue Feb 8, 2020

Fix/scrollmagic build issue rupesx26/findcreative-dev#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Installing Scrollmagic and gsap with npm/webpack #842

Installing Scrollmagic and gsap with npm/webpack #842

bethshook commented Oct 23, 2018

johanholm commented Oct 24, 2018

k33n8nc commented Oct 27, 2018

eliawk commented Nov 21, 2018

k33n8nc commented Nov 21, 2018

eliawk commented Nov 21, 2018

ilkinnamazov commented Nov 25, 2019 •

edited

Loading

ayyoobcastro commented Nov 26, 2019 •

edited

Loading

ilkinnamazov commented Nov 26, 2019

dmetree commented Nov 26, 2019

ilkinnamazov commented Nov 26, 2019

ilkinnamazov commented Nov 26, 2019

dmetree commented Nov 26, 2019 •

edited

Loading

ayyoobcastro commented Nov 27, 2019

kencue commented Nov 27, 2019

anag004 commented Jan 11, 2020

syed-haroon commented Feb 6, 2020

siasjustin commented Feb 6, 2020 •

edited

Loading

syed-haroon commented Feb 7, 2020

sandinodev commented Apr 4, 2020

k33n8nc commented Jun 14, 2020

AlexPlunkr commented Sep 25, 2020

k33n8nc commented Sep 25, 2020

AlexPlunkr commented Sep 28, 2020

Nimash68 commented Jul 7, 2021

Installing Scrollmagic and gsap with npm/webpack #842

Installing Scrollmagic and gsap with npm/webpack #842

Comments

bethshook commented Oct 23, 2018

johanholm commented Oct 24, 2018

k33n8nc commented Oct 27, 2018

eliawk commented Nov 21, 2018

k33n8nc commented Nov 21, 2018

eliawk commented Nov 21, 2018

ilkinnamazov commented Nov 25, 2019 • edited Loading

ayyoobcastro commented Nov 26, 2019 • edited Loading

ilkinnamazov commented Nov 26, 2019

dmetree commented Nov 26, 2019

ilkinnamazov commented Nov 26, 2019

ilkinnamazov commented Nov 26, 2019

dmetree commented Nov 26, 2019 • edited Loading

ayyoobcastro commented Nov 27, 2019

kencue commented Nov 27, 2019

anag004 commented Jan 11, 2020

syed-haroon commented Feb 6, 2020

siasjustin commented Feb 6, 2020 • edited Loading

syed-haroon commented Feb 7, 2020

sandinodev commented Apr 4, 2020

k33n8nc commented Jun 14, 2020

AlexPlunkr commented Sep 25, 2020

k33n8nc commented Sep 25, 2020

AlexPlunkr commented Sep 28, 2020

Nimash68 commented Jul 7, 2021

ilkinnamazov commented Nov 25, 2019 •

edited

Loading

ayyoobcastro commented Nov 26, 2019 •

edited

Loading

dmetree commented Nov 26, 2019 •

edited

Loading

siasjustin commented Feb 6, 2020 •

edited

Loading