ScrollTrigger: Wipe between pinned sections

[Michael Baumer]

I'm trying to create an effect similar to

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

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?

See the Pen VwyxrjY by rmbaumer (@rmbaumer) on CodePen

[OSUblake]

Hi Michael,

 

I'm not exactly sure how you are expecting this to look, but your probably going to need to nest stuff differently, so maybe like this?
 

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

[Michael Baumer]

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"?

 

See the Pen ExoLEbz by rmbaumer (@rmbaumer) on CodePen

[akapowl]

57 minutes ago, OSUblake said:

[...] so maybe like this?

 

Oh, that's a nice one.

 

I have come to 3 more variations as I was tinkering with it.

 

Edit in between: and now that you mentioned it, @Michael Baumer - those all do work with the wiper being 50vh tall.

 

Edit 2: I forgot to mention that I reverted back to an older version of GSAP & ST because in the current version there appear to be issues with regard to pinning and I wanted to make sure those examples also work on resize.

 

Each has some changes to the CSS styling, and an extra inner wrapper on either the top or bottom section. Depending on how exactly things are supposed to work out for you in the end, one might be more useful than the other.

 

You could have that blue section positioned fixed from the start e.g. - but this one is sort of cheaty as it pins an inner wrapper of the top section and unpins it when the center hits the center of the viewport, so depending on how much content you have in that first section it might not look good / be feasible.

 

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

 

 

 

Or you could add an inner wrapper to that blue section instead with an overflow: hidden on the section itself and then tween the inner wrapper in the opposite direction of it scrolling, from off-section.

 

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

 

 

 

Or do technically the same by first moving the inner wrapper up via a negative margin-top e.g. and then instead of counter-tweening pin it with pinType: 'transform'.

 

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

 

 

[Michael Baumer]

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.

 

See the Pen zYpjaPR by rmbaumer (@rmbaumer) on CodePen

 

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?

[akapowl]

 

I think I stared at it a bit too long now - if my brain wasn't foggy before, it is now.

 

How about something like this - might even be the simplest of all the approaches I shared (yeah, my brain was definitely foggy before 😅 )  but still comes with the same caveat mentioned with the position: fixed one. If that works for you though, go for it.

 

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

 

[OSUblake]

Thank you @akapowl

 

My brain is foggy too and I was about to test out something much more complicated with clip paths.

 

[akapowl]

22 minutes ago, OSUblake said:

Thank you @akapowl

 

My brain is foggy too and I was about to test out something much more complicated with clip paths.

 

I was close to going down that road too 😅 Although in the end it might even work better and not be that complicated after all 🤔

 

That really was just a lucky punch after hammering in different things - it feels sort of tricky this scenario.

 

Before hitting that one, I was going to suggest these, with the bottom section having an inner wrapper and that inner wrapper being positioned absolute. But since it was absolute, the height of the section itself would have had to be set/adjusted via JS 'manually' on load and resizes - not nice.

 

Also, using pinType: 'transform' or the counter-tweening can lead to some jumpiness sometimes, so it's good that there is a way that actually doesn't need those, even if it isn't 'perfect' either. 

 

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

 

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

 

[Michael Baumer]

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!