Re: [csswg-drafts] [scroll-animations-1] Support setting start and end time on scroll timeline. (#7296)

A bit too late perhaps, but [this cover-page to fixed-header demo](https://codepen.io/bramus/pen/ExgOPRw) would be a use case? As you scroll from `0` to `90vh`, the `100vh`  cover transforms to a header with a height of `10vh`.

Looking at the `exit` phase of the header doesn't work, as it has `position: fixed` applied and therefore never slides out of the viewport.

Looking at the `enter` phase of `#content` wouldn't work either as technically `#content` already is intersecting the viewport from the start: because the cover is `position: fixed`, `#content` shoots up and will be entirely in view on load. To have it appear visually below the header it has top padding of `100vh`. 

One could argue to change the `padding-top` to a `margin-top`, so that one could observe the `enter` phase of `#content` after all. While that could work, it would break componentization: it would be nice to have this cover available as a standalone component that can work out of the box with whatever comes next. As authors drag this component from project to project, the adjacent sibling will have a different (or no) id. Forcing authors to update the CSS snippet every time they use it somewhere else feels a bit wrong.

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


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

Received on Friday, 3 June 2022 12:19:13 UTC