Gsap 3 and ScrollMagic with npm

[salyone 2 Likes (Newbie)]

Hello
When i import scrollMagic files via npm , it gives me error and says: "Uncaught ReferenceError: TweenMax is not defined" , in Gsap2 I was importing TweenMax by hand and it helped,  but in Gsap3 i don't know how to do it, can you help me? 

Thank you

[OSUblake 18,474 Likes (Superhero)]

ScrollMagic isn't a gsap product. You should open an issue with them. 

https://github.com/janpaepke/ScrollMagic

 

Tell them that being able to register gsap would probably be the best solution for npm.

 

Something like this.

import { gsap } from "gsap";
import ScrollMagic from "scrollmagic";
ScrollMagic.registerGSAP(gsap);

 

GSAP has to do do something similar to that for the PixiPlugin when using modules.

https://greensock.com/docs/v3/Plugins/PixiPlugin/static.registerPIXI()

 

 

[OSUblake 18,474 Likes (Superhero)]

You can try this. No guarantees though, and it is not a good work around. The order in which files run is important.

 

Import and install gsap in one file. Let's call this "install-gsap.js"

import { gsap } from "gsap";
gsap.install(window); // This will make everythng global.

 

And then do your ScrollMagic stuff in another file.

import "./install-gsap.js";
import ScrollMagic from "scrollmagic";

// Now do your ScrollMagic stuff.

 

But, it would be better if ScrollMagic changed stuff on their end to provide a way to work with gsap 3.

 

cc @GreenSock @ZachSaucier gsap.install() is not in the docs.

[salyone 2 Likes (Newbie)]

Thank you for your answer... I hope that ScrollMagic will soon update the library..

[OSUblake 18,474 Likes (Superhero)]

Did you try my work around above? I didn't test it out, but It should work in theory.

[OSUblake 18,474 Likes (Superhero)]

I added my response on Github.

https://github.com/janpaepke/ScrollMagic/issues/918#issuecomment-555432639

 

@GreenSock Has onOverwrite been replaced by something else? I see these warning when using ScrollMagic.

 

 

 

[ZachSaucier 7,128 Likes (Superhero)]

4 hours ago, OSUblake said:

Has onOverwrite been replaced by something else?

Quote

onOverwrite was removed in favor of an onInterrupt callback that fires whenever an animation is killed before it completes. 

 

[jonkwheeler 1 Likes (Newbie)]

@ZachSaucier @OSUblake The above says "Sorry, we can't show this content because you do not have permission to see it."

[OSUblake 18,474 Likes (Superhero)]

Oh, sorry about that. That links to a private forum, but this is all it says.

 

[jonkwheeler 1 Likes (Newbie)]

@OSUblake Can you let me know if this has any glaring issues to you? https://github.com/jonkwheeler/ScrollScene

[OSUblake 18,474 Likes (Superhero)]

Hey @jonkwheeler 

 

I'll be sure to check it out next week. Unfortunately, I'm limited to mobile ATM. 😢

[cTigerDev 2 Likes (Newbie)]

I was forwarded to this topic with a similar issue. I have a current build with working animations with scrollmagic and GSAP3 but still getting console warnings. Is the above from @jonkwheeler the only known way to clear these aside from ditching scrollmagic all together?

Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin() gsap-core.js:83:17

[jonkwheeler 1 Likes (Newbie)]

@cTigerDev I'd def try out the plugin I wrote to get around this. https://github.com/jonkwheeler/ScrollScene

 

But also maybe check out your imports. They should look something like this when using gsap plugins.

 

import { gsap } from 'gsap'

// You have to reference the 'gsap/dist/pluginName' and NOT 'gsap/pluginName' so it bundles correctly.

import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'

// without this line, ScrollToPlugin may get dropped by your bundler (tree shaking)...

gsap.registerPlugin(ScrollToPlugin)