Jump to content
Search Community

React with GSAP and ScrollMagic - Tween is not valid

Laura Beatris test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

 

 

 

 

 

 

  • Like 4
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...