Jump to content
Search Community

Gsap 3 and ScrollMagic with npm

salyone test
Moderator Tag

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 comment
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 comment
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 comment
Share on other sites

  • 1 month later...
  • 1 month later...

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 comment
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 comment
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.
×
×
  • Create New...