Jump to content
Search Community

Horizontal Scroll - scroll snap not lining up with edge of the viewport?

CreateSean test
Moderator Tag

Recommended Posts

I'm a newbie to gsap - also rather weak at javascript.

 

I'm working on a new site with a section that horizontal scrolls - that is working however scroll snap does not align sections with the edge of the viewport as expected.

 

In the above codepen - I've also got a modal (powered by AlpineJs) that slides in from the left, but because the scroll snap isn't aligning with the edge of the browser it looks wrong. is it possible to have this align to the left edge of the browser if scroll snap doesn't work?

 

Not sure why the embedded codepen is not horizontal scrolling, but if you go to the codepen site it does horizontal scroll.

 

 

See the Pen bGoLBVL?editors=1010 by createsean (@createsean) on CodePen

Link to comment
Share on other sites

Hi CreateSean, 

 

This will only work if your sections are as wide as the screen.

snap: 1 / (sections.length -1),

 

Which would be equivalent to a snap array like this.

snap: [0, 0.3333, 0.6666, 1]

 

But again, that would only work if your sections are as wide as the screen. So you need to adjust that snap array to match with whatever ratios your sections correspond to.

 

  • Like 1
Link to comment
Share on other sites

Hello there! 

 

So the scroll snap calculation you have here is dependant on you having full width sections.

 

It's works out as 0.33 which means it's going to snap 1/3 of the way through the timeline, the 2/3 of the way, then 3/3 of the way.

 

See the Pen GRMQWej by GreenSock (@GreenSock) on CodePen

 

In your pen the sections aren't full width so this isn't what you want, you'll never actually reach the third snap point - it'll never scroll far enough for the yellow section (screenshot below) to touch the left hand side of the screen.

You only want to snap in two places. On the first and second sections.
 

 

Screenshot 2021-12-29 at 17.14.30.png

 

Now I'm 100% sure there's a better mathsy way to do this - but I'm bad at that - so I'd probably use the array option instead. A little trial and error got me...

 

snap: [0.358, 0.715]

See the Pen JjrpNdj by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

5 minutes ago, Cassie said:

Now I'm 100% sure there's a better mathsy way to do this - but I'm bad at that - so I'd probably use the array option instead. A little trial and error got me...

 

Somewhat related, although I was doing height and going for the center, but still a similar process.

 

 

And how to apply that as a dynamic array.

 

 

 

  • Like 2
Link to comment
Share on other sites

Heya! The answer was linked in Blake's post.

It needed to be tweaked a little to use width instead of height and to align to the left side instead of the center. Like so.

See the Pen LYzQgwW?editors=1011 by GreenSock (@GreenSock) on CodePen



I'm utterly terrible with math - but if you take it slow and work through line by line, console logging as you go to work out what's going on - you'll learn a ton.

 

I'm sure you'd understand more than you think if you took the time! In future, try to attempt it yourself and link to an updated codepen explaining what you're confused about.

 

Then we can help talk you through it.

Link to comment
Share on other sites

@Cassie That makes sense - but I'm not sure how to insert the 0 and 1 into the array.

 

I tried this let snapValues = [0,1]; but that didn't do anything. I figure that's cause snapValues is being set further down, but I looked at that and don't know what to modify in order to add the 0 and 1.

 

Really appreciate all your help. Javascript is really my weakest skill and I'm lost here.

 

edit

 

experimented some more and setting let widths = [0, 1] seems to work

Link to comment
Share on other sites

No worries. Just take it one small bit at a time.

 

What is it you're not understanding? How snap values work or how to adjust the array?

 

--- Let's look at how to adjust the array.

Task - add a 0 to the beginning of the array

 

Currently we have an empty array, we're then looping through the array of widths, doing a little math and adding the those calculated numbers into the snapValues array.

 

let snapValues = [];
let prev = 0;

snapValues = widths.map((width, i) => {  
  let current = (prev + width) / totalWidth;
  prev += width;
  return current;
});

return snapValues;

If you log this out to the console...

Screenshot 2021-12-30 at 21.28.17.png

So we want to add a zero at the beginning of that array.

 

Maybe map is confusing you? We could rewrite it like this.

Add an array with a 0 in, then loop through the widths, do some calculations and then push each new value into the array (after the 0)

let snapValues = [0];
let prev = 0;

widths.forEach((width) => {
  let current = (prev + width) / totalWidth;
  prev += width;
  snapValues.push(current);
});  

 

That would work out as...

 

Screenshot 2021-12-30 at 21.34.47.png

 

 

See the Pen LYzQgwW?editors=1011 by GreenSock (@GreenSock) on CodePen

 

Hope this helps.

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