Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
goodbish

Horizontal scroll at any height sections (scrollTrigger)

Go to solution Solved by akapowl,

Recommended Posts

Hello everyone.
I just started learning gsap yesterday. Need a lot to learn, but I have some problem with one task.
For this task I drew scheme

727491920_example2.drawio(1).png.1db5e99bdbe93911d64c38b09331c930.png
In words I need to scroll to bottom of section 1, then scroll right to top of the section 2, then scroll down to bottom of section 2...etc.
I'm a bit stuck with this one, because I know to scroll horizontally a list of sections of same height, but when a need to scroll elements with their own height things gets complicated.
 So, I'm asking to help. I don't expect to get a full solution or tutorial, just some tips how it can be done. 

See the Pen RwjwWJN by Goodbish (@Goodbish) on CodePen

Edited by goodbish
add colors to scheme for better understanding
Link to comment
Share on other sites

Welcome to the GSAP forums @goodbish

 

This thread here discussed something very similar to what you want to achieve.

If I recall correctly, I also mentioned different approaches throughout that thread.

 

Give it a read - I think it might help.

 

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, akapowl said:

Give it a read - I think it might help.

Thank you for answer.
I've read the thread very carefully.
So I just want to clear things out. For this to work like that I need to make sub blocks of content and put them in wrapper and then give wrapper horizontal scroll? But if there will be no sub blocks like this, is there any way to solve this?
image.thumb.png.135ef6fad092b527ca17464688611c23.png

Link to comment
Share on other sites

  • Solution

That would be the approach of the second example in that thread, the first one handles things a bit different than that.

 

As mentioned in that thread - as long as it's not logically impossible, it is probably doable. But as also mentioned in that thread, things like these require a LOT of tinkering even if you have some more experience (well, at least for me that is the case) and first and foremost a setup that can make things possible from a logical point of view to begin with. That's why I suggested that 'workaround' in the second example of that thread as it makes things quite a bit simpler overall.

 

Getting a setup prepared for a demo also can be way easier to do than it might be in production in the end.

 

E.g. here is an approach to a possible setup (in a minified view) where for the demo I could just set the heights of each panel and position them via a margin-top according to the height of the previous section. But in production, where you might not be able to set specific heights for sections this would become a bit more tricky and you might e.g. have to add some JS logic to handle the correct positioning with respect to the height of the previous section for you.

 

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

 

 

 

With this setup (fitting the screen of course) and after quite some time, I landed on this, which works decently - but I can neither give you a guarantee that it will work flawlessly for you, nor that it is 100% correct or the easieast way to do this. Things are a bit tricky there as I am trying to control tweens on the same property of the same elements with different ScrollTriggers.

 

I only got it working correctly with adding an eventListener on refresh to ScrollTrigger that checks wether the first ST has been reached yet and clears the xPercent of the panels if it hasn't been reached, because without it, the sections would have been translated already and thus off screen when resizing in scrollpositions above that first trigger (saying: I might have very well done something wrong here).

 

Maybe it helps nonetheless, or at the very least can give you an idea for how to approach it.

 

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

 

 

 

  • Like 4
Link to comment
Share on other sites

Thank you for your answer and your time, that's a LOT more, than I expected. 
I can't thank you enough for this.
 

11 hours ago, akapowl said:

E.g. here is an approach to a possible setup (in a minified view) where for the demo I could just set the heights of each panel and position them via a margin-top according to the height of the previous section. But in production, where you might not be able to set specific heights for sections this would become a bit more tricky and you might e.g. have to add some JS logic to handle the correct positioning with respect to the height of the previous section for you.

Yep, I can handle that

 

11 hours ago, akapowl said:

Maybe it helps nonetheless, or at the very least can give you an idea for how to approach it.

That helps a lot. The approach you gave me is really enough.
I think I can handle this from now

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hey @akapowl, in the solution you have provided here, the height of the containers were fixed, but if we have a container of variable height, the whole scrolling isn't working. Could you please help me with a possible solution to the problem. Moreover, there will be a problem in calculation of margin top for third container.

See the Pen oNoVbPY by vasudevsall (@vasudevsall) on CodePen

Link to comment
Share on other sites

Sorry, but no, I don't really have the time for that.

As already mentioned, things like these take a lot of tinkering.

 

While the example above is marked as the 'solution', I would really see it more of a suggestion / 'possible' way to do things, which as mentioned too, comes with quite some caveats - and crafting / developing custom-code solutions with regard to rather complex logic is not what these forums are intended for.

 

Personally I wouldn't even recommend using this approach (because of the caveats it comes with) but instead, especially if you are rather new to ScrollTrigger and/or JS, use a scenario like I suggested in this post of the thread linked above, where you just style the last/first parts of fake-horizontal-scrolling sections according to what you need.

 

It worked out pretty well for the other user in that thread, so maybe it will be a bit easier to understand for you, too. I hope that will help.

 

 

  • Like 3
Link to comment
Share on other sites

Thank you @akapowl, will look into the thread and try to figure something out. Thanks!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×