Re: [csswg-drafts] [scroll-animations-1] Add a new named timeline range that is independent of subject dimensions. (#9617)

@fantasai Thanks for the chat at CSS Cafe. I tried to describe the issue here, although I think Sebastian did a better job of it :) 

As suggested, instead of adding a new named range we could add a new margin property to adjust the size of the subject area. This would be similar to how `scroll-margin` adjust the scroll-snap area. 

Then we could use negative margins to negate the size of the subject.

Something like this: 

```css
@keyframes --anim {
  from {...}
  to {...}
}

.subject {
  animation: linear --anim both;
  animation-timeline: view(0 / -50%);
  animation-range: 25% 75%;
}

/* Or through longhands */
.subject {
  view-timeline-name: --timeline;
  view-timeline-inset: 0;
  view-timeline-subject-margin: -50%; /* name up for bikeshedding */
  
  animation: linear --anim both;
  animation-timeline: --timeline;
  animation-range: 25% 75%;
}  
```
 

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


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

Received on Tuesday, 18 June 2024 06:03:48 UTC