Gsap on scroll animation with pin in reactjs.

[mohsin110]

Hello there, 

I'm trying to do the scroll pin animation in reactjs. There I'm using swiper and gsap. My requirement is when scroll to section it need to pin and then swiper needs to be slide, untill end.

 

I'm taking reference from below codepen.

Js version:

"https://codepen.io/snorkltv/pen/QWzwmjJ"

Im trying to replicate the codepen example in reactjs, I have tried, but Im strucked in rendering issue.

 

Here I have add the code on Stackbitz

Reactjs: 

https://stackblitz.com/edit/vitejs-vite-rpn1iq?file=src%2FApp.jsx

Can some please help me with that....

 

 

See the Pen QWzwmjJ by snorkltv (@snorkltv) on CodePen

[GSAP Helper]

Using a framework/library like React, Vue, Next, etc.? 

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: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[mohsin110]

Hello there, 

I'm trying to do the scroll pin animation in reactjs. There I'm using swiper and gsap. My requirement is when scroll to section it need to pin and then swiper needs to be slide, untill end.

 

I'm taking reference from Above codepen.

Im trying to replicate the codepen example in reactjs, I have tried, but Im strucked in rendering issue.

 

Here I have add the code on Stackbitz

Reactjs: https://stackblitz.com/edit/vitejs-vite-rpn1iq?file=src%2FApp.jsx

Can some please help me with that....
 

[Rodrigo]

Hi,

 

I checked your demo and is a bit convoluted and difficult to follow, since this is not the simplest thing to do, so porting it to React is also not super trivial.

 

The first recommendation would be to use our useGSAP hook instead of useEffect:

https://gsap.com/resources/React

 

Then create the ScrollTrigger, Observer (ScrollTrigger.observe()) and swiper instances in a useGSAP hook without any dependencies. There is no need to create those over and over again when updating the state of the component, especially the index value. When you update the index value all you care about is to switch the slide nothing more, so those GSAP instances could be created in the scope of contextSafe:

https://gsap.com/resources/React/#making-your-animation-context-safe

 

The most important thing here is to see if keeping track of the active slide is important or not and if it should be kept in the component's state or not.

 

Hopefully this helps.

Happy Tweening!