How I can able to use locomotive scroll in this type of pinnned horizontal scroll

[whizzbbig 12 Likes (Newbie)]

Hello Everyone, Hope you guys having a great day. So, here i am trying to achieve pin scrolling form left to right and right to left achieved nicely by @akapowl using locomotive scroll and how to make horizontal scroll section to display vertical on mobile and display horizontally at tab and desktop.

and if i want to achieve horizontal scroll at mobile then this will be kind of bad for user experience as it will cause problem to scroll. 

See the Pen 8a383f202ba53d6b11cc83da39b6f5b5 by akapowl (@akapowl) on CodePen

 

I want to achieve left to right in second section and want to make them display vertical on mobile coz its overlapping 

See the Pen GREjqrp by raj-shukla (@raj-shukla) on CodePen

[akapowl 5,222 Likes (Superhero)]

 

If I am not mistaken, that demo of mine you posted is a rather old one.

You'll find one a bit more reduced (no jQuery) on my codepen profile and there is also an example making use of locomotive scroll.

 

See the Pen wvJroYy by akapowl (@akapowl) on CodePen

 

 

 

If you want things to work vertically on mobile, you'll first have to make sure that your horizontal sections have the proper styling for that with CSS media-queries and then best integrate your ScrollTriggers with ScrollTrigger.matchMedia()

 

These threads here might be helpful with regard to that, as they contain codepens that do what I mentioned above. Hope this helps.

 

 

 

[whizzbbig 12 Likes (Newbie)]

3 minutes ago, akapowl said:

 

If I am not mistaken, that demo of mine you posted is a rather old one.

You'll find one a bit more reduced (no jQuery) on my codepen profile and there is also an example making use of locomotive scroll.

 

 

 

 

 

 

If you want things to work vertically on mobile, you'll first have to make sure that your horizontal sections have the proper styling for that with CSS media-queries and then best integrate your ScrollTriggers with ScrollTrigger.matchMedia()

 

These threads here might be helpful with regard to that, as they contain codepens that do what I mentioned above. Hope this helps.

 

 

 

thankyou sir 🙏

[whizzbbig 12 Likes (Newbie)]

On 9/4/2021 at 3:39 PM, akapowl said:

 

If I am not mistaken, that demo of mine you posted is a rather old one.

You'll find one a bit more reduced (no jQuery) on my codepen profile and there is also an example making use of locomotive scroll.

 

 

 

 

 

 

If you want things to work vertically on mobile, you'll first have to make sure that your horizontal sections have the proper styling for that with CSS media-queries and then best integrate your ScrollTriggers with ScrollTrigger.matchMedia()

 

These threads here might be helpful with regard to that, as they contain codepens that do what I mentioned above. Hope this helps.

 

 

 

I am facing difficulties on integrating the way you able to achieve the locomotive scroll to my project
 

codesandbox link: https://codesandbox.io/s/little-morning-4i2vb?file=/index.html

[whizzbbig 12 Likes (Newbie)]

On 9/4/2021 at 3:39 PM, akapowl said:

 

@akapowl

 

I am getting these errors while using your template

 

[GreenSock 18,587 Likes (Superhero)]

4 hours ago, whizzbbig said:

I am getting these errors while using your template

It looks like those errors are from LocomotiveScroll which is NOT a GreenSock product. We don't support 3rd party libraries here, but if you have any GSAP-specific questions we'd be happy to help. You might want to try replacing LocomotiveScroll with the ScrollTrigger-only smooth scrolling helper function that's shown in the docs at https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

[whizzbbig 12 Likes (Newbie)]

8 hours ago, whizzbbig said:

@akapowl

 

I am getting these errors while using your template

 

It's a dumb mistake i forgot to add div scroller

 

[whizzbbig 12 Likes (Newbie)]

@akapowl

now the only problem is that it isn't scrolling in mobile devices https://locomotive-boilerplate.vercel.app 

[whizzbbig 12 Likes (Newbie)]

@akapowl eventho your pen also isn't working on mobile

[akapowl 5,222 Likes (Superhero)]

 

Please don't ping people like that all the time.

 

When one of the regulars helping here finds the time, you will be helped - no need to @ anyone for help.

 

 

 

