Horizontal Scroll covering pinned div inside

[ArnaudB14]

Hi everyone, I'm new to Gsap and I'll be grateful for any help!

 

I'm trying to recreate the effect I posted on codepen but in a horizontal version. On scroll, the second slide and its content would pass over the first to give an effect of overlapping.

 

I've already tried, but I can only make a basic horizontal scroll without "overlapping".

Let me know if you need more details.

 

codepen link : 

See the Pen qBzopqo by webScenarii (@webScenarii) on CodePen.

[mvaneijgen]

Hi @ArnaudB14 welcome to the forum!

 

The demo you've modified is build to do one specific thing really well, but isn't build to do anything else. I've write a post how you could build any of such effects, with a single timeline which gets connected to one ScrollTrigger. See the post below 

 

 

With that logic I've just updated the tween to create a clip-path which is coming from the right and then it looks like the following. Hope it helps and happy tweening! 

 

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

[Rodrigo]

Hi,

 

Here is a demo that has basically the same effect:

See the Pen RwzjmVL by GreenSock (@GreenSock) on CodePen.

 

Also for using GSAP on react projects we recommend using our useGSAP hook:

https://gsap.com/resources/React

 

Here is the same demo  in a Simple React project:

https://stackblitz.com/edit/vitejs-vite-cverxe

 

Hopefully this helps

Happy Tweening!

[ArnaudB14]

Hey, thank you both for your help !
@mvaneijgen is there a reason I can't scroll your pen ?
@Rodrigo Thanks but I'd like it to be horizontal and I can't achieve it

[mvaneijgen]

3 minutes ago, ArnaudB14 said:

@mvaneijgen is there a reason I can't scroll your pen ?

Nope should scroll perfectly fine, the items are pinned, so it looks like they are staying still, but a scroll should still happen. 

[ArnaudB14]

Ok that's weird then, I'll try to reproduce it, thanks again, I might come back and ask for help 😁.

[ArnaudB14]

Oh it works on another pc and it's exactly what I want, thank you so much for your time.

[mvaneijgen]

That is great, glad to hear! Please don't forget to also check out the post. It explains in detail how this effect is created and how you can create any other effect with the same logic. Hope it helps and happy tweening!