Horizontal Scroll

[aki-sol]

Hi,

 

I know there are countless demos on horizontal scroll, with and without locomotive scroll. I've gone through many over the last two days and adopted the structure to my code but somehow none of them have worked out for me.  My progress after these last two days is not massive but I've been stuck for a long time really can't figure out my next steps 🥲

 

I've prepared a minimal demo which is hideous but reflects my current status well and hopefully aid in understanding my current pain points. 

 

Goal:

My goal is to create a horizontal scroll section within the website. The section contains 3 items, which should be visible one at a time ie. take up the whole viewport. I would like the each section to snap to the left edge of the viewport (applied blue border-left to make the snapping point clear) and the  snapping to happen with a linear ease. 

 

Currently the pinning of the section is working, however when it comes to the snapping, the 2nd Section is always skipped. It always stops at either the 1st or 3rd section. Also, I'm not happy with my solution for the end of the scrollTrigger as it's not really dynamic but any other function that I have tried, just completely broke the pin altogether so I've settled with this for now. 

 

For now I decided that I won't be implementing the scroll with the locomotive library becuause a) I thought it might be overkill when I only want to use the horizontal scrolling b) I couldn't get it to work ://. If however, you suggest that would be the better way, I will give it another try. 

See the Pen BaZvLrP by aki-sol (@aki-sol) on CodePen

[Cassie]

Hey Aki-sol,

 

The x-axis animation needs to have a linear ease applied ease:'none' in order to snap to the correct points - otherwise the progress of the animation over time will be unevenly distributed (according to the ease applied)

I'm not sure why you have adjusted the xPercent value to -90, but that also needs to be 100 - aka 100% of the elements width

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

[akapowl]

Just want to add to @Cassie's nice implementation, that you've got a closing-</div> tag missing for the <div class="container">.

Might save you some troubles for the future.

 

And if I am not mistaken, the inertia: false  should go inside the snap-object, aki-sol.

[aki-sol]

Thanks Cassie! I initially had xPercent at 100 but tried out other values to test. I think the problem here is actually within my project. When I apply the code and set pin: true, the project crashes. I've not found any records of that happening to anyone else. I'll try to figure it out and if not look for a different solution.

 

Thanks a lot for your time! 

[Cassie]

crashes?! Huh, yeah that shouldn't happen. It's just setting a position on an element.

[Ves1]

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

  good afternoon, can you fix it

[akapowl]

Hey there @Ves1

 

The demo you posted doesn't appear to be broken at all - it just demonstrates something different from what was asked in the original question in this thread - that is Scrolltriggers within a native horizontal scrolling container vs the fake-horizontal scrolling on vertical scroll via a tween that aki-sol was attempting.

 

If you could elaborate a bit on what it is you are looking for it would really help pointing you in the right direction.

[Ves1]

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

 that's what I need and everything works here