[csswg-drafts] [pointer-animations-1] Animation range centering (#12471)

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

== [pointer-animations-1] Animation range centering ==
This issue presents a new concept defined in the [Pointer-driven animations spec](https://drafts.csswg.org/pointer-animations-1/#animation-range-centering), and enhances the concept of [Timeline Ranges](https://drafts.csswg.org/scroll-animations-1/#timeline-ranges) defined in `scroll-animations-1`.

## Context

It's common for pointer-driven animations to shift the center of the attachment range - the point of 50% progress - to a specific point, so that common animations with an effect’s progress of `[1, 0, 1]` or `[-1, 0, 1]` always reach `0` on that specified point.
Usually that point is relative to the animated element, the animation's target, rather than the timeline’s subject element. Usually it's the animation target's center.
The important thing to note here is that while the range is defined relative to the timeline’s subject element, the shift of the range's center may be defined relative to the animation’s target - so that range start/end are relative to one element, and centering is relative to another.

## Proposal 

Define a new property: `animation-range-center`, which is a new sub-property of `animation-range`, that allows specifying that centering point. This property takes either a `<length-percentage>` and/or a keyword to represent choosing between the timeline’s subject and the animation’s target.
The `<length-percentage>` specifies the offset from the subject element’s principal box’s start padding edge.

That keyword can have one of the following values:
- `source`: The element whose pointer offset drives the progress of the timeline.
- `target`: The element to which the animation is applied.

Note: in cases where `target` is used, the point of 50% progress can outside the 0-100% progress range. In such cases, the animation attachment range is cut off at the 50% progress point.

/cc @fantasai @flackr @bramus 

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


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

Received on Thursday, 10 July 2025 15:03:58 UTC