Re: [csswg-drafts] [css-transitions][css-animations] Complex timing functions

So if we ignore the composition and 
what-i-call-triggers-but-might-be-also-called-chaining, and assume 
spring() is handled separately (#280), and see @rachelnabors's [recent
 tweet](https://twitter.com/rachelnabors/status/753269446001688576), 
can we start by adding some hardcoded shortcuts?

The majority of those on easings.net are variations of a cubic-bezier.
 If these are really useful, and if other implementors agree, we can 
add keywords for them.

Unless I've missed some, the functions on easings.net that are not 
supported by CSS are:

- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBounce
- easeOutBounce
- easeInOutBounce

How popular are these? The first two are very much like spring().

Looking at tools...

After Effects only seems to have a couple of built-ins, which it calls
 "easy ease". However, it allows you to manually create some pretty 
complicated curves.

Apple's Motion does things in two different ways. It has "Behaviours" 
which are animation effects that you don't really see as keyframes and
 easing (more like "move in this direction with this speed and 
friction"). For the traditional keyframe animations, it has a manual 
editing mode like After Effects, but some shortcuts for bezier, 
linear, exponential, logarithmic and continuous.

Cinema 4D has basic ease in/out/both, linear and steps. It also has 
some tooling for smoothing keyframes (e.g. smooth tangents) which 
would likely produce curves that we couldn't exactly match in CSS at 
the moment.

Can people provide other examples?

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

Received on Thursday, 14 July 2016 00:05:52 UTC