29 minutes ago, whizzbbig said:

now the only problem is that it isn't scrolling in mobile devices https://locomotive-boilerplate.vercel.app 

 

As I can not tinker with your code there is not much I can tell you about that - debugging a live site is pretty much out of scope for these forums.

If you need any assistance - if this is GSAP related -  please provide a minimal demo of your problem boiled down to an absolute minimum, ideally on codepen.io.

 

To me it looks like that has nothing with GSAP though and is more likely related to locomotive-scroll and as Jack already mentioned, we don't support locomotive-scroll in these forums as it is a 3rd party library.

 

 

Edit: 

For it to work on mobile, try removing the overflow: hidden on the body and html - that appears to be what's blocking the scroll, when locomotive is not active (which I think it isn't for mobile devices, at least by default) @whizzbbig

 

[whizzbbig 12 Likes (Newbie)]

17 minutes ago, akapowl said:

 

Please don't ping people like that all the time.

 

When one of the regulars helping here finds the time, you will be helped - no need to @ anyone for help.

 

 

 

 

As I can not tinker with your code there is not much I can tell you about that - debugging a live site is pretty much out of scope for these forums.

If you need any assistance - if this is GSAP related -  please provide a minimal demo of your problem boiled down to an absolute minimum, ideally on codepen.io.

 

To me it looks like that has nothing with GSAP though and is more likely related to locomotive-scroll and as Jack already mentioned, we don't support locomotive-scroll in these forums as it is a 3rd party library.

 

Sorry for pinging 🙏

 

by adding 

```js

mobile: {
     smooth:true;

}

```

fixes the issue

[Mattrudd 43 Likes (Newbie)]

Getting a lot from this thread about combining ScrollTrigger with Locomotive Scroll, thanks! Pleased that with the above examples (and the original GSAP Loco pen of course), I've been able to get pretty close to what I'm looking to achieve - ScrollTrigger animating Lottie files, (kind of) integrating Locomotive scroll.

 

Couple of issues I'd love some help on:

 

Firstly...

I'm a little stuck on getting the snapping of horizontal scrolling to work in the Loco version:

See the Pen rNwJKme by matt-rudd (@matt-rudd) on CodePen

 

Snapping works in this non-Loco versionL

See the Pen ExXappw by matt-rudd (@matt-rudd) on CodePen

 

Any pointers as to how I can get this snapping to work again alongside Locomotive?

 

Secondly...

Hoping to fix the jittering with the data-scroll and data-scroll-section performance attributes in the final version... but thinking I've got something wrong somewhere with the synching of ScrollTrigger and Loco?

 

My pens are far from the tidiest coding examples, I'm sure 🤭

 

Thanks as ever!

[GreenSock 18,587 Likes (Superhero)]

Hey, @Mattrudd. Unfortunately we can't really support 3rd party libraries like LocomotiveScroll here. As a courtesy, we provided a demo in our docs for basic functionality but it's beyond the scope of help we can provide to get into all the nitty gritty and try to figure out how to work around various quirks of that library which we didn't author. 

 

Is there any reason you're not just using the ScrollTrigger-based helper function to do the smooth scrolling instead of using LocomotiveScroll? I have nothing against LocomotiveScroll, of course - we just can't actively support it here.  

 

Minor tip: for future reference, it's best to make sure your minimal demo only has the absolutely essential pieces to illustrate the exact issue you're trying to troubleshoot. You don't need to have all those sections in there, for example. And if you have a jittering issue, only include that one part in the demo. It saves a lot of time and hassle for volunteers here trying to parse through all the code and figure out what's going on. 👍

[Mattrudd 43 Likes (Newbie)]

I hear you thanks! Got carried away again, getting so close to what I wanted to achieve. 

Apologies for taking advantage of the free help... think I’ve reached my limit here (probably pretty evident but I’ve been a code magpie, trying to reverse engineer the bits I steal, until the realisation hits again that I’ve spent more time tweaking than I would’ve done learning from scratch.

 

Only reason I haven’t used the ScrollTrigger based helper function is that I didn’t realise it produced the same kind of inertia effect as Loco scroll - will look into that before recruiting a pro!

 

Thanks again.