How to Section Change with GSAP? + ScrollTriger + React Js

[Jhosep R]

Hello Community, 

I'm trying to replicate this GSAP example with react, I manage to do the infinite loop, but the section change animation doesn't take me, do you know what it could be?

I also want to add a menu that allows me to navigate between sections with a smooth scroll, it detects which section I am in but clicking on the menu option breaks the app. How can i fix this?

 

https://codesandbox.io/s/gsap-react-project-p43gkw?file=/src/App.js

See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

I'm working on an example for this. It's taking a bit longer than expected so please stand by.

 

In the mean time I can tell you that you don't have any of the code regarding the panels animations and your CSS Setup is really the one you need to emulate the example you post.

 

Happy Tweening!

[Rodrigo]

Hi,

 

Here is the example:

https://stackblitz.com/edit/vitejs-vite-w9jxwd

 

I'm using everything inside the useLayoutEffect and the GSAP Context instance to add a method for changing the section, for simple and easy cleanup.

 

Take a look at it and if you have any doubts let us know.

Happy Tweening!

[Rodrigo]

Just an FYI, we created a version in Vue3 as well, in case anyone is interested in that:

https://stackblitz.com/edit/vitejs-vite-tn1wsx

 

Happy Tweening!

[Jhosep R]

@Rodrigo Interesting to see this example in Vue3, I keep trying to replicate it in React but I couldn't :'). haha, that's weird