Re: Format of animatable value for color only properties

Hi Alexander,

Thanks for asking these excellent questions. It certainly wouldn't hurt to
elaborate on this matter in a future edition of TTML2. See my inline
comments below for details.

On Sat, Mar 8, 2025 at 2:39 PM Alexander Cerutti <
cerutti.alexander@gmail.com> wrote:

> Hello,
> I was facing the introduction of discrete and continuous animations in my
> ttml engine.
>
> I saw animate tag requires style-namespace properties to adhere to the
> <animation-value-list> and then the <animation-value> properties.
>
> So, for example, for what concerns tts:color, we can have something like
> this (took from specs):
>
> <animate xml:id="a1" keyTimes="0;0.2;1" tts:color="red;green;blue"/>
>
> In the definitions of animatable styles, I saw some that are not exactly
> clear and for which I found no tests nor examples.
>
> These following properties, report the "color only" marker on the
> "Animatable" row:
>
>  - tts:border
>  - tts:textEmphasis
>  - tts:textOutline
>  - tts:textShadow
>
> As their color is animatable, I was wondering about the following details:
>
> 1) the "color only" applies only on continuous animation, so either on
> <set> element or <animate> with calcMode = "linear" | "paced" | "spline".
> Is this correct?
>

Yes, though continuous animation doesn't apply to the set element.


> 2) What is the syntax that one should write when, for example, tts:border
> is animated? Reporting all the attributes for each keyTime? For example:
>
> tts:border="2px solid red; 2px solid green; 2px solid blue"
>

This is arguably well defined, since it does not imply a change to
border width or style.

To accomplish this, I would use one of two approaches:

Option #1 - set fixed, non-animated styles as default border style,
animating color only

<p tts:border="2x solid">
  <animate tts:border="red; green; blue"/>
  A paragraph with a 2px, solid border with a linear animated border color
transitioning from red to green to blue
  over implied keyTimes="0;0.5;1".
</p>

Option #2 - use a combination of discrete (set) and continuous (animate)
animation elements

<p>
  <set tts:border="2x solid"/>
  <animate tts:border="red; green; blue"/>
  A paragraph with a 2px, solid border with a linear animated border color
transitioning from red to green to blue
  over implied keyTimes="0;0.5;1".
</p>

There are other ways to accomplish this as well, such as using out-of-line
animation.


> or
>
> tts:border="2px solid red; green; blue"
>
>
This too is arguably well-defined since it does not imply a transition for
border width or border style, and each value in the animation value list
adheres to the syntax of tts:border.


> In my ignorance, both could be fine (even the second sounds weird, if I
> give a look at <animation-value-list>)
>

IMO, yes.


>
>
> Furthermore, assuming the first case is the right one or at least one of
> the two supported, let's take the following example:
>
>
> tts:border="2px solid red; 5px solid green; 10px dashed blue"
>
>
I would consider this to be not well defined (an error) if specified on an
animate element, since it implies a linear animation of border width and
border style (the default calcMode is linear).


>
> I see three possible outcomes with this expression, when a continuous
> calcMode is used:
>
> - this is an error: only color should be supported
> - this is valid but only color is kept in consideration: when the keyTimes
> progresses, we'll have both "2px solid green" and "2px solid blue"
> - this is valid but only color is animated continuously. The rest of the
> properties are animated discreetly.
>
> Which of the above is correct?
>

See my responses above. Note that a good point raised by your questions is
what does it mean if multiple animation styles independently set or animate
different components of a multi-component style property (such as tts:border).
I don't recall the group (or myself) discussing this previously.


> Thank you very much for your support,
> Alexander
>