Re: [css3-transitions] Complex easing functions

Jon,

On 03/04/2009, at 9:26 PM, Jon Rimmer wrote:

> After reading though the current transitions draft, I am wondering  
> about support for more advanced easing functions, with more complex  
> curves and values that fall outside the range [0, 1]. Such functions  
> are required for 'elastic' or 'bounce' transitions, which are a  
> popular way of providing more natural easing, particularly for  
> movement, but do not seem possible with the current proposal. There  
> is a useful easing functions visualiser here that provides samples  
> for each type: http://www.robertpenner.com/easing/easing_demo.html
>
> This sort of easing is possible using JavaScript libraries, such as  
> Mootools or jQuery with the easing plugin, and it be a shame if the  
> transitions module were not to include an equivalent degree of  
> capability. Is there a reason why the proposal could not be modified  
> to allow multiple bezier curvers within a timing function, and allow  
> values to fall outside the range [0, 1], so long as the final values  
> ended at 0,0 or 1,1?

We agree that more complex timing functions should be added. My  
hesitation is that I'd like to start with as small a specification as  
possible, and then add features later. However, this isn't really a  
difficult feature to implement, so we're willing to add it if the  
community and other implementors agree. Is there anyone else listening  
who wants this immediately?

The idea of multiple curves allowing values outside [0,1] is a good  
suggestion.

While it would be a little painful, you can still achieve you elastic  
or bounce effects today using CSS animations with keyframes.

Dean

Received on Tuesday, 7 April 2009 04:52:25 UTC