GSAP ScrollTrigger - Pin animation not working correctly

[amit95]

I have an element called .listing__nav which I want to pin upon scroll.

 

When the .listing__nav touches the top of the window, I want it to become fixed and to unpin only when the banner element comes into view.

 

To achieve this, I've tried the following codepen:

 

 

As you can see, the .listing__nav doesn't pin where intended instead pinning at the bottom of the window, giving it glitchy behaviour.

 

See the Pen dyJMawR by amitr95 (@amitr95) on CodePen

[Trapti]

hey,
Nav is not actually pinning GSAP way.  And they way GSAP code has written it is not correct. There are two scrollTrigger created which is not required. If pinning is added by GSAP it creates outer div around that element and makes it position: fixed. Please read docs for more details. 

Here is updated pen  

See the Pen LYeNwOv by tripti1410 (@tripti1410) on CodePen