Locomotive Scroll & Section vertical + horizontal scrolling

[Androlax]

Hey, got another little problem.

 

You will find it on the codepen, I want to have a horizontal scrolling section (you will find it in pink in the codepen), but when the scroll is on the pink section, the little red boxes start to translate to fake the horizontal scrolling but the pinned pink section does not stop.

If I pin the horizontal scrolling to the pin of the section it does strange thing.

 

Is there a thing to make both works ? So when the scroll is on the pink section, it scroll horizontally and then the pink section will stay there and wait for the user to scroll completely horizontally.

 

Thanks you again GSAP for your help ❤️ 

See the Pen eYGjKKV by th-o-benoit (@th-o-benoit) on CodePen

[akapowl]

 

The more different cases you add to that scenario, the more complicated things will get and the more exceptions you will have to add to that code, @Androlax. In this case pinning the horizontal section just like the others won't work, as the fake-horizontal tween (and thus the pinning of the section) should be dependent on the scrollWidth of the content, thus you will have to make some calculations for the pinning of that horizontal section and probably tweak the whole thing quite a bit for it to work flawlessly with the 'overlay reveal effect'.

 

Solving logic-problems like those, especially when things get more and more complicated is a bit out of focus for what these free support forums offer, I'm afraid. But maybe somebody else sees a very simple solution, that I'm simply just missing right now.

 

[Androlax]

2 minutes ago, akapowl said:

 

The more different cases you add to that scenario, the more complicated things will get and the more exceptions you will have to add to that code, @Androlax. In this case pinning the horizontal section just like the others won't work, as the fake-horizontal tween (and thus the pinning of the section) should be dependent on the scrollWidth of the content, thus you will have to make some calculations for the pinning of that horizontal section and probably tweak the whole thing quite a bit for it to work flawlessly with the 'overlay reveal effect'.

 

Solving logic-problems like those, especially when things get more and more complicated is a bit out of focus for what these free support forums offer, I'm afraid. But maybe somebody else sees a very simple solution, that I'm simply just missing right now.

 

 

Hey @akapowl,

 

Of course I understand. I tried my best to find a solution with this parallax section, I feel like it will be kinda complicated

 

I tried to remove the 'overlay reveal effect' effect, to do this horizontal scrolling thing but It bug for some reason.

 

It is obviously possible for me to pay someone (how much?) to help me with this problem.
You have already helped me a lot, if you are interested, it would be nice to be able to return the favor

[akapowl]

Something like this could work - but only to an extend.

 

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

 

I added another if-statement for the horizontal-section in the forEach for the sections and for it to also have a similar section overlaying afterwards, I also added a margin-top: -100vh to the subsequent section, and split the tweening and pinning of the fake-horizontal into two ScrollTriggers, with the pinning part being longer than the tweening itself now.

 

I don't think it would be possible to get that non-pin-spacer-showing-pinning-effect to work with those data-scroll-section attributes (which you will likely be after, since your horizontal-section is not 100vh tall). So if it were for me, I would probably suggest ditching them, if you want to do more advanced things with ScrollTrigger in combination with locomotive-scroll, as they will only be roadblocks in the way and will need more and more workarounds to how they work in the first-place (some things won't even really be possible with those, I think, as mentioned already).

 

Trying to find workarounds over and over again would be rather time-consuming and costly in the end and may very well also lead to dead-ends. Since I myself also am not too experienced with locomotive-scroll, I don't think I would be suitable to do that, but thanks for considering me.

 

There are still the Freelance-Forums, though, if you were to consider hiring someone for this.

 

https://greensock.com/forums/forum/15-jobs-freelance/

[GreenSock]

1 hour ago, Androlax said:

It is obviously possible for me to pay someone (how much?) to help me with this problem.

Yep, the Jobs & Freelance forum is probably best. We (GreenSock) do offer paid consulting services, so feel free to reach out if you'd like to explore that, but we have limited bandwidth and our hourly rate is likely much higher than the typical freelancer (although we may be able to do in 4 hours what it would take others 20+ hours to accomplish, so it's all relative).

 

And we wouldn't be able to fix something in a 3rd party library like LocomotiveScroll, though perhaps we could engineer a similar effect without using that library. 

 

Good luck with the project! 

[Androlax]

17 minutes ago, akapowl said:

Something like this could work - but only to an extend.

 

 

 

 

I added another if-statement for the horizontal-section in the forEach for the sections and for it to also have a similar section overlaying afterwards, I also added a margin-top: -100vh to the subsequent section, and split the tweening and pinning of the fake-horizontal into two ScrollTriggers, with the pinning part being longer than the tweening itself now.

 

I don't think it would be possible to get that non-pin-spacer-showing-pinning-effect to work with those data-scroll-section attributes (which you will likely be after, since your horizontal-section is not 100vh tall). So if it were for me, I would probably suggest ditching them, if you want to do more advanced things with ScrollTrigger in combination with locomotive-scroll, as they will only be roadblocks in the way and will need more and more workarounds to how they work in the first-place (some things won't even really be possible with those, I think, as mentioned already).

 

Trying to find workarounds over and over again would be rather time-consuming and costly in the end and may very well also lead to dead-ends. Since I myself also am not too experienced with locomotive-scroll, I don't think I would be suitable to do that, but thanks for considering me.

 

There are still the Freelance-Forums, though, if you were to consider hiring someone for this.

 

https://greensock.com/forums/forum/15-jobs-freelance/

 

Great, thank you very much, I will look at this in my project and see what it looks like, however, I can put the section in 100vh to make it easier.

Thank you again for the help, unfortunately I still know very little about GSAP so I'm quickly limited as I don't have the full spectrum of how it can work, the limitations etc...

 

If ever I can't get what I want, or at least a working version, I'll go to the freelance side (GSAP & Freelance), I've noted everything that has been said.

 

Thanks again!

[Androlax]

By the way, if you want something from me (money or anything else) to thank you for your time it would be my pleasure @akapowl

[akapowl]

All good, @Androlax, I don't want anything in return. Have a great weekend 

[OneManLaptop]

16 hours ago, GreenSock said:

And we wouldn't be able to fix something in a 3rd party library like LocomotiveScroll, though perhaps we could engineer a similar effect without using that library.

 

Just as an aside, I seem to remember talk at one point of making that momentum style scrolling effect a part of the scroll trigger plugin, is this something that's still being considered or have I got the wrong end of the stick and that functionality isn't planned? Cheers.

[GreenSock]

9 hours ago, OneManLaptop said:

Just as an aside, I seem to remember talk at one point of making that momentum style scrolling effect a part of the scroll trigger plugin, is this something that's still being considered or have I got the wrong end of the stick and that functionality isn't planned? Cheers.

When you say "momentum scrolling" do you mean smooth-scrolling? Like...where it takes a little time for the scrolling content to catch up with the scrollbar position? If so, well, I can neither confirm nor deny that officially but it very well may be something that's coming for "Shockingly Green" and above Club GreenSock members.  If that hypothetically were happening and you wanted early access (just hypothetically of course), feel free to private-message me. 🤫

 

[OneManLaptop]

On 1/8/2022 at 9:58 PM, GreenSock said:

When you say "momentum scrolling" do you mean smooth-scrolling? Like...where it takes a little time for the scrolling content to catch up with the scrollbar position? If so, well, I can neither confirm nor deny that officially but it very well may be something that's coming for "Shockingly Green" and above Club GreenSock members.  If that hypothetically were happening and you wanted early access (just hypothetically of course), feel free to private-message me. 🤫

 

 

I can neither confirm or deny a PM has been sent... 👀