DomVournias Posted December 2, 2022 Posted December 2, 2022 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
Solution Rodrigo Posted December 2, 2022 Solution Posted December 2, 2022 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! 1
DomVournias Posted December 3, 2022 Author Posted December 3, 2022 It works now perfectly! You're a life saver thanks a lot! 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now