Scrolltrigger / snapping. Layered sections with content below.

[gwineman]

Hello - I'm hoping to alter the demo on this site here: 
Original CodePen from GSAP

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

This works perfect for my needs, but I want to have a final layer with long-form content below the snapping sections. When I add the additional section, the functionality breaks - Any thoughts?

 

My Codepen

 

See the Pen RwLvwaY by ambidustrious (@ambidustrious) on CodePen

[gwineman]

Here's a little better example of what I'm going for. This uses CSS scrollsnapping with GSAP ScrollTrigger

 

The Headline should be "pinned" through the scroll-snapping section... and then everything should release when the lower-content comes into view (or - lower content can just cover the "snapper" class).  Hopefully you can make sense of this - my demo isn't working at all...

 

See the Pen oNGmXdZ by ambidustrious (@ambidustrious) on CodePen

[OSUblake]

I'm a little unsure about what the problem is or how to advice as your demo doesn't work correctly, even if you remove ScrollTrigger. You have some nesting issues that need to be resolved first. Notice how there are 2 scrollbars.

 

 

[gwineman]

Just hoping to pin h1 untill the bottom of the ".snapper" div - and then show the content underneath everything.  Originally tried to do this using all GSAP, but didn't think it was possible... which why I switched to CSS snapping... Not sure what the best way is to accomplish what I need

 

I updated the pin and commented out the lower content. I don't see the dual scroll.... but do you still see it now?

[OSUblake]

16 hours ago, gwineman said:

I updated the pin and commented out the lower content. I don't see the dual scroll.... but do you still see it now?

 

I do if I remove position: fixed from the header's CSS, which would be needed as you can't unpin something that is fixed. So you probably need to set it up more like this.

 

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

 

 

[gwineman]

Thanks - I think I have a version that's mostly working... still just doesn't seem like the best way to do this. It works pretty well on desktop... but there's a lot of jumping on a mobile device.

 

You will probably need to view the pin fullscreen to see what I'm trying to do

 

Updated pin here:

See the Pen oNGmXdZ by ambidustrious (@ambidustrious) on CodePen

[OSUblake]

12 hours ago, gwineman said:

still just doesn't seem like the best way to do this

 

Looks fine to me.

 

12 hours ago, gwineman said:

but there's a lot of jumping on a mobile device.

 

What browser and OS are you seeing the jumping on? If it's iOS, it might be an issue with scrolling be handled on a different thread, and the only way to fix that is to implement a full JS based scrolling solution...