Scroll snap at center

[AkhilRaja]

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.

[OSUblake]

Hi Akhil,

 

Check out this thread and all the links in it.

 

 

[AkhilRaja]

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

 

[AkhilRaja]

this is what i want to do

https://developers.google.com/web/updates/2018/07/css-scroll-snap#example_-_horizontal_gallery

here its stop at the center

https://snap.glitch.me/carousel.html

its css snap but i want to do this with scrolltriger snap

[Cassie]

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.
 

[AkhilRaja]

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

[OSUblake]

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.

[AkhilRaja]

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

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

[OSUblake]

How about this?

 

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

 

[AkhilRaja]

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;

[AkhilRaja]

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

[AkhilRaja]

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 

[AkhilRaja]

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

[Cassie]

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!✨

 

 

[AkhilRaja]

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
 

[AkhilRaja]

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 ?

[Cassie]

I added the snippet you need in the comment! ??
 

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

 

[Cassie]

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.

[Cassie]

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.

[AkhilRaja]

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


 

[AkhilRaja]

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.