Jump to content

Jhosep R

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

Recommended Posts

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?



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

Link to comment
Share on other sites



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!

  • Like 2
Link to comment
Share on other sites



Here is the example:



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!

  • Like 1
Link to comment
Share on other sites

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


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.