[csswg-drafts] [scroll-animations-1] Phases for taller than scrollport subjects (#7973)

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

== [scroll-animations-1] Phases for taller than scrollport subjects ==
## Our current approach to the phases

I’ve been working on some visualizations for scroll-animations, to visually show how they are measured. For example, for smaller-than-scrollport-subjects:

| <img width="1040" alt="image" src="https://user-images.githubusercontent.com/213073/198655479-62540f31-59e7-48a7-beed-72e07fb7911e.png"> | <img width="1039" alt="image" src="https://user-images.githubusercontent.com/213073/198655230-789bc102-d9aa-47a9-b5e1-0dac9484e170.png"> |
|-|-|

For taller-than-scrollport-subjects, simply making the boxes bigger does not work, because that would mean `contain 100%` comes before `contain 0%`, which is impossible:

| <img width="1038" alt="image" src="https://user-images.githubusercontent.com/213073/198656468-14b8a4a9-2255-4b2b-bdc8-c41430c3c0f8.png"> | <img width="1041" alt="image" src="https://user-images.githubusercontent.com/213073/198656626-6ce6bc0a-5a9a-4300-800f-afb4e1515ceb.png"> |
|-|-|

To solve this, we flipped the edge against which the subject is measured _(note how the darker line on the center two subjects has flipped sides)_:

| <img width="1040" alt="image" src="https://user-images.githubusercontent.com/213073/198657105-4d929c11-a2d8-4da7-b8e1-3561709a7f67.png"> | <img width="1038" alt="image" src="https://user-images.githubusercontent.com/213073/198657359-c3cf1734-3dd5-4988-af7d-bd09e8d9db40.png"> |
|-|-|

With that, we also shortened the range for enter/exit phases, in order to be able to use 1 set of keyframes that has no overlap between the enter-contain-exit phases:

| <img width="1040" alt="image" src="https://user-images.githubusercontent.com/213073/198657738-4664de7a-0161-435d-9085-8d31beb6d395.png"> | <img width="1037" alt="image" src="https://user-images.githubusercontent.com/213073/198658095-e1cf42ae-7fc9-4a88-9af4-f9106d93f2a4.png"> |
|-|-|

## Limitations of the current approach

This comes with two nasty side-effects imo:

1. The entry/exit phases are shortened, because phase change detection 
does not happen on the same edge
    | <img width="1039" alt="image" src="https://user-images.githubusercontent.com/213073/198659234-76702d8b-9770-43a0-9ee9-d81723e8c15b.png"> |
    |-|
2. The meaning of enter and exit changes. This can be troublesome for an element that is initially smaller than the scrollport but becomes taller due to a resize.

This problem becomes clear in a demo such as https://codepen.io/bramus/pen/XWEeGZm no longer possible, where it’s not possible to create it using the new phases. 

_(FYI: the demo uses a version of the polyfill that measures things differently to make it work after all)_

## An alternative solution

To solve this, I would like us:

1. To not change the meaning of enter/exit, and have their measurements be done consistently
2. Introduce extra phases to allow the current interpretation of enter/exit for taller-than-scrollport-subjects.

Additionally, I also think we have our names wrong, as the current `enter 100%` for taller-than-scrollport-subjects visually means “it is entirely covering the scrollport”. This does not rhyme well the existing `cover`.

What I would like to propose, are the following phases. I have added the edge/threshold indicators from earlier versions of the spec as that might make thing easier to understand _(this [visualization tool of edges and thresholds](https://codepen.io/bramus/pen/ZEBvVxX) might come in handy)_:

- Smaller than scrollport subjects
    - enter = end 0 → end 1
    - exit = start 1 → start 0
    - contain = end 1 → start 1
    - intersect = end 0 → start 0
- Taller than scrollport subjects
    - enter = end 0 → end 1
    - enter-cover = end 0 → start “1”
    - exit = start 1 → start 0
    - cover-exit = end ”1’ → start 0
    - cover = start 1 → end 1
    - intersect = end 0 → start 0

These visuals summarize the proposed changes:

| <img width="1037" alt="image" src="https://user-images.githubusercontent.com/213073/198672377-1c3038fb-85a8-4d77-a766-5dd68281cff3.png"> | <img width="1038" alt="image" src="https://user-images.githubusercontent.com/213073/198672449-8d5576c3-cb67-4638-9a3e-638a7532bf27.png"> | <img width="1039" alt="image" src="https://user-images.githubusercontent.com/213073/198672528-4dbdb68c-319c-49c1-8354-9a925aff701e.png"> |
|-|-|-|

## The real ask

Maybe we can do a breakout session on this? Some time in the 2nd half of November maybe? Just before/after a WG meeting?

As you might have noticed by now, I have prepared slides for this :) 

/ping All attendees of a previous breakout session: @fantasai @tabatkins @flackr @kevers-google @mirisuzanne @ydaniv @jensimmons @smfr @argyleink 

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


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

Received on Friday, 28 October 2022 15:17:16 UTC