Skip to content

[scroll-animations-1] Term for concept of timeline phases #7701

Closed
@flackr

Description

@flackr

In #7044 we resolved to add the concept of named timeline phases:

  • Add the concept of named timeline phases. Certain types of timelines (such as ViewTimelines) will provide such phases. (In the future, other types of timelines may offer named phases, or we might add the ability to have custom named phases.)

However, there are concerns with using the term phases for this, @birtles pointed out that effect phases would still exist (even if the prior timeline phases concept went away) and have a fairly different meaning. For the css shorthand property we could avoid using the term, however we would still need a name for this concept in the spec and likely need to use this concept name for the interface used for #7589.

So far the only alternative term to phase that has been proposed is cue, so our current options are:

  • phase (stick with the current proposed terminology)
    You could think of these as the same as effect phases (ranges of time) and they could even exist alongside before and after phases, though it does feel as if it should be a single active phase at any time which may not continue to be true.

  • cue
    Define this new term, representing a range of the timeline time.

In addition to choosing a term we should also decide what to call the shorthand:

Add shorthand that expands a phase name to 0% start delay and 100% end delay. E.g. animation-phase: contain expands to animation-delay: contain 0%; animation-end-delay: contain 100%.

This could be any of the options I proposed on the original issue or we could omit the shorthand entirely. However on further thought I feel like this should be some variation on animation-delay as it could be used to express start and end delay, and currently the end delay is not settable via CSS. My strawman proposal would be to expand the existing animation-delay property to accept one (current version, just specify start delay) or two values (start and end delay), where either of those delays can include phases as proposed.

animation-delay: <start delay> <end delay>?

Where either delay is <time> | <phase> | <phase> <percent>. Omitting the <percent> would resolve to 0 or 100% depending on whether this is the start or end delay.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Commenter SatisfiedCommenter has indicated satisfaction with the resolution / edits.scroll-animations-1Current Work

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions