wayz Posted January 25 Share Posted January 25 (edited) I am currently working on replicating a page animation( See the Pen oNGEvmw by cameronknight (@cameronknight) on CodePen ) in React and have encountered challenges with implementing the scrollTrigger and gsap.to functionalities. Despite having successfully employed useLayoutEffect and a context wrapper in previous projects, I am puzzled as to why it is not functioning as expected in the current scenario. To provide you with more context, I have attached a screenshot of the page I am working on. The primary issue lies in the fact that neither the scrollTrigger nor gsap.to seem to be working as intended. I have thoroughly reviewed my code and cannot pinpoint the source of the problem. Here is a brief overview of my approach: I utilized useLayoutEffect to handle the animation logic. Created a context and wrapped scrollTrigger and gsap.to within it for seamless integration. Despite following a similar approach that has proven successful in the past, the animation fails to execute properly on the current page.Since only codepen links work i've just copied my jsx code into codepen. See the Pen KKEXZGB by rhaber (@rhaber) on CodePen Edited January 25 by wayz wrong link used Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 25 Share Posted January 25 CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins. And here are starter templates for React (please read this article!) or Next Have you also seen our new useGSAP() Hook for react? And especially the video that just dropped yesterday! Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 25 Solution Share Posted January 25 Hi, On top of the useGSAP hook we have a vertical endless loop helper function https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop#vertical-loop Here is a simple implementation using the Vertical Loop helper function with the useGSAP hook and Observer to check the mouse wheel event: https://stackblitz.com/edit/vitejs-vite-nuat5p?file=src%2FApp.jsx Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now