CODEWITHSUNDEEP
jquerycsscss-transitionseasing
StoneHeart
StoneHeart

Reputation: 16590

How to convert css3 transition easing to jquery easing function?

I making a slider for both modern browsers and old browsers too. I use translate3d and transition to make animation in modern browsers which support css3. I use 2d top, left and easing functions for old browser. I use css3 easing from here:

http://matthewlein.com/ceaser/

I want to convert it to javascript function for using on old browser. I know there are many easing function out there, but I just want to know how to convert. Is it possible?

Upvotes: 7

Views: 12595

Answers (2)

Endre Simo
Endre Simo

Reputation: 11551

I know the answer was already accepted, but i would like to share another great jQuery plugin suited for easing animations.

http://ricostacruz.com/jquery.transit/

Upvotes: 3

A.M.K
A.M.K

Reputation: 16795

You can use the jQuery Bez plugin for Cubic Bezier Easings in jQuery:

Demo: http://jsfiddle.net/SO_AMK/sbZ7a/

jQuery:

$("#box").click(function() {
    $(this).animate({
        "margin-left": 200
    }, 2000, $.bez([0.685, 0.595, 0.020, 0.720]));
});

// Take the Ceaser output and put the values in, in order, like above. i.e. cubic-bezier(0.685, 0.595, 0.020, 0.720) would end up as the above value​

Plugin: https://github.com/rdallasgray/bez

Upvotes: 9

Related Questions