Pinned element, fixed position issue

[JustHugo]

Hi, i try to make a pinned element on my page.
If you go to the section "Découvrez mon histoire" all down (or discover link in the menu)

the section on the right should be pinned. but i don't understand why, the fixed position is relative to the page instead of the screen.
I tried to do the same on codepen, and everything works well.
Do you have any idea ?

https://justhugo.fr/

See the Pen GRYEqKQ by Hugo-R (@Hugo-R) on CodePen

[Cassie]

Hey there! Your end marker was hitting before the start marker. I'd also use different triggers than you've set up at the moment. Maybe try this instead.

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

 

Hope this helps!

[JustHugo]

Hi @Cassie, thank you for your answer, 
your code didn't change anything unfortunately.
have you see my website to understand where and what is my problem ?

my codepen is only here to show that i tried on it and everything works as i want.
But i don't understand why on my wordpress website, fixed position don't works and is not relative to viewport.

[Cassie]

Ah, that's a shame, I hoped that was it. Sometimes issues with position fixed can come from the element being housed in a container with transforms on, it's pretty hard to debug a live site though, sorry.

 

Have you triedpinType:transform

Maybe that will help?

[JustHugo]

Oh thanks didn't know that could exist.

So using "pinType:"transform"" make the deal.
The only issue i have is that it's not smooth.
i have to find how to make it smoother

And btw how the my fixed position issue be relative to parent transform property while the parent is generated by gsap ( the div with .pin-spacer class)

[JustHugo]

Okay i understood where was my issue.
I have a transform property on the Great Great Great Great parent div with id "page". 

Thank you for your precious help !