[csswg-drafts] [web-animations-2] Propose syntax of imperative API for animation-trigger (#10229)

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

== [web-animations-2] Propose syntax of imperative API for animation-trigger ==
This is a followup on #8942, looking a bit ahead and proposing an imperative syntax for `animation-trigger` in Web Animation API.

The main idea is to introduce a new class `AnimationTrigger` that takes an `options` object, as below:

```webidl
interface AnimationTrigger {
  constructor(AnimationTriggerOptions options)
}

dictionary AnimationTriggerOptions {
  AnimationTimeline timeline = DocumentTimeline
  AnimationTriggerType type = "once"
  TimelineRangeOffset rangeStart = "normal"
  TimelineRangeOffset rangeEnd = "normal"
  TimelineRangeOffset exitRangeStart = "normal"
  TimelineRangeOffset exitRangeEnd = "normal"
}

enum AnimationTriggerType = { "once", "repeat", "alternate", "state" }
```

And the the following example in CSS:

```css
#target {
  animation-trigger: repeat view() contain cover;
}
```

becomes this in JS:

```javascript
const view = new ViewTimeline({
  subject: '#target'
});

const trigger = new AnimationTrigger({
  type: 'repeat',
  timeline: view,
  rangeStart: 'contain 0%',
  rangeEnd: 'contain 100%',
  exitRangeStart: 'cover 0%',
  exitRangeEnd: 'cover 100%'
});
```

The four properties for range seem a bit overwhelming, but this should follow current syntax for rangeStart/End for scroll-driven animations. Perhaps it's worth to consider only 2 properties like: `range` and `exitRange` that will take the shorthand form?

Then, usage with `Animation` could be:

```javascript
const effect = new KeyframeEffect(target, {
  opacity: [0, 1]
});

const animation = new Animation(effect, {
  trigger: trigger
});
```

Notice I overloaded the `Animation` constructor's signature with a property bag as a second parameter, instead of an `AnimationTimeline`. The idea is that, if possible, we could overload it to accept either a timeline, or a dict with optional properties, currently `timeline` and `trigger`.

Or, alternatively, via `.animate()`:

```javascript
target.animate({ opacity: [0, 1] }, {
  duration: 1000,
  easing: 'ease-in',
  trigger: trigger
});
```

cc: @flackr @birtles 

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


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

Received on Friday, 19 April 2024 14:04:42 UTC