- From: Bramus! via GitHub <sysbot+gh@w3.org>
- Date: Thu, 02 Mar 2023 15:30:49 +0000
- To: public-css-archive@w3.org
My original request for this issue was to be able to run a scroll-driven animation over a certain distance _(in case of the header example: as you scroll the page from 0 to 90vh)_. The way I interpret the resolution, is that it would now be possible to do this as follows:
```css
@keyframes shrink {
from { height: 100vh; }
to { height: 10vh; }
}
#coverheader {
position: sticky;
top: 0;
animation-name: shrink;
animation-timeline: scroll(); /* 👈 Will find the root scroller */
animation-range: 0 90vh; /* 👈 Animation will run when scrolling from 0vh to 90vh */
}
```
If that’s incorrect, then the resolution from https://github.com/w3c/csswg-drafts/issues/8298#issuecomment-1412484155 might offer a solution, as it calculates the timeline ranges differently now. IUC correctly, the combined outcome would allow this:
```css
@keyframes shrink {
from { height: 100vh; }
to { height: 10vh; }
}
#coverheader {
position: sticky;
top: 0;
animation-name: shrink;
animation-timeline: view(self); /* 👈 Track myself */
animation-range: exit 0 exit 90vh; /* 👈 This works because of #8298 */
}
```
Maybe @flackr or @fantasai can clarify?
--
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7575#issuecomment-1452061858 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 2 March 2023 15:30:51 UTC