React with GSAP and ScrollMagic - Tween is not valid

Question

I'm trying to trigger the reveal animation of my image for each section scroll and i'm doing that with GSAP + ScrollMagic.

The problem is that i'm getting an error saying that the the tween object is not valid.

ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

And that's the animation code that i want to trigger when the component mounts:

   useEffect(() => {
    const scrollControler = new ScrollMagic.Controller();
    const imageReveal = CSSRulePlugin.getRule(".image-container:after");
    const tl = new TimelineLite();
    const tween = tl.to(imageReveal, {
      duration: 1,
      cssRule: { width: "0%" },
      ease: "power2.easeInOut",
      paused: true
    });

    new ScrollMagic.Scene({
      triggerElement: ".image-section",
      triggerHook: 0
    })
      .setTween(tween)
      .addTo(scrollControler);
  }, []);

Why my tween is invalid?

That's the sandbox with the code (Go to the /scroll route): https://codesandbox.io/embed/reveal-effect-with-reactjs-and-greensock-5i8pp?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Update: I had to install the scrollmagic-plugin-gsap dependency to make Scroll Magic work with the GSAP 3.

In the beggining of the file we have to register Scroll Magic with Gsap. If not, errors like "TweenMax was not defined" will appear.

import * as ScrollMagic from "scrollmagic";
import { gsap } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

Instead of creating a timeline, you have to pass directly a tween to the setTween method of the Scene.

.setTween(imageReveal, 0.4, { scale: 0, autoAlpha: 0 })