Jump to content

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

# Scroll snap at center

Go to solution Solved by AkhilRaja,

## Recommended Posts

i have this horizontal scrolling website with different width per sections, what im trying to do is that when i stop scrolling it should scroll snap at the center of the current section, for visual i added span with 100vw with black color opacity box.

See the Pen poWVeKe by AkhilRaja (@AkhilRaja) on CodePen

##### Share on other sites

Hi Akhil,

Check out this thread and all the links in it.

• 3
##### Share on other sites

i cant find what i was looking for in the given link

##### Share on other sites

You'll be able to put together a solution if you read through that thread Blake posted!

Here's the specific sub-thread that will help -

And the specific snippet - although this will need to be tweaked for horizontal scrolling

```let heights = [356, 129, 293, 188];
let totalHeight = 0;
let prev = 0;

heights.forEach(height => totalHeight += height);

let snapArray = heights.map((height, i) => {
let current = (prev + height / 2) / totalHeight;
prev += height;
return current;
});```

And here's the post where I did that - although this is aligning to the left instead of center.

If you read through those examples you'll have your solution.

Why don't you try to implement it? If you get stuck, feel free to post a demo of what you've tried and we'll happily take a look.

• 3
##### Share on other sites

i try to read them and understand them but its too advance for me i cant understand it 😭

##### Share on other sites

Just give it a shot, and if you get stuck, we can nudge you in the right direction. Instead of using height, you would use width.

• 1
##### Share on other sites

See the Pen poWVeKe by AkhilRaja (@AkhilRaja) on CodePen

this is the best i can do and im also bad in maths class

##### Share on other sites

How about this?

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

• 2
##### Share on other sites

thank you so much @OSUblake its working now

and i didn't think of this "2 - window.innerWidth / 2", it was crazy it work like this.

let current = (prev + width / 2 - centerX) / totalWidth;

##### Share on other sites

i have few more questions i need some time but for now thank you on helping me on this @OSUblake and @Cassie

• 1
##### Share on other sites

See the Pen poWVeKe by AkhilRaja (@AkhilRaja) on CodePen

now i need help with two things

1 -how can i do this like add ease: sine.inOut with snapArray() funtion
snap: {
snapArray(),
delay: 0,
ease: "sine.inOut"
}

2 -how can i add start: "16.7% 100%", end: "16.7% 0%", dynamically to active thisSection, im trying to add start and end at left side of 100vw section

##### Share on other sites

for example what i trying to achieve is set start: "16.7% 100%", end: "16.7% 0%", at start left side of Section B

##### Share on other sites

Hey @AkhilRaja

So you'll need to add snapTo to that object.

```snap: {
snapTo: snapArray(),
delay: 0,
ease: "sine.inOut"
}```

Quote

2 -how can i add start: "16.7% 100%", end: "16.7% 0%", dynamically to active thisSection, im trying to add start and end at left side of 100vw section

I'm afraid I don't understand this - could you explain without using GSAP/coding terminology? Just explain in words what you want to happen visually.

Thanks!

• 1
##### Share on other sites

40 minutes ago, Cassie said:

I'm afraid I don't understand this - could you explain without using GSAP/coding terminology? Just explain in words what you want to happen visually.

ok so if you open my codepen website then scroll to section B then look at left side, i added START and END trigger on the left side of sectionB

sectionB has width of 150vw and span width is 100vw, what i want to do is add START and END trigger on the left side of SPAN element.

i can do this manually for all the sections but i want to know is there any way of doing it dynamically with all the sections of different width sizes

##### Share on other sites

46 minutes ago, Cassie said:

So you'll need to add snapTo to that object.

i dont understand by add a function to an object, its advance stuff for me 😭

##### Share on other sites

I added the snippet you need in the comment! 👇🏻

```snap: {
snapTo: snapArray(),
delay: 0,
ease: "sine.inOut"
}```

• 1
##### Share on other sites

51 minutes ago, AkhilRaja said:

i can do this manually for all the sections but i want to know is there any way of doing it dynamically with all the sections of different width sizes

Good news - Sure you can definitely do it dynamically

Bad news - It will definitely involve writing some code to work out that position. The type of code involving maths.

• 1
##### Share on other sites

Oh wait! No, even better news - I'm wrong. You can in fact change the trigger element. 🥳

See the Pen ZEXjOPg?editors=0010 by GreenSock (@GreenSock) on CodePen

• 2
##### Share on other sites

thats so amazing that we can use trigger: span, actually my mind is still processing horizontal scroll without this new feature of containerAnimation: scrollTrigger, thats why i didnt think of this

##### Share on other sites

• Solution

i want to thanks @OSUblake and @Cassie for always helping me learning new things in GSAP and thanks everyone in the gsap family and community, you guys are amazing.

• 2

## 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.
×