react clip-path scroll animation with Observer, useGSAP

[pirrex]

Hi everyone.

I'd like to create an animation that plays in a loop and also plays when I scroll.

Animation: animates the css clip-path property of the images according to the current index.

Currently, when the component is mounted, the animation plays correctly but remains stuck on the last image of the array.
And when I scroll, nothing happens.

Does anyone have a solution or know where to find the bug ?

Thank you in advance

Demo link : https://stackblitz.com/edit/gsap-react-basic-f48716-ebgh4d?file=src%2FApp.js
 

I was inspired by the following examples:

See the Pen XWzRraJ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

See the Pen wvZjeGN?editors=1010 by GreenSock (@GreenSock) on CodePen

[mvaneijgen]

Hi @pirrex welcome to the forum!

 

Personally I would keep working in codepen and fork the base version you want to work on and then try to tweak the animation to what you want to happen. When that is working try adding the auto next section and try and get that to work and keep forking it until you are fully confident it is working like you want and when that is done try implementing it in your framework of choice. This way you only have to battle one change at a time and this will make it so much easier to implement. 

 

I see you had removed some logic from the original demo, which I feel is fairly importing for this effect to work. I've forked the original version and removed some of the animations that you don't seem to want. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Again my advise keep working in codepen until you've fully done with the animation/logic and then port it to your framework. Hope it helps and happy tweening! 

 

See the Pen gOydmJN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[pirrex]

Thank you very much  @mvaneijgen for taking the time to look and create a solution

I can see that your demo works perfectly well, but I can't adapt it using useGSAP.

[Rodrigo]

Hi,

 

You might want to have a look at our learning resources regarding useGSAP:

https://gsap.com/resources/React

 

Most specifically at how contextSafe works, because that could be the missing piece for you here.

 

Also check this video as well:

 

We have a collection of React starter templates on Stackblitz that could help as well:

https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

 

Happy Tweening!

[pirrex]

Thank you @Rodrigo for your reply

Here's the best I could do: currentIndex is automatically inserted, but the wrapImg function returns nothing.

DEMO : https://stackblitz.com/edit/gsap-react-basic-f48716-ebgh4d?file=src%2FApp.js,src%2Fstyle.css,public%2Findex.html

 

I was inspired by this solution

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

[Rodrigo]

Hi,

 

I think this is a better approach:

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

 

I wasn't able to create a react version of it for technical issues on my end (ISP is super slow and creating a codepen is not as slow as a react demo on stackblitz), but porting this to react shouldn't be a really complicated task. The heart of this is on the doSlide method that takes a specific value (+1 or -1) which updates the index value. Also the difference with your approach is that this uses a fromTo instance for the next slide, regardless of the direction so that takes the clip path of the next image from the bottom to the top which makes looping possible.

 

Hopefully this helps.

Happy Tweening!

[pirrex]

Thank you very much @Rodrigo, I've managed to adapt the solution to react.
I leave the link stackblitz here.

[Rodrigo]

Great to hear that it actually helped!

 

Thanks for sharing your demo with the community! The only thing I would point about it is that you don't need to store the timer in a ref if you're using it inside the useGSAP hook's scope.

 

Also this is not going to do what you expect:

timer && timer.current.pause();

Because timer never will be falsy, because since is a react ref, by default react will add the current property to it, so timer won't be undefined, will always have the current property because it will be an object. That's why I suggest to keep everything in the useGSAP scope and set the timer as a constant.

 

Hopefully this helps.

Happy Tweening!