Looking for a "swing" -like easing expressed with both jQuery and CSS3

Question

I need to perform two animations on an object at the same time.
For a number of reasons, I want to use jQuery for vertical animation and CSS3 for horizontal.

On the jQuery side, swing easing works fine:

 swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c} 

I am looking for a way to express this weakening function in CSS3 transition.

If this is not possible, I am looking for an attenuation function (like a Bezier curve) that looks most like a swing
and can be used both in jQuery and CSS3. Provide a link to any required plugins.

Answer 1

TL; DR

I found that the curve [.02, .01, .47, 1] Bezier provides a fairly good approximation.

CSS3

 -webkit-transition: all 1s cubic-bezier(.02, .01, .47, 1); -moz-transition: all 1s cubic-bezier(.02, .01, .47, 1); transition: all 1s cubic-bezier(.02, .01, .47, 1); 

JQuery

 $(element).animate({ height: height }, 1000, $.easie(.02, .01, .47, 1)); 

with jquery.easie (you can also use bez ).

---

Quest

I used these graphs from Sparky672 to find out the exact function and its arguments:

This is the same as y = –x • (x – 2) , where x is between 0 and 1 .
So I created a graph with abettercalculator :

I trimmed it and posted it online.
He then used position: absolute to overlay cubic-bezier.com , proposed by Jim Jeffers.

The resulting approximation that I used was [.02, .01, .47, 1] .

Answer 2

According to W3C, you are allowed the following attenuation functions in the transition-timing-function property.

• Simplicity
• linear
• ease in
• ease of
• ease of rolling out
• cubic bezier ( <number>, <number>, <number>, <number> )

If you can translate "swing" into a cubic bezier function, you can do it.

Also, looking at the graphical representations here, it seems that the ease-out built into the transition-timing-function is very similar to the swing form.

---

EDIT based on comments:

If you just want to use jQuery for your relaxation, then you don’t even need a plugin. You can simply define your preferred function and use it ...

JQuery functions to facilitate without using a plugin

Answer 3

You are limited to presets or a simple cubic bezier curve. I got around this by creating a javascript engine that generates CSS keyframe animations that execute as transitions:

 bounceDownTransition = new Sauce() bounceDownTransition.recipe( (element) -> element.change("y").from(-200).using(Easie.bounceOut) element.change("scale").from(0).using(Easie.circOut) ) bounceDownTransition.duration(2).delay(0.5).putOn("element_with_this_id") 

You can check the project here: https://github.com/jimjeffers/Sauce

Using CSS keyframe animation, we get enhanced GPU performance for CSS transitions with the flexibility allotted to us using our own custom easing equations in javascript.

My attenuation engine uses Robert Penner's equation port. One that matches jswing should be as follows:

 @sineIn: (time,begin,change,duration) -> -change * Math.cos(time/duration * (Math.PI/2)) + change + begin 

https://github.com/jimjeffers/Easie/blob/master/easie.coffee#L218

UPDATE:

In the comments - if you want, you can try to match the transition curve with a tool, for example:

http://cubic-bezier.com/#.41,.66,.54,.91