search

rstacruz / jquery.transit

Super-smooth CSS3 transformations and transitions for jQuery
http://ricostacruz.com/jquery.transit
7.3k stars 864 forks source link

moar eases #42

Open matthewlein opened 12 years ago

matthewlein commented 12 years ago

Hi there,

I love this project and I'd like to add my Penner easing approximations from Ceaser.

They will add 1.3k. Do you want it as part of the main $.cssEase object, or as a plugin/snippet with $.cssEase[easeName]?

rstacruz commented 12 years ago

What eases are they?

matthewlein commented 12 years ago

(took from a LESS file, but they are the same)

@easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190); @easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000); @easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000);

// Circ @easeInCirc : cubic-bezier(0.600, 0.040, 0.980, 0.335); @easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000); @easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860);

// Expo @easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035); @easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000); @easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000);

// Quad @easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530); @easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940); @easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955);

// Quart @easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220); @easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000); @easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000);

// Quint @easeInQuint : cubic-bezier(0.755, 0.050, 0.855, 0.060); @easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000); @easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000);

// Sine @easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715); @easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000); @easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950);

// Back @easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045); @easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275); @easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550);

rstacruz commented 12 years ago

Looks great. I assume you're emulating jQuery UI's eases, which is great. I'd merge them into Transit itself. :)

matthewlein commented 12 years ago

Also note that all except the Back ones will work everywhere. Back requires out of 0,1 range bezier (not supported in old webkit), as referenced in #27. I suggested a possible solution there.

I didn't test with the animate() fallback, but you may have already solved that.