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 }

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

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: https://codepen.io/justin-benner/pen/qBpqQpN 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.

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: https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f (Fake Horizontal Scroll with Fake Pin) https://codepen.io/GreenSock/pen/YzygYvM (Horizontal snapping sections) https://codepen.io/GreenSock/pen/ZEpNLZa (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.