Layered Pinning and Revealing Panels

[JackiePaper]

Hey guys!

 

I'm new to GSAP, new to ScrollTrigger, new to front-end design, new to everything. So consider yourself warned. Sorry.

 

Here's what I'm hoping you can help me with:

 

I want to have a series of panels, some that "push up" (like regular scrolling), some that are "revealed," and some that overlay and "conceal" (like this doc example) the previous panels. Three of the panels would play a ScrollTrigger scrubable series of frames, like the famous AirPod video. And some would just have regular, cool GSAP animations. I'm working off the Layered Pinning example in the docs, and from the AirPod video examples in the forums.

 

So here's my questions:

1. Is it possible to pin a panel to play it's animation, or AirPod video thing, and then continue with the layered pining effect like in the doc example?

2. Is there a beginner-friendly way to do all that "pushing up," "revealing" and "concealing?" And if there is, can you point me in the right direction? I can't seem to figure out how to make it all go together.

 

Thanks to anyone for taking the time to look at this! Let me know if I'm not being clear enough and I'll try to explain. Thanks again!

See the Pen mdPvGPK by JackiePaper (@JackiePaper) on CodePen

[ZachSaucier]

Hey Jackie and welcome to the GreenSock forums. 

 

All of what you're trying to do is possible but combining it all is non-trivial. So to answer your second question: no, there's not an easy way to do it all  You need to have a firm understanding of what's going on in each example and then set up your project to work in the flow that you're desiring. 

 

To answer your first question, here's a very quickly done way of doing that. Basically I made the .blue section twice as big and used two ScrollTriggers: one for the animation for the first half and one for the pinning to keep it in place so that the red section can cover it:

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

[JackiePaper]

Hey thanks Zach! That helped a lot! Using your example I was able to cobble something together. So thanks!

 

Ok, last question if anyone has a sec. I'm trying to get panel two to "reveal" panel three. I saw the doc example on Layered Pinning from the Bottom, but I don't think that will work for me, since it has a container with overflow:hidden, and I need things to not be hidden in order to "scroll up" on certain panels. Is there a way to do this with what I've already got? If not, that's okay. I think I'm close enough for what I need.

 

Thanks again!

 

See the Pen MWyLZew by JackiePaper (@JackiePaper) on CodePen

 

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

[ZachSaucier]

13 hours ago, JackiePaper said:

Is there a way to do this with what I've already got?

You'll have to position the third panel underneath the second panel from the start. Then when they reach the top of the viewport you pin the third panel for the duration of the second panel leaves the viewport. 

[akapowl]

 

Sorry for crashing the thread, but I gave it a shot myself.

 

As @ZachSaucier already mentioned, it mainly is a matter of positioning the sections and applying pinning ScrollTriggers accordingly.

 

Note, that this is not an ideal solution - it works on full-screen for me, but doesn't work well with smaller window sizes for example.

Edit: Actually it does work as expected on smaller window-sizes, too - just not when resizing. So you'd have to add in all the resize logic.

 

Just maybe see this as some sort of inspiration.

 

 

See the Pen 20bea7ef0b154b3c45496c611a79c6b6 by akapowl (@akapowl) on CodePen

 

 

[JackiePaper]

2 hours ago, ZachSaucier said:

You'll have to position the third panel underneath the second panel from the start. Then when they reach the top of the viewport you pin the third panel for the duration of the second panel leaves the viewport. 

Oh right! That makes sense. Thanks for wallking me through this.

And thanks @akapowl for jumping in here with your own spin on it! Your example is perfect for what I need!

 

Thanks again guys!

[jimmirbn]

On 9/25/2020 at 3:21 PM, akapowl said:

 

Sorry for crashing the thread, but I gave it a shot myself.

 

As @ZachSaucier already mentioned, it mainly is a matter of positioning the sections and applying pinning ScrollTriggers accordingly.

 

Note, that this is not an ideal solution - it works on full-screen for me, but doesn't work well with smaller window sizes for example.

Edit: Actually it does work as expected on smaller window-sizes, too - just not when resizing. So you'd have to add in all the resize logic.

 

Just maybe see this as some sort of inspiration.

 

 

 

 

@akapowl Im really interested in your example, could you repost it?
@JackiePaper is your codepen the updated one? Thanks, these examples helps a lot.

 

 

[akapowl]

 

Here you go @jimmirbn, it should be visible again.

[AnthonyR]

On 9/25/2020 at 2:10 PM, ZachSaucier said:

You'll have to position the third panel underneath the second panel from the start. Then when they reach the top of the viewport you pin the third panel for the duration of the second panel leaves the viewport. 

Hi Zach, would it possible to post some example code for this please? I'm struggling to make this particluar reveal work. Many thanks

[OSUblake]

@akapowl has a demo above.

 

See the Pen 20bea7ef0b154b3c45496c611a79c6b6 by akapowl (@akapowl) on CodePen