[csswg-drafts] [scroll-animations-1][css-animations-1] A non-animated "Is in viewport" (#10582)

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

== [scroll-animations-1][css-animations-1] A non-animated "Is in viewport" ==
Following up on #8282:
Currently to set a style that behaves differently based on whether the element is in the viewport, one has to use scroll-driven animations. For example, to set a `view-transition-name` when the element is in the viewport:

```css
@keyframes set-name-when-in-view {
  from { view-transition-name: actual-name }
  to { view-transition-name: actual-name }
}

.thing {
  animation-name: set-name-when-in-view;
  animation-timeline-name: view();
}
```

The above works! However it requires going through an animation mental model for something that's not actually animated.
Perhaps view-timeline (or CSS animations in general?) can provide a convenient way to use animation primitives on something that's not animating? e.g.

```css
.thing {
  @in-range view() {
     view-transition-name: actual-thing;
  }
}
```

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


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

Received on Tuesday, 16 July 2024 21:01:50 UTC