CodePen Home Vertical image loop with scroll acceleration with gsap

[wayz]

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:

1. I utilized useLayoutEffect to handle the animation logic.
2. 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

[mvaneijgen]

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! 

 

 

[Rodrigo]

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!