7

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?

StoneHeart
  • 15,790
  • 32
  • 67
  • 84
  • I think you'd have to write a function to emulate it. Could you use the Easing plugin and just use a prebuilt function? http://gsgd.co.uk/sandbox/jquery/easing/ – Blender Sep 16 '12 at 19:17
  • 1
    There is already a jQuery library which does exactly what you are trying to do [jQuery Transit](http://ricostacruz.com/jquery.transit/) You could use it or at least have a look at the source :) – Andreas Sep 16 '12 at 19:19
  • +1 Cool Animations tool. – A.M.K Sep 16 '12 at 19:38
  • @Andreas, Write it as an answer, get credit for it! – A.M.K Sep 16 '12 at 19:40
  • 1
    @A.M.K It's not quite the correct answer on the TOs question - just a shortcut to the solution – Andreas Sep 16 '12 at 20:01
  • It may not be the _exact_ answer that was requested but I believe that it is a better solution than to manually convert the easing to JS. – A.M.K Sep 16 '12 at 20:04

2 Answers2

9

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

A.M.K
  • 16,727
  • 4
  • 32
  • 64
3

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/

Endre Simo
  • 11,330
  • 2
  • 40
  • 49
  • 1
    That's the library i've mentioned in the comments and which A.M.K. used in the first version of his answer. The problem with this library is, that it won't do the easing animation in older browsers as requested by the TO :) – Andreas Sep 17 '12 at 11:20