Jump to content
Search Community

scrollTrigger + smoothscroll + responsive => vertical scroll to horizontal scroll

superpositif test
Moderator Tag

Recommended Posts

Hi,

 

I try to use an horizontal scroll. I use smooth-scrollbar.js and gsap/scrollTrigger. It's very cool. 

I would like the horizontal scroll only for min-width > 1024px, and vertical scroll for max-width = 1024px

And i would like to switch horizontal<=>vertical on resize.

 

I use window.matchMedia 

But that doesn't work on resize.

from small window to wide window = the vertical scroll turns into a horizontal scroll.

from wide window to small window = the horizontal scroll does not turn into a vertical scroll.

 

I try to kill the scrollTrigger but not not sure that it is really essential.

 

 

How can I switch horizontal to vertical and vertical to horizontal, on resize, please ?

 

See the Pen gOgajmx by superpositif (@superpositif) on CodePen

Edited by superpositif
Link to comment
Share on other sites

 

Hey @superpositif

 

I don't think what you want to do is that easy to accomplish - and it certainly is not really related to ScrollTrigger in the first place. 

 

First off you would have to set up your CSS styles for your page to have the proper layout for the scroll-behaviour change on different screen-widths - which you don't have at the moment. Then you would probably have to destroy the old instance of smooth-scrollbar and create a new instance every time the page passes that breakpoint. Since you can only use the .use() for the plugins on smooth-scrollbar on its global Scrollbar-object if I am not totally mistaken, from what I know, you would have to adjust your plugin so it allows for the horizontal scrolling to be disabled via the updatePluginOptions() method of smooth-scrollbar - otherwise you won't be able to properly switch between the horizontal and vertical scroll-behaviour of smooth-scrollbar.

 

Setting up your ScrollTriggers appropriately for different layouts really is just the tip of a long tail here and all of the above is way out of scope for these forums. I might for sure be wrong at some point, because I never really tried to incorporate a scroll-behaviour change in this exact way myself since I don't think it is worth the trouble in the end. 

 

You could instead just incorporate a fake-horizontal-scroll via ScrollTrigger as some of the demos on the ScrollTrigger demo-page show - which will save you a lot of troubles with regard to smooth-scrollbar but also create some other things to think about of course. But it would probably make things a lot easier just handling the layout- and scroll-behaviour changes via ScrollTrigger's .matchMedia functionality in the end.

 

Sorry if this answer is not as satisfying as  you might have wished for - but as mentioned, I think this really revolves more around smooth-scrollbar and your layout in the first place. Maybe give the fake-horizontal scroll and .matchMedia a shot and we'll see how we can help you from there.

 

Cheers - and welcome to the forums.

 

  • Like 3
Link to comment
Share on other sites

Surely @akapowl is right, it not only isn't trivial and not so much a GSAP question as mostly a question of the conceptual approach.

 

I had to deal with less complex but similar situation in the past, and if you want my 2 cents how I'd proceed, here they are:

  • First you need to get you media queries in CSS right, best for static layouts without any JS.(as mentioned by akapowl)
  • Next, you set up your dynamic (JS-) layout depending on the current viewport conditions (using match Media)
  • Make sure that everything you set up in any JS is killable in a sigle call.
  • On resize (normal that should do) kill and rebuild our conditional functionality (if the change requires it.)

Reasoning:

 

Step one is very important, even if it's less fun than animation. There often are situations/screen-sizes in which a simple non animated fall-back is all you can reasonably provide.  

 

Most users don't change window size and/or orientation when using a website, so the change is usually a rare event and needs not so much performance optimization.

 

Strictly separating various situations might lead to some redundancy, but it makes thing more readable and maintainable, but CSS especially is great for reducing those redundancies. 

 

Don't know if that helps. Good luck!

 

 

 

  • Like 1
Link to comment
Share on other sites

Thanks @akapowl, thanks @iDad5 , thank you for your relevant feedback

 

I have modify my CSS and now I kill the smoothscroll.

 

Now

from wide window to small window = the horizontal scroll turn into a vertical scroll. Cool :)

from small window to wide window = I have an error in the console : 

ScrollTrigger.min.js:10 Uncaught TypeError: Cannot read property 'scrollWidth' of null
    at kb (ScrollTrigger.min.js:10)

 

my codepen is updated : 

Link to comment
Share on other sites

 

The problem is that on every resize you are creating new ScrollTriggers without killing off the old ScrollTriggers - that's not good.

 

ScrollTrigger's .matchMedia() will handle the killing off of the old ScrollTriggers for you, that's why I recommended to use it.

Also it will not trigger on every resize but only when your breakpoint is being passed.

 

This seems to work better:

 

See the Pen 4bb6ca98564aa88b5b74dafda9bcc85d by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

  • 6 months later...

Hey Bruno,

 

If you are asking how to use a horizontal smooth-scrollbar (which is not a GreenSock product and thus support for it is not offered in these forums) for desktop and a vertical smooth-scrollbar for smaller viewports, the answer already is in my reply above:

 

Quote

I don't think what you want to do is that easy to accomplish - and it certainly is not really related to ScrollTrigger in the first place. 

 

First off you would have to set up your CSS styles for your page to have the proper layout for the scroll-behaviour change on different screen-widths - which you don't have at the moment. Then you would probably have to destroy the old instance of smooth-scrollbar and create a new instance every time the page passes that breakpoint. Since you can only use the .use() for the plugins on smooth-scrollbar on its global Scrollbar-object if I am not totally mistaken, from what I know, you would have to adjust your plugin so it allows for the horizontal scrolling to be disabled via the updatePluginOptions() method of smooth-scrollbar - otherwise you won't be able to properly switch between the horizontal and vertical scroll-behaviour of smooth-scrollbar.

 

Setting up your ScrollTriggers appropriately for different layouts really is just the tip of a long tail here and all of the above is way out of scope for these forums. I might for sure be wrong at some point, because I never really tried to incorporate a scroll-behaviour change in this exact way myself since I don't think it is worth the trouble in the end. 

 

If you meant something else, it would be really appreciated if you could clarify your question a bit :) 

  • Like 2
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.
×
×
  • Create New...