Jump to content
GreenSock

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

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

Link to comment
Share on other sites

Hi Akhil,

 

Check out this thread and all the links in it.

 

 

  • Like 3
Link to comment
Share on other sites

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

 

Link to comment
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.
 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
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.

  • Like 1
Link to comment
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;

Link to comment
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

  • Like 1
Link to comment
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 

Link to comment
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

Link to comment
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!

 

 

  • Like 1
Link to comment
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
 

Link to comment
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 😭

Link to comment
Share on other sites

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

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

 

  • Like 1
Link to comment
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.

  • Like 1
Link to comment
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


 

Link to comment
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.

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