Pin jumps on bottom of the endpoint

[DomVournias]

I've being trying to figure out what is causing the jumping of the pin. I really can't find a solution to this, can you help me please? 

 

My goal is to pin the gray container and then scale the circle in it.

 

I recreated the issue in this codesandbox

[Rodrigo]

Hi,

 

The issue is that you are pinning an element with display flex. Here you can see what the ScrollTrigger Docs:

 

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

 

If you want to pin something don't use display flex on the element you want to pin and be careful about using pinSpacing: false in your ScrollTrigger configuration.

 

Hopefully this works the way you intend:

https://codesandbox.io/p/sandbox/small-tdd-cbgi5l?file=%2Fpages%2Findex.tsx&selection=[{"endColumn"%3A25%2C"endLineNumber"%3A19%2C"startColumn"%3A25%2C"startLineNumber"%3A19}]

 

Let us know if you have more questions.

 

Happy Tweening!

[DomVournias]

It works now perfectly! You're a life saver thanks a lot!