Jump to content
Search Community

Scroll snap at center

AkhilRaja test
Moderator Tag

Go to solution Solved by AkhilRaja,

Recommended Posts

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



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

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

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

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