aki-sol Posted September 28, 2021 Share Posted September 28, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 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 4 Link to comment Share on other sites More sharing options...
akapowl Posted September 28, 2021 Share Posted September 28, 2021 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. 4 Link to comment Share on other sites More sharing options...
aki-sol Posted September 30, 2021 Author Share Posted September 30, 2021 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! Link to comment Share on other sites More sharing options...
Cassie Posted September 30, 2021 Share Posted September 30, 2021 crashes?! Huh, yeah that shouldn't happen. It's just setting a position on an element. Link to comment Share on other sites More sharing options...
Ves1 Posted September 30, 2021 Share Posted September 30, 2021 See the Pen JjYPgdp by GreenSock (@GreenSock) on CodePen good afternoon, can you fix it Link to comment Share on other sites More sharing options...
akapowl Posted September 30, 2021 Share Posted September 30, 2021 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. 1 Link to comment Share on other sites More sharing options...
Ves1 Posted September 30, 2021 Share Posted September 30, 2021 See the Pen bbfdab3b579f7a73639a7dc6a66cd67b by GreenSock (@GreenSock) on CodePen that's what I need and everything works here 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now