Re: [csswg-drafts] [css-animations] Extend animation-play-state for triggering animations when an element is in viewport (#8942)

In the early days when we discussed this, we recognized that this was not complicated to enable for animations, but we were concerned about how developers could use this to start transitions as it seemed like a natural thing people would want to do. There was a proposal to have a media query e.g.
```css
@scroll-trigger(>500) {
  /* style rules to trigger animation or transition */
}
```

The issue with this is that evaluating this change requires a global style recalculation and as such would be unlikely to be able to be started on the compositor. I'm happy to solve this for animations which if we set up up-front we could dynamically trigger from the compositor. We should think about whether there are any ways we could set this up for transitions as well. E.g. maybe for transitions we could do something similar to `@starting-style` but associate it with a particular trigger point. Then to composite the transition this style information and the trigger would be passed along to the compositor.

I don't think it's a good idea to re-use `animation-play-state` for this as you don't want the animation to pause if you scroll past the trigger point and then back before it. Instead you want one of two behaviors:
* Play to completion, or
* If the animation would trigger in reverse at this scroll threshold, start reversing the animation.

My thinking around this is that it is somewhat similar to `animation-delay` but repeatable. I'd propose introducing something like an `animation-trigger` property which would have values for the various modes you may want this to work. The trigger could be a point on an animation timeline which could be time-based or could be scroll based. This might be something like the following:
```css
.element {
  animation-trigger: trigger(view(), entry 100%) once;
}
```

In general the property might look something like:
```
animation-trigger: <animation-trigger-timeline
    <normal | <length-percentage> | <timeline-range-name> <length-percentage>>?
    <once | repeat | alternate>>#
```

The initial value would match the current behavior that animations "trigger" once when they are defined.

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


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

Received on Thursday, 22 June 2023 16:01:25 UTC