Scrolltrigger - pinning in place

[NickNo]

Hi, I have this filter element that I want to pin in the navbar once I scroll to it - but can't figure out how to get it to stick - do I use ScrollTrigger pin, or do I have to fix it in css?  I want it to shrink to size as I scroll up to the navbar and then sit inside the orange box...

See the Pen KKGqQrr by nickjacobsnz (@nickjacobsnz) on CodePen

[GreenSock]

I assume you were looking for something like this: 

See the Pen abRwavV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just use a different ScrollTrigger for the pinning, and leverage a wrapper so that you're not pinning the same thing that you're animating and applying transforms to. Also, you've got big margins on the element you're pinning, so to avoid margin collapse you should put either a 1px padding on the container or a transparent border (either one prevents the margins from leaking out of the container). 

[NickNo]

Perfect thanks Jack, thanks for the quick & clear response.  In my actual project, the pinning jumps even at fairly slow scroll speed (unlike the codepen demo where it is a solid pin). Any idea why this would be happening?

[GreenSock]

Sorry, @NickNo - it's very difficult to know by just watching a video. We really need to see a minimal demo that clearly illustrates the problem in order to troubleshoot. Maybe you've got a lot of graphics that are bogging down the browser rendering-wise? You can try the anticipatePin feature, but it can't work miracles. 🤷‍♂️