Scrolling side content fades out the whole section.

[Fidda]

Greetings,

 

I'll go straight to the point.

 

Here's the expected behavior:

- I would like the whole section (hero) to smoothly start scrolling out and lose opacity once end of the side panel is reached (last of the 'hello' blocks).

 

Here's what currently happens:

- The hero doesn't take enough space (I think?), and the section following it goes above it once a scroll point is reached. The hero doesn't fade out (I realize I haven't done anything for that part, but I'm not sure how to implement it so that it starts fading out once the end of the side panel is reached).

 

Kind regards,

Fidda

See the Pen vYXXBvY by vtinev1 (@vtinev1) on CodePen

[ZachSaucier]

Hey Fidda and welcome to the GreenSock forums. I'm not understanding your end goal.

 

1 hour ago, Fidda said:

I would like the whole section (hero) to smoothly start scrolling out and lose opacity once end of the side panel is reached (last of the 'hello' blocks).

So like a set duration animation? Or a scrubbed animation? If a scrubbed animation what should the end point be if the start point is the bottom of the hello sections? 

 

In either situation you likely need more room for scrolling in your demo. Additionally you should be clear when exactly you'd like the animation to start - I am guessing when the left section's bottom reaches the right section's bottom?

[Fidda]

15 minutes ago, ZachSaucier said:

Hey Fidda and welcome to the GreenSock forums. I'm not understanding your end goal.

 

So like a set duration animation? Or a scrubbed animation? If a scrubbed animation what should the end point be if the start point is the bottom of the hello sections? 

 

In either situation you likely need more room for scrolling in your demo. Additionally you should be clear when exactly you'd like the animation to start - I am guessing when the left section's bottom reaches the right section's bottom?

 

A scrubbed animation is what I want, I'm guessing the end point should be at the start of the next section or a couple of pixels below the start point. Yes the fade out should start when the end of the side panel is reached. However if I apply `opacity: 0,` to the current code it fades out the boxes, that's why I have no idea how I would implement it.

 

So the start of the fade out is after you've seen all the posts on the right and the end is after you've scrolled a bit more (to the following section).

 

Edit: If you comment out the JS and apply overflow: hidden; to .hero__aside, you will see the correct spacing between the sections.

[ZachSaucier]

Most of your issues are stemming from your CSS not being what it needs to be. To create an effect like this, you want to set your layout to where the overflow of your right section isn't restricted and your left section doesn't take up the full height of the right section. Something like this.

 

Once you've done that, setting up your ScrollTrigger for the pinning is much simpler. You simply need to have it start when the left content is at the top of the viewport and end when the right content's bottom is at the bottom of the viewport. To do that you should make use of the endTrigger property of ScrollTrigger.

 

Then setting up the fade out is easy. You just create another ScrollTrigger with the start the same as the previous ScrollTrigger's end point and then the end point whatever you'd like it to be.

 

Something like this:

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