Re: [csswg-drafts] Proposal: CSS Text Transitions & Animations (#13689)

Thanks for proposing, @kbabbitt ! This is indeed worth pursuing, but IMHO you seem to have bound together several, more basic, animation concepts/building blocks - that are still missing from the platform - into a single proposal.

In order to create these effects we need to:

1. Probably reuse the `Intl.Segmenter` API (which also allows for `sentence` BTW) for breaking text contents.
2. Be able to break inline text boxes into separate boxes and blockify them, so that we can apply any property on them, namely `transform`. We also need to have a reference box for each part so that we can properly calculate effects that rely on those boxes, like resolving percentages etc.
3. Create a general mechanism for controlling a [Sequence/Group of effects](https://drafts.csswg.org/web-animations-2/#grouping-and-synchronization), currently WIP. There's an [open issue on progressing](https://github.com/w3c/csswg-drafts/issues/9554) with these APIs.
4. Create a general mechanism for staggering effects/values. There are a [couple](https://github.com/w3c/csswg-drafts/issues/9557) of [issues](https://github.com/w3c/csswg-drafts/issues/9561), also WIP, on progressing with that, but still at very early stage.
5. Be able to select the boxes generated in step 2 for reuse inside step 3.

Then you'd, probably, have a proper platform for generally applying any effect you want, instead of trying to solve specific use-cases.
For example, you did not account for progressing these effects using progress-based timelines (i.e. `view()`/`scroll()`).
Another key feature that's missing is controlling the staggering effect. Your OP currently accounts just for `linear` staggering from start to end, and just the offsets (i.e. `delay`).

To sum it up, I'd suggest we explore the options of creating general-purpose tooling for creating these effects, and the rest will follow.

-----

/fyi @birtles @flackr for thoughts

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


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

Received on Tuesday, 24 March 2026 10:41:18 UTC