Is it possible to "smooth" a pin? Or "ease the transition"?

[katerlouis]

As far as I see the scrollTrigger pin feature, it acts like `position: sticky` in feel. Scrolled elements move with the same speed as the scrollbar. When an element gets pinned/sticky, it hits a wall and goes from a 100 to 0 in an instant. That doesn't feel very good. 

 

Unfortunately I don't have a codepen to illustrate what I want, because.. well, I wouldn't need to ask then, would I?

But back in 2017 I've made an animation that comes very close to what I want to do now: 

 

https://dumbo.design/airberlin (the laptop mockup as chapter intro)

The difference to what I want now is:

• the laptop continues to move in the natural scroll direction very slowly (kinda like the SlowMo ease); I don't want it this time, the pinned element should be dead center and don't move at all (but of course I'll make another thread to do just that with ScrollTrigger aswell :D)
• the whole concept is the other way around: I "fake" the scroll, and the pin is "real" – the laptop is `position: fixed` all the time and I try to match the scroll initial movement speed with the scroll speed, which is definitely not ideal
• since the concept is so different, the laptop does never occupy any space and– .. it's hard for me to put into words but I just don't want to go this fixed route ever again
• the performance is just pure crap and I'm pretty sure not having to transform translate a fixed element until its pinned and just use the natural scroll and at the end some slight transforms to smooth things out, is way more performant than faking the entire "scroll distance" until the element stops.

 

From what I saw you guys set `position: fixed` while pinning and set a transform translate immediately when the element gets unpinned and position: fixed got removed. Maybe there's a way to also animate the transform translate before the position: fixed gets set?

 

Bonus: What would be reeeeally awesome is when the "ease" is not predetermined, but dynamic and reactive to the actual scroll speed. I just love the feel of `scrub: 1` and our users almost always play around with it in awe. An adaptable "pin dampener" would feel very organic

 

Shoot it, Elders!

Swing that file-size hammer. I'm ready for it 😎 

[akapowl]

 

Hello there!

 

The last reply in this thread here might be of interest with regard to what you asked, so I'll just leave it here for now.

 

 

[katerlouis]

Yeah, seems like "gradually pinning" is what I'm looking for. 

Has anything changed since November 2020, @GreenSock?

[akapowl]

Me again 😀

 

According to this recent thread, apparently nothing has changed about that.

 

I'll let @GreenSock answer himself from now on 😅