ScrollTrigger: Horizontal Image Slider

[syzlin]

Hey ppls,

 

I just saw this CodePen and I'm wondering if there is any chance to modify the code that I'm scrolling horizontally through the site and there is only one item which gets overlapped by the following items with a text in another box so that I'm not see them coming. Like the image comparison here in the CodePen below 

I would be so glad about any help since I'm new to ScrollTrigger and slightly overwhelmed with it.

 

Thanks in advance - have a great monday!

See the Pen zYoMJNa by orca_rohit (@orca_rohit) on CodePen

[mvaneijgen]

Hi @syzlin welcome to the forum!

 

That is surely possible. I would say don't worry about ScrollTrigger. A ScrollTrigger is just animating a timeline on scroll, check out the pen below. Just focus on the animation you want and only when you're happy with that start thinking about ScrollTrigger 

 

See the Pen mdvPqLX by mvaneijgen (@mvaneijgen) on CodePen

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

And check out this awesome tutorial by our own @Carl, maybe it give you inspiration for your own effect. Just post back here with what you've tried in a minimal demo and someone will be sure to point you in the right direction. 

 

https://www.youtube.com/watch?v=_LWinkSulwU