Re: [csswg-drafts] [css-scroll-snap] Allow control over snap smoothness for art-direction (#5464)

I support the intentions of the spec. Leaving the scroll snapping implementation to the browser yields a far better experience. Implementing a good scroll snapping experience in JS taking into account all the different systems and devices is all but impossible. This is the very reason that we now use CSS scroll snap.

Even though the scroll snapping implementation now is left to the UA, some parameters are exposed to authors. The spec already exposes parameters such as alignment and type. 

I think it is worth exploring whether more parameters could be exposed to give authors more control over the user experience, in particular the "smoothness" (for lack of a better word).

I have created a code pen to illustrate: 
https://codepen.io/johannesodland/pen/abNyvZV

The code-pen contains a scroll container with 5 sections. When the user scrolls and releases, browsers implement snapping very differently. Below is a screen recording of the same test page in two browsers on the same operating system. I scroll to the middle of the next section and then 'release':

![snap-smoothness](https://user-images.githubusercontent.com/175195/91717065-1860be00-eb91-11ea-8588-d67c2bb8cdaf.gif)

One browser snaps into place in less than 100ms, while one use more than 660ms. This constitutes a very different _feeling_. 

Where authors would fine tune transition easing and timing to get the right feeling, they have no way to control timing aspects of scroll snapping. 

A common feedback when using scroll snapping (particularly for large containers) is that it doesn't _feel_ right. That the "animation" is too fast or too slow depending on the system and browser that is used. 

I don't have any solutions, but I wish we could explore if it's possible to leave some control to authors. The smoothness, the underlying easing and timing are essential to the _feeling_ and to the user experience.

-- 
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5464#issuecomment-683742392 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 31 August 2020 12:16:08 UTC