[animation-triggers-1] Add custom triggers

Open
#13,625 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
28/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
css, javascript
Domain
web-dev

Research direction

Start with the linked animation-triggers specification and the Web Animations definition of “current”; compare the proposed CustomTrigger API with timeline and event triggers. Done means resolving whether the trigger is stateful and defining its activation and associated-animation semantics clearly enough for the specification.

Written by the indexing model from the issue text.

Description

animation-triggers-1

The animation-triggers-1 spec currently explains how timeline and event triggers should work. I think that custom triggers is another useful variant that requires little additional api surface and has been requested for some use cases. In particular, you could do the following:

// Create a trigger.
const myTrigger = new CustomTrigger();
// Create as many associated animations as you like.
myTrigger.addAnimation(element.animate({ ... }, { ... }, 'play');
myTrigger.addAnimation(element.animate({ ... }, { ... }, 'play');

// Sometime later, the associated animations can be triggered:
myTrigger.activate();

Open questions:

  1. Should it be stateful, i.e. enter an activated and deactivated state like timeline triggers, or like event triggers where it does not stay in an activated state and merely triggers the activation behavior. I'm leaning towards non-stateful.

Why is this useful?

The developer can pre-arm important animations ahead of time without knowing exactly when they need to play. The browser can be ready to perform the specific declared animation with minimal delay when it is time to play it. E.g. composited browser could have already created the associated layers and properties. I think this is something we couldn't do with regular animations as unlike regular animations, these would be considered current similar to other triggered animations.

Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.