Element pin not working as intented

[TOK7O]

Hello,

I'm new to GSAP and I wanted to use ScrollTrigger on my website. I just don't understand why pinning does not work well in my case, and I tried to make a good copy of my problem on codepen. The behavior I'm trying to achieve is that for the first 300px of scrolling the nav bar stays pinned, the rest of the page scrolls away and after 300px (where the animation ends and opacity is 0.5) the nav bar also scrolls away. I would be grateful for any solution that would make this work with mu previous fade in animation.

See the Pen xbKQJyr by TOK7O (@TOK7O) on CodePen.

[Rodrigo]

Hi @TOK7O and welcome to the GSAP Forums!

 

Maybe these demos can provide a good starting point:

See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen.

 

See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[TOK7O]

Hi @Rodrigo,

thank you for the demos but I see that both of them use position fixed, which I would like to avoid. If I understand pin correctly it's supposed to make the element stick in place while the scroll position is between the start and end values, which does not happen in my case. I'm wondering why that is, especially when you consider the fact that after you pass the end of scroll animation the element "teleports" to the top of the viewport. If you could please help me with what I'm doing wrong in my animation and why the animation works like I just described I would really appreciate it

[Rodrigo]

Hi,

 

That is exactly how pinning works, it wraps the element and pins that created element that wraps by adding position fixed when the start trigger passes the start point, so using position fixed is pretty much the same.

 

You can see here in the FAQ, How does pinning work under the hood?

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#faqs

 

Here is a very simple demo so you can inspect it with devtools and see how pinning works:

See the Pen YPKRBPz by GreenSock (@GreenSock) on CodePen.

 

Hopefully this clear things up

Happy Tweening!

[TOK7O]

I'm happy that I grasp the concept of pinning correctly then but my question remains unanswered. I just found out that if i pin the header instead of .nav-container the pin seems to work, although the animation breaks. Anyways I'm trying to pin only the nav bar, so this doesn't help me much. The only explanation that comes to my mind is that .nav-container cannot be pinned properly because being a child of header prevents it for some reason. I would be very thankful for feedback on my code because I really don't understand what I'm doing wrong... I did my best to create a reasonable demo too

[Rodrigo]

Maybe something like this:

See the Pen XJroByd by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!