W3C home > Mailing lists > Public > www-style@w3.org > March 2016

Re: [css-animations][web-animations] steps() timing function sometimes unintuitive

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 8 Mar 2016 15:17:07 -0800
Message-ID: <CAAWBYDCEXQEu-7GBPcGaDeSO7xsnBno70noNETiderkr+Ammdw@mail.gmail.com>
To: Brian Birtles <bbirtles@mozilla.com>
Cc: www-style list <www-style@w3.org>, "L. David Baron" <dbaron@dbaron.org>, Rachel Nabors <rachelnabors@gmail.com>, "public-fx@w3.org" <public-fx@w3.org>
On Mon, Mar 7, 2016 at 9:00 PM, Brian Birtles <bbirtles@mozilla.com> wrote:
> On 2012/12/21 3:46, Tab Atkins Jr. wrote:
>> On Wed, Dec 19, 2012 at 6:40 PM, L. David Baron <dbaron@dbaron.org> wrote:
>>>
>>> On Wednesday 2012-12-19 10:29 -0800, Tab Atkins Jr. wrote:
>>>>
>>>> I propose another steps value: step-mid. It splits the animation curve
>>>> into n segments, makes the first n-1 do step-end behavior, and leaves
>>>> the last to just run normally.  The above example could instead be
>>>> written as "steps(4, step-mid)" and have this behavior:
>>>
>>>
>>> I like the idea, but I find the name confusing; it sounded like
>>> something that would give the first and last steps half the duration
>>> of the other steps.  (I also find the description quoted above
>>> confusing, but the rest of the email made it clear.)
>>
>>
>> I have absolutely no attachment to the name.  It was the first thing
>> that came to mind.
>>
>> I assume that Rachel's suggestion comes from her association of
>> steps(n, end) with meaning "eat the end of the animation" (and
>> likewise for "start"), so "none" is reasonable in that sense.  I'm not
>> sure it makes sense if your understanding comes from the spec's
>> explanation, though, where "end" means "transitions all at once at the
>> end of the step".
>>
>> Another possibility is just a new function.  I'm not sure what I'd
>> want to name it, though.
>
>
> I spoke with Rachel and a few others about this recently and we were
> wondering about the name step-equal? Unfortunately, that doesn't translate
> into a function very well ('step-equal(2)'? Alternatively, what about
> 'step-stagger' and 'stagger(5)', or just the function?).
>
> I'd like to settle on this soon because Chrome is shipping Element.animate()
> with support for 'step-middle' as defined by Web Animations.[1] We went to
> implement this in Firefox[2] but I'm concerned that there aren't use cases
> for step-middle as currently specced and instead what we want is what Tab
> originally proposed in this thread.
>
> Assuming usage is low in Chrome, I'd like to drop step-middle from Web
> Animations and replace it with this revised timing function.

Yeah, WA's "middle" value doesn't do a very useful thing - it does at
least *show* the starting and ending values, but only for a
half-interval each.  I'm not sure where this came from - was it just a
misreading of the original request, maybe?

On Tue, Mar 8, 2016 at 2:24 PM, Rachel Nabors <rachelnabors@gmail.com> wrote:
> I was thinking of "steps(5, equal)" when discussing this syntax, as an
> expansion of the steps() formula. I think it looks sensible, if that's
> possible?

I'm not a huge fan of that name - step() *always* splits it into equal
pieces, so it's not clear why this one in particular is more "equal"
than the others.

I'm feeling like a new function entirely might be a good thing - the
stagger() name works for me. Another possibility is discrete().
(Benefit - the behavior of "non-animatable" values, which we usually
informally call "discrete animation", is precisely discrete(2) or
"discrete" if we added a keyword for the minimal form.)

Mainly I'd like to pretend step() doesn't exist at all - the
step-start and step-end keywords are useful, but going to >1 steps
with those behaviors is just somewhat confusing imo.  Maybe we can add
a note to step() saying that its behavior is confusing, and authors
probably want to use discrete()?

~TJ
Received on Tuesday, 8 March 2016 23:17:58 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:39 UTC