jQuery Easing Animation Tester

GigaBook Web Developer Tools

With the coveloping jQuery animation tester you can preview as many animations as you want at a time to compare the differences and find the best one for your design.

Preview a range of different easing types using our jQuery easing animation tester. Try out the following easing options:

  • linear
  • swing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

Using the tool

To preview an animation simply choose an option from the drop down and click 'Demo'. You can stack as many different easing types as you want. To remove a an animation simply click on or just above any of the animation lines.

Using an animation

Here's an example use a jQuery easing option with the animation function that will move an element with the id of 'demo' left by 100% over a period of 2 seconds. It uses the swing easing option and on completion will alert a finished message:

$('#demo').animate({left: "100%"}, 2000, 'swing', function()
{
    alert('finished!);
});

The animate method takes 4 parameters:

  1. An object of CSS parameters that you want to change in the animation
  2. Duration - the length of time the animation will take to complete
  3. Easing - the easing option you wish to use
  4. Complete function - a function to be called when the animation is complete

To open up all the easing options remember to include jquery ui, you can do this with the following script:

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!