React with GSAP and ScrollMagic - Tween is not valid

[Laura Beatris]

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 section component mounts:

useEffect(() => {
const scrollControler = new ScrollMagic.Controller();
const imageReveal = CSSRulePlugin.getRule(".image-container:after");
const tl = new TimelineLite();


tl.to(imageReveal, {
duration: 1,
cssRule: { width: "0%" },
ease: "power2.easeInOut"
});


new ScrollMagic.Scene({
triggerElement: ".image-section",
duration: 100,
offset: 200,
reverse: false
})
.setTween(tl)
.addTo(scrollControler);
}, []);

 

Why my tween is invalid? 

The version of GSAP i'm using if 3.2.3 and i had some difficult to configure it with the ScrollMagic dependency. 

 

That's the sandbox with the code (Go to the /scroll route which has the ScrollExample component): https://codesandbox.io/s/reveal-effect-with-reactjs-and-greensock-3qfx8

 

See the Pen by s (@s) on CodePen.

[OSUblake]

1 hour ago, Laura Beatris said:

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

 

I don't see that error. I can't even scroll your demo.

 

1 hour ago, Laura Beatris said:

The version of GSAP i'm using if 3.2.3 and i had some difficult to configure it with the ScrollMagic dependency. 

 

ScrollMagic isn't a gsap product, nor is it actively maintained. Use at your own risk.

 

Some people have come up with their own solutions and workarounds.

 

 

 

 

Side note. You no longer need to import TweenLite, TweenMax, TimelineLite, or TimelineMax. Just import gsap.

 

 

And using CSS variables would probably be a better solution than using the CSSRulePlugin. See the note right before the FAQ.

https://greensock.com/docs/v3/Plugins/CSSRulePlugin