Jump to content
Search Community

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

katerlouis test
Moderator Tag

Recommended Posts

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? :D

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 :D
  • 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 ? 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...