Wipe Scroll effect

[storm]

Hey there,

 

I have been trying to make something like this

See the Pen JjVbVgd by yudizsolutions (@yudizsolutions) on CodePen.

, I have managed to do the wipe effects but I wanted it to have that smooth scrolling effect. 

 

Issues: changing the srub from true to a  certain value e.g (1.2) ruins the effect.

also, pinning seems to be not working.

 

I am kinda new to gsap, want some expert eyes to critic the code and maybe help me achieve the effect and optimize the code a bit.

 

thanks. 

See the Pen WNqdOwV by ishrak_rafi (@ishrak_rafi) on CodePen.

[Rodrigo]

Hi @storm and welcome to the GSAP Forums!

 

We have our own smooth scrolling tool, ScrollSmoother but is a paid benefit of GSAP Club members:

https://gsap.com/pricing/

 

https://gsap.com/docs/v3/Plugins/ScrollSmoother/

 

You could try other tools like Locomotive and Lenis, but while ScrollTrigger is fully compatible with both, those are not GSAP products so we can't offer a lot of support for them, since we need to focus our attention on GSAP related issues in these free forums.

 

Happy Tweening!

[storm]

Hey @Rodrigo thanks so much for your reply. 

 

I wanted to point out that I am happy with whatever I have achieved, it's just that sometimes while scrolling the slides kinda glitch up and down, specifically on Safari browser. 

 

I was hoping to get some insights on whether my logic on this effect is accurate or not.  Let me know if you can help me in this regards. 

 

And lastly, I wanna stick to gsap for now.. I am kinda liking the package so far. so we can keep the other tools aside for now thanks.

[mvaneijgen]

I am a bit struggling with to find out how you're creating this effect. Tailwind is a black box for me and I have no idea what it is adding to create this effect, thus I also cant tell you why it is not working. If I watch the effect on a Safari browser it is jumping all over the page, it looks like all the content wants to scroll, but then gets transformed back again. 

 

Personally if I where to create this effect I would use a clip-path (great site for creating them https://bennettfeely.com/clippy/). I have a post all about creating these kinds of 'stacking cards' effect and the logic behind them, see the post below. And from the already made animation I had this one. It is not the same effect (it is reversed), but is show that is works perfectly smooth in all browsers and you can add as much scrub or pin as you like to customize it. Hope it helps and happy tweening! 

 

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

[storm]

Hey @mvaneijgen Thanks so much for this.  

 

Nice logic to use a clipping path to obtain the effects.

 

I assume the reverse effect is just to modify the clipPath, I will test this out.

 

thanks again, and have a nice day.