Pinned Section + Horizontal Scroll + Layered Tab Pinning

[Justin Benner]

The GSAP plugin is amazing, and I've had some luck implementing some things on various sites. However, I'm trying to design a section for my new website, and I'm running into a wall.

 

 

I've reviewed several CodePens, and done a ton of Googling, but I just can't seem to combine the various demos I've found. The demos I've tried to work off of include:

 

See the Pen d076a9cf4c1a952a0bc921a76bc2202f by akapowl (@akapowl) on CodePen

 (Fake Horizontal Scroll with Fake Pin)

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

 (Horizontal snapping sections)

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

 (Animate horizontal sections)

 

The idea is this: the user scrolls down to this section. The section is pinned in place. As the user continues to scroll, the first "tab" delineated by vertical dashed lines scrolls into place overtop of the Digital Marketing tab. The content in that tab is scrubbed in with opacity changes, or perhaps with a toggleClass on that tab. Once that tab is revealed, the next one slides into place, and so on until each tab has been revealed, at which point the pin is revealed. When the user scrolls back up the page, the whole thing goes in reverse.

 

As you can see in the CodePen I've submitted, I have made some limited progress, but I can't seem to get it to go full width. I also don't understand how to apply this successively to each tab, one over top of another.

 

If anyone could lend a hand or point me to the right direction, I'd appreciate it very much.

 

See the Pen BaJQPrV by justin-benner (@justin-benner) on CodePen

[OSUblake]

Welcome to the forums @Justin Benner

 

I think the best way to approach complicated scrolling animations is to NOT use ScrollTrigger at first. Just make it a normal animation that plays out normally. ScrollTrigger is just a way to control your animations, much like GSDevTools. So your mental mode of problem solving should be how to make that animation, not how to use ScrollTrigger to make that animation. Once your animation looks correct, all you have to do is hook it up to ScrollTrigger and you should be good to go.

 

 

 

[Justin Benner]

Hey Blake,

 

Thanks for the welcome! I can see what you mean.

 

I had this setup working as intended previously, but it was based on applying a class to each tab on hover, rather than scrolling through them and controlling their expansion by scrubbing. Here is a CodePen of that work:

 

See the Pen qBpqQpN by justin-benner (@justin-benner) on CodePen

 

If you don't mind, do you have any advice on making the above CodePen work with ScrollTrigger, or perhaps even a demo that you've seen that may get me in the right direction? I don't want to waste your time and I appreciate any help you can give.

[OSUblake]

Have you used GSAP and Timelines before? If so, you might be overthinking this. Just break it down it steps, like what you want to happen.

 

1. Animate 1st item closed and 2nd item opened
2. Animate 2nd item closed and 3rd item opened
3. etc

 

Just a very basic timeline. Now that I have my timeline, I can hook it up to a ScrollTrigger and it should be all good.

 

Note: I'm note suggesting that you use any of the code or CSS from this demo. I'm just showing the concept of making a timeline.

 

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

 

[Justin Benner]

Hey Blake,

 

Thanks very much, I'll read the docs over and see what I come up with. If I come up with a solution or make any significant progress, I'll post it here later for others. Appreciate it.

 

Justin

[Justin Benner]

I was able to get this working. It is very clear that, as @OSUblake had suggested, I was overcomplicating things. Once I had established the animation doing what I wanted, hooking it up to ScrollTrigger was trivial. In my case, all that was needed was to reference ScrollTrigger within the timeline:
 

            scrollTrigger: {

              trigger: ".work-item-holder",

              pin: true,   // pin the trigger element while active

              start: "top center", // when the top of the trigger hits the top of the viewport

              end: "+=1500", // end after scrolling 1500px beyond the start

              scrub: 0.5, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar

            }