Query Regarding Combining Pin & Fade

[Kane]

Hi There,

I'm having a small hurdle with a project I'm working on and I'm wondering if you can help.

I have a navbar that i want to fade in and then stick to the top of my site once the default slider is off the screen. The default slider is represented by the red section, the navbar is represented by the green section. I want the div to stick to the top of the screen once the user has scrolled a full page height's worth. However, if I add pin: true to my function, I lose how the nav fades in while I'm scrolling.

How do I go about having both of these work parallel?

Best,
Kane

See the Pen dymOGzz by kanetesta (@kanetesta) on CodePen

[akapowl]

Hello @Kane

 

1 hour ago, Kane said:

However, if I add pin: true to my function, I lose how the nav fades in while I'm scrolling.

 

That is the case because you are trying to mix two different default behaviours into one ScrollTrigger.

 

The default start value for non-pinning ScrollTriggers is 'top bottom' while the default start value for pinning ScrollTriggers is 'top top'.

 

So if you just set pin to true on that one ST you have there, it will by default start when the trigger element's top hits the top of the viewport instead of when its top passed the bottom of the viewport if you didn't set pin to true - does that make sense?

 

Suggestion:

Just set up a second ScrollTrigger for the pinning for however long you want to pin your navbar. I set the end to 'max' here so it will stay pinned throughout the rest of the page - if you use a different value for this, like e.g. "+=500px" you will probably also have to set pinSpacing to false.

 

Some sidenotes:

toggleActions and scrub do not work side by side - either one or the other can control the tl/tween - if you have both set, the scrub will always win.

And if you only have one tween (which of course might not be the case in your actual project but only just for this demo) there is no need to use a tl.

 

I hope this will help. Happy tweening and welcome to the GSAP forum!

 

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

 

[Kane]

On 7/14/2022 at 6:53 PM, akapowl said:

That is the case because you are trying to mix two different default behaviours into one ScrollTrigger.

Thanks @akapowl
Ah yes it makes sense. Thanks so much for the quick reply.

One more small tweak if I could get your help please as I've been stuck on this for a while also. Again, I can get these two animations to work independantly, but not on the same timeline. Maybe there's something wrong with my understanding.

I want to have a div at the bottom of the landing screen (refer to the yellow block in the codepen). When a user scrolls, I want the next divs to gradually overlap it. However, the offset I am setting to do this animation, causes the header to become fixated outside of the view. How do I go about fixing this?

Thanks so much in advance. Is there any way I can tip you for your help?

See the Pen oNqZOJL by kanetesta (@kanetesta) on CodePen

[akapowl]

7 hours ago, Kane said:

However, the offset I am setting to do this animation, causes the header to become fixated outside of the view. How do I go about fixing this?

 

I don't see anything you tried in the codepen you posted - it only has the JS I provided you with before - so I can not tell you anything about that.
 

7 hours ago, Kane said:

When a user scrolls, I want the next divs to gradually overlap it.

 

I'm also not sure I understand what it is you actually want to achieve - at least in the context of you adding an 'offset to do this animation'.

 

From what I understand, you basically want to pin another element in a different place, so what I mentioned in my first post would also apply here.

You will have to create another ScrollTrigger that will handle that for you - and also make sure to properly position things via CSS to begin with.

 

This is what I understand you wanted to achieve. Does that help?

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

 

 

7 hours ago, Kane said:

Thanks so much in advance. Is there any way I can tip you for your help?

You're good, no need for a tip. Just keep in mind that this forum isn't intended for custom code requests á la 'I want X to happen after Y and then do Z' .

 

[Kane]

3 hours ago, akapowl said:

This is what I understand you wanted to achieve. Does that help?

Hi Again @akapowl,

Sorry for the confusion, it seems the pen I was working on didn't save correctly. I have attached the correct one below.

Basically I have two timelines that are working independantly. I have one commented out to start so you can see the first timeline I have made. Please invert the commenting to see the second animation also. When I uncomment them both, the green div no longer fixes to the top.

What I suspect is that the offset that I am using to slowly slide the div2 up, to cover the yellow div, is making the fixed position of the green div outside of the view. 

Any futher assistance would be great, and I thank you for your patience with me on this one. I think it's not far off being the right implementation!

NOTE: You may need to open the pen in fullscreen otherwise the y displacement looks quite unnoticeable.

See the Pen oNqZOJL by kanetesta (@kanetesta) on CodePen

[akapowl]

 

1 hour ago, Kane said:

I think it's not far off being the right implementation!

 

No, there are actually a couple of things you'll have to consider now.

1. I didn't even notice before, because it wasn't apparently neccessary before for things to work, but you are actually making one of the most common ScrollTrigger mistakes when it comes to timelines. Don't put ScrollTriggers on individual tweens of a timeline, they only belong on the timeline itself!
    
2. It's best to never animate the element you use as a trigger - if you change positioning like on the y axis here, it is bound to throw off what ScrollTrigger calculates as start and end because you change where they actually are in the native flow. Not only that, but in your case you also change the actual height of the page because of that. What you should do instead is wrap the element you are going to tween on in a div and use that wrapping element as the trigger then. Now even if you do that in your scenario, you will create white space at the bottom, so consider setting the background on the wrapping element instead.
    
3. You will need to incorporate that offset you created (which you had mentioned before) into the start and end of your ScrollTriggers.
    
4. Since you are applying transforms to the parent of the element you want to pin later on, you will have to use pinType: 'transform' or pinReparent because those transforms on the parent create a new context for the position fixed that is used by default for pinning in this case, and it won't work like you'd imagine

 

 

This is how I would approach it:

 

Create one timeline with a scrollTrigger attached, use #div1 as the trigger, starting when its bottom hits the bottom of the window (so right away) and ending when its bottom hits the top+=150px (the 150px making up for the amount you tween #div2 upwards). Add your two tweens to that timeline and position them via the position parameter to both start right at 0.

 

For the pinning of #div3 create another ST also using #div1 as the trigger but pinning #div3 - of course also make sure to properly set the start accordingly.

 

Hope it will help.

 

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

 

[Kane]

Hey @akapowl,
Thanks so much for the detailed reply... you have gone above and beyond for me! Much appreciated.