TweenMax not found in the latetst version of GSAP.

[Index Out Of Bound]

Hi. I am new to GSAP and I am trying to use GSAP with React. I want to animate a particular element as I scroll and the animation state depends on the scroll progress.

 

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

 

But while importing the above I am getting an error stating that TweenMax not found. I have read many forms related this where it is mentioned this is not a GSAP issue. But when I downgraded the GSAP version to 2.1.3, it worked. But when I restored to the latest version (3.2.6 I guess) it stopped working. I didn't change the ScrollMagic version which is 2.0.7.

 

I have attached a link to the sandbox. Please help me resolve this issue.

See the Pen by s (@s) on CodePen

[whipstitch]

Pretty sure in v3 you want to

import gsap from 'gsap' 

I'm not using the latest version, but I code a lot of gatsby and am pretty sure I read that somewhere in a forum .

[ZachSaucier]

Hey Index Out Of Bound and welcome to the GreenSock forums!

 

2 hours ago, Index Out Of Bound said:

I have read many forms related this where it is mentioned this is not a GSAP issue. But when I downgraded the GSAP version to 2.1.3, it worked. But when I restored to the latest version (3.2.6 I guess) it stopped working. I didn't change the ScrollMagic version which is 2.0.7.

Yes, this is a ScrollMagic issue because its current live version is not compatible with GSAP. Given ScrollMagic is the one that uses GSAP, not the other way around, this is not GSAP's fault. In fact, we don't really recommend using ScrollMagic. There are ways to create the same effect without using it. 

 

GSAP is in the process of making its own scroll plugin! Unfortunately it's not quite ready yet. In the mean time you can create scroll-based effects by using the scroll position or by using the intersection observer API. Here's a basic demo using the scroll position:

See the Pen BaNPoEK by GreenSock (@GreenSock) on CodePen

 

And here's an article that talks about using the intersection observer API with GSAP: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 

 

For more about using ScrollMagic, read this thread: