Jump to content


Getting offset top if you have a previous pinned section ScrollTrigger

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 . 



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Nice! Thank you. Tweaked codepen incoming 👀

Link to comment
Share on other sites

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

@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



  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 


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.