Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
salyone

Gsap 3 and ScrollMagic with npm

Recommended Posts

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

Link to post
Share on other sites

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()

 

 

  • Like 2
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites
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. 

 

  • Like 2
Link to post
Share on other sites

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

 

image.thumb.png.dd06624e07bb0695f06384f1de0b80a7.png

  • Like 1
Link to post
Share on other sites

Hey @jonkwheeler 

 

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

Link to post
Share on other sites

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
Link to post
Share on other sites

@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)
  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×