GSAP/Scrollmagic in React: ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

[fl0w86]

Hi,

after hours of fiddling about I can't seem to overcome this problem. I am trying to get Scrollmagic to trigger a GSAP animation in a React component.

The console logs this error: (ScrollMagic.Scene) -> (animation.gsap) -> ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

These are my imports:

import Scrollmagic from 'scrollmagic'
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import { TweenMax, TweenLite } from 'gsap'
ScrollMagicPluginGsap(Scrollmagic, TweenMax, TweenLite);

This is my test component:

const Section = () => {

    const animate = useRef()
    const trigger = useRef()

    const controller = new Scrollmagic.Controller();

    var scene = new Scrollmagic.Scene({
        triggerElement: trigger.current
    })
        .setTween(animate.current, 1, { y: 300 })
        .addTo(controller)

    return (
        <div style={{ "backgroundColor": "grey", "width": "90vw", "height": "1000px" }}>
            <Text ref={trigger} >Trigger</Text>
            <Box ref={animate} />
        </div>
    )
}

Text and Box are just styled components I am using here.

I found an issue from 2014 which had been fixed so it can't be that. After hours of researching this problem I could really use some help and hope I am not overlooking something trivial.

[bojandurmic]

Hi!

The reason we are experiencing this issue is because GSAP was updated to version 3, which introduced huge changes to their API. This means, unfortunately, version 3 is not yet supported by ScrollMagic.

What you can do for now is install version 2.1.3 of GSAP, by using npm install gsap@2.1.3, until ScrollMagic updates the GSAP plugin to be used with new version.

[fl0w86]

And there I was hoping I wouldn't overlook anything trivial. Cheers for that, it does work in 2.1.3. Looking forward to the working update for gsap 3. Thanks again.