Jump to content
Search Community

Issue trying to pair horizontal scrolling with vertical scrolling using ScrollTrigger and ScrollSmoother

Duo test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi,

 

I'm having issues trying to get horizontal scrolling and vertical scrolling working correctly using ScrollTrigger.

 

I used a starting point from this great CodePen example:

See the Pen gOeZKOJ by nicvh (@nicvh) on CodePen

 

What I have done is actually have the horizontal scrolling panels be various widths as that is what is going to happen on the final project and have made the horizontal scrolling sections appear first before the vertical scrolling sections.

 

As you can see from my CodePen example, there seems to be a huge gap at the end of the horizontal scrolling sections. If I make the individual scrolling panels 100% width then it works but for some reason, the x: () function is returning the incorrect value. I've been racking my brain on this for hours and am hoping that one of the geniuses in these forums can help me out.

 

Thanks

See the Pen KKRPVqN by dayneh88 (@dayneh88) on CodePen

Link to comment
Share on other sites

  • Solution

Hello @Duo

 

You will need to adjust the calculations for where to tween to. As of now the calculation still relies on the width of the first card, which worked in that other demo because the cards all had the same width. In your case, making it dependent on the last one would e.g. work.

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

 

 

If you have a different width on the last card, you might still need to have to change it, depending on where you want it to end.

 

I already broke down my thinking process of how to possibly approach the calculations in that other thread you posted in.
 

On 5/12/2021 at 12:36 PM, akapowl said:

Like;

You could remove everything but the cardsWrap.scrollWidth from it and see how it behaves with only that - moving the container way too far to the left - that's why you'd have to substract the (first) window.innerWidth from it to make it end on the right edge of the screen. ...but not quite yet because there is still the padding on the section that you'd have to respect (+ window.innerWidth*0.05 ). Now you'd have it end flush to the right edge of the window in the end.

 

So for centering up, you'd now want to have it 'moved' to the left by half the window size again first - which would make the right edge of the card sit flush against the center of the window - and then move it to the right again for half the width of the card itself - and now it's centered.

 

This is just my thinking process when it comes to concepts like that.

 

 

 

So e.g. following through that whole thinking process (and adjusting things so it is not dependent on the first card but the last instead, as mentioned before), this would have the last panel end up in center, no matter how wide it is.

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

 

 

If you want it to end flush against the right side, just follow that thinking process up until there and spare the part of centering things up. As a little sidenote; Since these pens now are dependent on the window's innerWidth, I changed the width of the .section to 100vw instead of 100% to make things more accurate. I hope this will help.


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

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Amazing work from you @akapowl

 

This implementation has worked perfectly. Thank you so much for taking the time to look into this for me. It's greatly apprecated.

 

Once again, the amazing people in these forums are always there and willing to help. This plugin is great!

 

Thanks

  • 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...