Scrolling an element from left to right while scrolling down page

[CalumCC]

Hi there, 

 

I've only ever been able to try to copy existing code for GSAP elements and still haven't quite captured how to write it myself. So hopefully somebody could point me in the right direction!

 

I've seen examples of fully scrolling the page left to right but what I'm trying to do is have a regular vertical page with a horizontal scrolling element that moves left to right depending on how much the div has passed through a viewport.

 

Where it may get a little hard is that I'm looking for it to start with the far left item to hug the left margin and then as it horizontally scrolls it will end on the far right hugging the right margin.

 

The area that the items will go left to right on will change depending on the window width. I'm also looking to disable it under a certain width as I can then just resort to stacking the elements instead.

 

The items within the scrolling element may change widths and number. For the example attached I've just given the items a fixed width.

 

I hope I've made some sort of sense!

See the Pen RwJbEEp by CalumCC (@CalumCC) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements...please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.