Re: [csswg-drafts] [scroll-animations-1] View progress contain of a sticky positioned elements on the edges (#8298)

> Need also to check how these match with the ranges proposed in #7973 .

These are extra ranges that apply to the `#container` element as it’s taller than the scrollport, but they won’t help you here as the animation needs to run:
- From `#container` at `enter 100%`
- To `#sticky` at `exit 100%`

It is currently not possible to spread one set of keyframes and match each part to a different view-timeline to track. 

This is the [closest I got](https://codepen.io/bramus/pen/XWBxpBM/7165f03f60c09f32a563d342a53494ce?editors=1100) using the current possibilities but it’s not perfect, as the animation runs until `#container` is entirely out of view without taking the space `#sticky` takes up into account.

Thought of using `view-timeline-inset: 0 400px;` as we know the height of the `#sticky` – which might not always be the case – but this didn’t seem to work. Could be this is purely an implementation problem in Canary.

Stitching two sets of keyframes together – with one animation watching `--container` and the other watching `--sticky` - also won’t work. Ideally, though, I think you’d want something like this:

```css
#container {
  view-timeline-name: --container;
}

#sticky {
  view-timeline-name: --sticky;
}

#sticky img {
  animation: open 1s;
  animation-timeline: auto; /* Just a value to trigger */
}

@keyframes open {
  enter --container 100% {
    clip-path: inset(0 50% 0 50%);
  }
  exit --sticky 100% {
    clip-path: inset(0 0 0 0);
  }
}
```

But that might just a very tricky thing to implement.

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


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

Received on Tuesday, 31 January 2023 22:23:00 UTC