Getting offset top if you have a previous pinned section ScrollTrigger

[daniel.mt 38 Likes (Newbie)]

Hello. Hope you're all good. I have a problem where I can't find a solution and I was wondering if I can get an idea. 

In the previous pen I have an horizontal scroller ( not the same in my current project but something really close to the pen ) followed by a carousel that scrolls one by one on each scroll. This was inspired by this pen: 

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

. 

 

Now the problem: in my pen and the one from the demos the start and end of each box is based on the window innerHeight and I can't figure it out on how I can start it once the user hits the carousel. The main idea -> goes through the horizontal scroller, the centered carousel is pinned, scrolls for like 300vh ( 100 vh = 1 scroll ) and then goes to next section. This isn't the only idea I tried various way of getting the offset().top of the centered carousel to start from there but without any success. 

 

Isolated carousel just in case: 

See the Pen yLbNxYW by visualbadger (@visualbadger) on CodePen

 

Thanks in advance and wish you a splendid day. 

 

The pen with the carousel and the horizontal scroller: 

 

 

See the Pen oNWXPJp by visualbadger (@visualbadger) on CodePen

[GreenSock 18,893 Likes (Superhero)]

I read your post a few times and I still don't really understand what you're asking. From what I can tell, it's behaving properly. 

 

Are you asking how to tie a tie a vertical scroll position to some kind of horizontal movement where you're centering a certain box? Can you elaborate a bit? Sorry if I'm missing something obvious. 

[daniel.mt 38 Likes (Newbie)]

Hey thanks for response. No problem I lost myself in details. Here is a shorthand of what I'm trying to achieve

 

Expected behaviour:

- the viewport hits the end of the horizontal scroller

- the top viewport hits the carousel-container

- the carousel starts moving

 

The current behaviour:

- the carousel starts moving way to early while the user is still on horizontal scroller. Once it reaches the carousel it already jumped to the next box . 

 

Please let me know if this makes more sense . 

 

 

[Cassie 5,659 Likes (Superhero)]

This seemed like a good use case for a snap array.

Idea being - animate the container instead of the individual blocks and then snap to the percentage point of the timeline that corresponds to when the box's center point is aligned.

But it's not working as I expected. In fact any array passed to snap is just snapping right back to the beginning of the timeline (I think)?
 

@GreenSock is this a bug or have I missed something?

See the Pen 7bdfc71e39f6574a148aefd2c3260729?editors=1111 by cassie-codes (@cassie-codes) on CodePen

[GreenSock 18,893 Likes (Superhero)]

Yep, sorry, the problem is just that the shorthand with an Array isn't recognizing that properly (it'll be fixed in the next release) - all you need to do is: 

// OLD (shorthand)
snap: [0, 0.1, 0.3, 0.7, 1]

// NEW
snap: {snapTo: [0, 0.1, 0.3, 0.7, 1]}

It's already fixed in this beta file: https://assets.codepen.io/16327/ScrollTrigger.min.js

[Cassie 5,659 Likes (Superhero)]

Nice! Thank you. Tweaked codepen incoming 👀

[Cassie 5,659 Likes (Superhero)]

Yeah! That's the ticket 

This seems to be a much easier way to do it - I'm also just using CSS to position the left side of the container in the center of the screen. That's what it's for after all, no need to make your life harder. ☺️

See the Pen 7bdfc71e39f6574a148aefd2c3260729 by cassie-codes (@cassie-codes) on CodePen

[Cassie 5,659 Likes (Superhero)]

This is the first time I've properly messed about with snap. Seriously good stuff!

[daniel.mt 38 Likes (Newbie)]

@Cassie  Thanks for the clean solution . It seems the most logical way of doing this type of thing although the request ( not mine unfortunately ) was to immediately snap without any previous movement of the carousel. 

 

Luckily after you posted your solution I headed to docs to see exactly what snap / snapTo does to and I stumbled upon a comment that lighted the solution . 

 

The main problem with mine was this part: 

 

start: () => (i - 0.5) * innerHeight + centerCarousel.offsetTop,
end: () => (i + 0.5) * innerHeight,

 

Where I took the thinking all wrong. So instead I removed the previous pin section and refactored the loop. Instead I added this:

 

trigger: '.carousel-container',
pin: true,
start: () => {
  return "top center+=" + (i * 25 + "vh")
},
start: () => {
  return "top center-=" + (i * 25 + "vh")
},

 

Thanks all for your time . Really appreciate. 

 

For whoever stumbles on this post: 

 

Check @Cassie solution 2 posts before as it's the cleanest. 

 

My final solution: 

See the Pen qBmOPOV by visualbadger (@visualbadger) on CodePen

 

 

[Cassie 5,659 Likes (Superhero)]

That is possible with my solution. As your slider is just one tween, you can use that tweens progress to set the initial position. 🥳

Only one extra lil tween -
 

gsap.to(slider, { progress: offsetPositions[0]})

See the Pen 2fd7e7d6dc0e477efbda8b4313f9977d?editors=0011 by cassie-codes (@cassie-codes) on CodePen

 

[Cassie 5,659 Likes (Superhero)]

I like your solution with the tweens though! Feels nice and snappy.

[daniel.mt 38 Likes (Newbie)]

Thanks a lot for your help.

Another possible solution is to add those offsetPositions to a timeline. Makes it more snappier... 

 

See the Pen oNWjaPa?editors=1111 by visualbadger (@visualbadger) on CodePen

 

 

 

I think I'll stick to the ones with multiple tweens as it's not entirely my decision . Thanks a lot for your time. Really appreciate.