How to Use ScrollTrigger For Scroll Snapping with Transition to Normal Scrolling

[Chris Heuberger]

Hi, I'm trying to use GSAP ScrollTrigger to fade 3 fixed headers in and out sequentially with transitions that are tied to 3 trigger panels, each with scroll snapping behavior based on this demo:

After the 3 trigger panels have been scrolled, I'd like normal scrolling to apply so that the entire header section scrolls out of view along with the ensuing content (sort of like the featured projects section here: https://katiforner.com/).

 

The attached CodePen is almost there but when the content section is reached, the third trigger panel reappears for some reason and must be scrolled again before ensuing content scrolls into view. Any idea what's going on and how I can get that header section to seamlessly scroll up with the content section?

 

Thanks,

Chris H 

See the Pen dyvyMbd by ChrisBup (@ChrisBup) on CodePen

[GreenSock]

This looks very odd to me - you've got it inside your .forEach() loop, so it's re-creating the same thing over and over again:

ScrollTrigger.create({
  trigger: ".content",
  start: "top bottom",
  toggleClass: {targets: ".header-wrapper", className: "unfixed-header-wrapper"},
  toggleActions: 'play pause resume reverse',
});

When I removed that, it seemed to resolve the issue you described (unless I misunderstood). 

 

Side note: there's no purpose in having toggleActions on a ScrollTrigger that has no animation associated with it, so it could be deleted from the block above. 

 

Happy tweening!

[Chris Heuberger]

Thanks for the reply! When I move that snippet outside of the forEach() loop and remove the toggleActions, the issue persists (at least in Chrome and Firefox): 

See the Pen VwpvGyZ by ChrisBup (@ChrisBup) on CodePen

 

The issue being: after the three trigger panels have reached the top, continuing to scroll puts the third trigger panel back at the bottom requiring the user to scroll past it again. The attached screenshot is what I'm trying to avoid. When the red box becomes unfixed and starts to scroll, the section that "pushes it up" should be the "ensuing content" section, not the "trigger panel three" section.

 

 

[GreenSock]

Yeah, it looks like layout logic issues in your code. You're setting that header to position: relative (from fixed) which means it'll suddenly affect layout, pushing other things DOWN. I assume you meant to make it position: absolute so that it doesn't affect layout. 

 

I think your start/end values were a bit off as well. Here's my fork that represents what I assume you wanted: 

See the Pen gOmaEQN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

[Chris Heuberger]

Ah yes, I was just posting that same fix about the position, thanks. But I don't quite grasp the start/end distinction. What is that updated line saying?

[GreenSock]

2 hours ago, Chris Heuberger said:

But I don't quite grasp the start/end distinction. What is that update line saying?

Are you asking what this means?:

end: "bottom top+=1",

It's just saying to end when the bottom of that trigger element hits 1px down from the top of the viewport. So in the backwards direction, it'll fire the onEnterBack there. I added 1 pixel to avoid overlap.