ScrollTrigger find center of multiple sections (snapTo)

[Sacha]

Hey, 

I'm trying to create two sections with scrolltrigger events and a snapTo, which snaps to the center of each section. Because it shouldn't be two single events, but the events should seamlessly transition from one to the other, I need to put both sections in one, and target this with a single scrolltrigger.

My idea was, that I use snapTo: [0.25, 0.75], so it would snap to the center of each section. This logic would work if both sections would be of the same height, but as soon as they have different heights, this doesn't indicate their true center.

If there a way to use scrollTrigger and calculate both centers, based on their heights, and using it in the wrapper scrollTrigger? Or do I have to find another way, calculating the centers of each section with normal JS code?

See the Pen by s (@s) on CodePen

[OSUblake]

You would need to calculate that yourself. Put all the section heights inside an array, and then try something like this.

 

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;
});

 

[OSUblake]

Just had to visually verify my work...

 

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

[Sacha]

Thank you for taking the time to help me out and writing this great example! Helped a lot, thanks!