[csswg-drafts] [scroll-animations-1] Support scroll-padding in @scroll-timeline (#6068)

johannesodland has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1] Support scroll-padding in @scroll-timeline ==
In [scroll-animations-1](https://drafts.csswg.org/scroll-animations-1/#element-based-offset-section) element offsets are currently calculated by aligning target elements to the source scrollport.

Can we calculate element offsets by aligning them to the _optimal viewing region_ defined by `scroll-padding` in stead?


### Motivation
`scroll-padding` was introduced in [css-scroll-snap-1](https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding) and specifies offsets that define the _optimal viewing region_ of a scrollport.

In most cases the _optimal viewing region_ is the same as the scrollport, but `scroll-padding` reduces the region of the scrollport that is considered viewable. When using css-scroll-snap the elements will snap against this region, and not the scrollport.

If we define scroll-timelines against the _optimal viewing region_ we can start and end animations when they enter the _optimal viewing area_.

### Why use the _optimal viewing area_ 

Authors need control over when an animation starts and ends so that the animation is played when it's viewable and not distractive to the user. The current spec makes it possible to start and end the animation based on when a target element enters and leaves the scrollport. This might not be enough and does not align with specs like scroll-snap. 

There are many reasons authors might define an _optimal viewing area_ for an animation:

**1. Only animate when visible**
A target entering the viewport might not be visible to the user. Elements such as headers and footers might be covering up parts of the scroll-port. 

**2. Avoid distracting the user**
Usability testing might show that users are reading the text one part of the screen, and animations should not start until they enter this area so that the user isn't distracted. 

**3. Choreograph the animation with scroll-snap and `scrollIntoView()`**
The authors need to choreograph the animations so that they start or end when elements snap into place or are scrolled into view.

### Why not wait until level 2?

Once scroll-animations-1 is adopted it would be too late to align scroll animations with the _optimal viewing region_ as this would change existing animations and break the web. It would be necessary to define a new property along the lines of `box-sizing`, or a new property such as `source-padding`.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6068 using your GitHub account


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

Received on Wednesday, 3 March 2021 17:10:11 UTC