Re: [web-animations] Suggestion - parabolic cubic-bezier timing function keywords

Hi Dean,

Thanks very much for your feedback. I think this is something we can do.

Currently we have a lot of ideas for timing functions--we definitely want to be able to do bounce and spring effects in the future. The current thinking is to put this in a separate spec since we discovered there are lots of different possibilities (some animation APIs have about 40 different predefined curves!) and some of the easy-looking ones are hard to parameterise in a way that's author-friendly.

But as for the two curves you suggested, since they are simple keyword mappings onto single-segment cubic Bezier curves it's probably within scope of this spec.

I will be travelling for the next few days so, to make sure we don't lose track of this feedback, would you mind filing a bug for this?[1] If not, I'll do it when I get a chance.

Thanks again!

Best regards,

Brian

[1] https://www.w3.org/Bugs/Public/enter_bug.cgi?product=FXTF&component=Web%20Animations

----- Original Message -----
From: "Dean Trower" <dean@omnivisiontechnology.com>
To: public-fx@w3.org
Sent: Wednesday, 26 June, 2013 10:04:28 AM
Subject: [web-animations] Suggestion - parabolic cubic-bezier timing function keywords

At the moment, the Web Animations draft defines only the keywords "linear", 
"ease", "ease-in", "ease-out" and "ease-in-out" as shortcuts to 
cubic-bezier(...) timing functions of certain shapes.

I'd like to suggest that a couple more such keywords be added to this list - 
specifically, for *parabolic* timing functions:  Representing the path 
objects take either rising, or falling, under gravity.

The reason is that making objects appear to rise, fall, or bounce under 
gravity is I'd expect a fairly common use-case for CSS animation --- but 
using any of the ease-* curves to do it will result in wrong-looking 
(unphysical) behaviour:  Such animations require parabolic timing functions 
to look correct.

Rising and falling half-parabolas (somewhat similar in shape to ease-out and 
ease-in respectively) are also representable using cubic bezier curves, 
specifically (assuming my math is correct):

  rise:    cubic-bezier(0.33333, 0.66667, 0.66667, 1)
  fall:    cubic-bezier(0.33333, 0, 0.66667, 0.33333)

Having keyword shortcuts for these curves (perhaps "parabolic-rise" and 
"parabolic-fall"?) will facilitate the easy creation of physically-correct 
rise/fall/bounce animations, and will also make it clear at a glance, from 
looking at the CSS, just what such animations are supposed to do.  (Which 
certainly isn't the case if you use cubic-bezier(...) with numerical 
arguments instead).


Thanks for your consideration,

  Dean Trower

Received on Wednesday, 26 June 2013 13:32:29 UTC