Looking for a “swing”-like easing expressible both with jQuery and CSS3

Question

I have to perform two animations on an object simultaneously.
For a number of reasons, I want to use jQuery for the vertical animation and CSS3 for the horizontal one.

On jQuery side, swing easing works great:

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

I'm looking for a way to express this easing function in CSS3 transition.

If it is impossible, I'm looking for an easing function (e.g. a Bézier curve) that is most similar to swing
and can be used both in jQuery and CSS3. Please include link to any required plugins.

Teetotum

Just found I can go the opposite way and use bezier format (also used by CSS3) for jQuery easing to have consistent easings. – Teetotum

Even better—jquery.easie provides exact CSS3 easings for jQuery. – Teetotum

Personally I'd recommend this plugin because it doesn't prefix all it's easing functions with easie, but that's just personal preference. You might want to try ease-in-out in your CSS3 for a swing-ish animation. – Levitan

You asked how to do swing with CSS3. How does using a jQuery plugin to "simulate" CSS easing help you, when you could just use the original jQuery swing in the first place? – Impermanent

you'd be searching for ´ease-in-out´ – Bergh

@Sparky: I'm looking for a way to keep my horizontal (CSS3) and vertical (jQuery) animations consistent. But this question is specifically about any approximation to swing in CSS3 so that's the reason I wrote about these plugins in comments. – Teetotum

Then the closest way to do a swing in CSS3 would be the ease-out built into the CSS3 transition-timing-function property. – Impermanent

@Impermanent @Jam Hey folks, sorry about the confusion. I will accept the answer that contains a function most similar to swing that can be used both with jQuery and CSS3, with links to any relevant plugins. – Teetotum

Answer 1

TL;DR

I found that [.02, .01, .47, 1] Bézier curve provides a good enough 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 might as well use bez).

---

The Quest

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

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

I cropped it and put it online.
Then used position: absolute to overlay cubic-bezier.com, suggested by Jim Jeffers.

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

Teetotum

Answer 2

As per the W3C, you're only allowed the following easing functions on the transition-timing-function property.

• ease
• linear
• ease-in
• ease-out
• ease-in-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 like the ease-out built into transition-timing-function is very similar to the shape of swing.

---

EDIT based on comments:

If you'd rather just use jQuery for your easing, then you don't even need a plugin. You can just define your preferred function and use it...

jQuery easing functions without using a plugin

Impermanent

I have just tried ease-out but unfortunately it doesn't work well for me (the difference is noticeable). I included a clarification: it's much easier right now to use jQuery for one animation and CSS3 for the other one. Getting the easing right is the only problem. Otherwise, thanks for the info! – Teetotum

@DanAbramov, if ease-out is not close enough, then trying to duplicate it with a cubic-bezier is the only other option for a CSS3-only solution. – Impermanent

Thanks, I'll try and let you know the results. – Teetotum

Answer 3

You are limited to the presets or a simple cubic bezier curve. I got around this by creating an easing engine in javascript that generates CSS keyframe animations that are executed 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 checkout the project here: https://github.com/jimjeffers/Sauce

By using CSS keyframe animations we get the GPU enhanced performance of CSS transitions with the flexibility allotted to us by using our own custom easing equations in javascript.

My easing engine uses a port of Robbert Penner's equations. The one that matches jswing should be this:

@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:

Per comments -- if you want you can attempt to match the curve of a swing transition using a tool such as:

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

Displume

Wow, this is hot. Any support for IE? – Teetotum

However, he's asking about how to do it with CSS3, not JavaScript. – Impermanent

Not yet but could use some help! Just doing it on the side. – Displume

@Sparky672 yes but I'm showing how you can use javascript to do it with CSS3. Rather than treating them as mutually exclusive options. – Displume

I'm intrigued by this as well... but from a community moderation standpoint, it's technically not an answer... unless he edits his original question ;) – Impermanent

@Sparky672 fair enough I suppose you could probably match a swing animation with a bezier-curve. – Displume

Hey @Jim, thanks for all the help. I just posted my solution. – Teetotum

@DanAbramov That looks like the best answer! – Displume