Michael Baumer

Yay, up and running now! Thanks @akapowl for gently pointing that out and including the doc reference, which I had previously read but failed to grasp Seems obvious now... thanks again. https://codepen.io/rmbaumer/pen/oNEgrOp

I think the issue I'm running into is pinning multiple animations within the wrapper. When I use the wrapper approach, the start/end markers on subsequent animations aren't being calculated as expected. It looks like the height of the pinned sections is not being accounted for: https://codepen.io/rmbaumer/pen/eYVmgBN So, if I don't use a wrapper, the animation start markers are correct but there is whitespace below. If I use a wrapper, there is no whitespace, but the start marker is off for all subsequent animations. Is there a way around this?

Hi Jack - that's exactly what I was looking for, thanks! Pinning the additional wrapper works great in the codepen but not for my actual usecase. I'll do some more testing and see if I can isolate why.

When pinning elements that are shorter than 100 viewport height, there is whitespace added below the pinned element. For elements 100vh or larger this is a non issue since the whitespace is below the fold. However, if I want to pin an element that doesn't take up the whole viewport, how can this be accomplished?

Thanks so much to both of you @OSUblake and @akapowl - I was able to achieve the desired effect in my real world use-case. However, I am running into some inconsistencies with the start/end triggers, especially on iOS. Are either of you by chance available for some side work? If so, I will DM you a link to the project so you can take a look. Thanks again!

Thanks so much @akapowl and @OSUblake - both of your examples have given me alot to work with. I'm having trouble adapting the examples when one of the sections has anything other than predictable/fixed height content though. This is the closest I've been able to come up with so far. https://codepen.io/rmbaumer/pen/zYpjaPR Basically, I added an inner container to the Reveal section so it could be scrollable. And, am using onLeave and onEnterBack callbacks to adjust the Reveal section's z-index to ensure scrolling is available when needed. It sometimes hangs though and leaves the Wiper section stuck halfway when you scroll the Reveal section. When scrolling back up, onEnterBack seems to work as expected. Instead of onLeave, is there a different callback that fires when the Wiper is completely out of view? Or a better approach altogether?

OSUBlake - that's exactly what I was going for, thank you! I'm also trying to find a way to allow the "Wiper Section" to be smaller than the viewport while still pinning the next section's content to the top of the view port, instead of the top of the Wiper Section. Do you see any logical way to do this without the "Revealed Content" also covering up the "Initial Content"? https://codepen.io/rmbaumer/pen/ExoLEbz

I'm trying to create an effect similar to Layered Pinning from Bottom except the first section should be pinned to the top, creating a revealing/wipe effect between two sections. I've tried pinning the first section and covering it from the bottom, which works. But, I can't find a way to pin the following "reveal" section to top. Has anyone here tried this before?

Position sticky works for the main header, but not for the sub headers. Is it possible to keep the sub headers persistent while the section animations scrub?