How to use ScrollMagic and GSAP with React

[hellodude.it]

Hi,

I have a problem using GSAP and ScrollMagic in React's project. This is an example:

 

var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: this.about }).setTween(TweenMax.to(this.h2, 0.25, { color: 'yellow' })).addTo(controller);

Can you explain me why this operation executes at the start and not when this.about is triggered?

 

Thank you,

a.

[Rodrigo]

Hey Andrea,

 

Honestly we couldn't tell without a live editable sample to look at. If you can please set up a minimal sample showing just the issue you're having.

 

In the meantime here is a working sample of React+GSAP+Scrollmagic, so you can take a look at (dependencies are a bit outdated though):

 

https://codesandbox.io/s/w7jvzxo9w

 

Happy Tweening!!!