10
X

Quick Tip: Add Easing to Your Animations

read 19 comments

Easing can really bring life to an effect. Easing controls how an animation progresses over time by manipulating its acceleration. jQuery has two built-in easing methods: linear and swing. While they get the job done, they are pretty boring when compared to what's made available through the jQuery easing plugin.

The jQuery easing plugin offers 30 different easing methods, courtesy of Robert Penner's easing equations. Let's check some of them out.

Easing can only be applied when using the .animate() method. The effects helper methods like .show('fast'), .toggle('fast'), fadeIn('fast'), and so on all just use the default easing, "swing."

Continue Reading Below

There are two ways to use easing with the .animate() method. For example, let's say we want to animate the opacity of a particular div. The first way to call .animate() is like this:

JavaScript:
  1. $('#myDiv').animate(
  2.     { opacity: 0 }, // what we are animating
  3.     'fast', // how fast we are animating
  4.     'swing', // the type of easing
  5.     function() { // the callback
  6.         alert('done');
  7.     });

The second way is very similar and might even look the same at first glance.

JavaScript:
  1. $('#myDiv').animate(
  2.     { opacity: 0 }, // what we are animating
  3.     {
  4.         duration: 'fast', // how fast we are animating
  5.         easing: 'swing', // the type of easing
  6.         complete: function() { // the callback
  7.             alert('done');
  8.         }
  9.     });

The difference is that the second method signature takes only two arguments: the properties we are animating and an object literal of settings/options. The first method signature separates out the settings/options into individual arguments.

jQuery Easing Plugin

Finally, let's look at a few of the 30 easing methods provided by the easing plugin.

Ease Out Bounce

JavaScript:
  1. $(document).ready(function() {
  2.     $('#easing_example_1').click(function(event) {
  3.         $(this)
  4.             .animate(
  5.                 { left: 200 }, {
  6.                     duration: 'slow',
  7.                     easing: 'easeOutBounce'
  8.                 })
  9.             .animate(
  10.                 { left: 0 }, {
  11.                     duration: 'slow',
  12.                     easing: 'easeOutBounce'
  13.                 });
  14.     });
  15. });

Click Me

 

Ease Out Elastic

JavaScript:
  1. $(document).ready(function() {
  2.     $('#easing_example_2').click(function(event) {
  3.         $(this)
  4.             .animate(
  5.                 { left: 200 }, {
  6.                     duration: 'slow',
  7.                     easing: 'easeOutElastic'
  8.                 })
  9.             .animate(
  10.                 { left: 0 }, {
  11.                     duration: 'slow',
  12.                     easing: 'easeOutElastic'
  13.                 });
  14.     });
  15. });

Click Me

 

Ease Out Back

JavaScript:
  1. $(document).ready(function() {
  2.     $('#easing_example_3').click(function(event) {
  3.         $(this)
  4.             .animate(
  5.                 { left: 200 }, {
  6.                     duration: 'slow',
  7.                     easing: 'easeOutBack'
  8.                 })
  9.             .animate(
  10.                 { left: 0 }, {
  11.  
  12.                     duration: 'slow',
  13.                     easing: 'easeOutBack'
  14.                 });
  15.     });
  16. });

Click Me

 

jQuery UI Easing

jQuery UI includes the easing plugin as part of its Effects Core. It also extends the effects helper methods to support the use of easing and even other types of effects. You can find the documentation for jQuery UI Effects here.


comment feed

19 comments

  1. You can also define an easing value by default using something like
    $.easing.def = "easeOutQuart";

  2. Nice plugin, however I think regular easing in most cases is more than enough.

  3. William

    Remember to have your div absolutely positioned for this to work.

    • Thanks for pointing that out William. To clarify a little more, you'll need to have either absolute, relative, or fixed position to animate the left property.

  4. awesome plugin. thank you.

  5. Easing is a great plugin and really adds life to your application. However, we should not overuse it either. I have seen applications with lots of animation that really confuses user rather than adding the feel/brand to it...

    Don't forget the end user !!!

  6. Производство и поставка - сетка самой широкой номенклатуры с различными формами,
    физическими свойствами и цветовыми решениями.

  7. Суперский должность! Блог уже в ридере
    За такие местоы бно награды давать, на полном серьезе!

  8. JQuery is by far the most documented javaScript library on the web. Nice post, thanx for sharing.

  9. wow, must bookmark this!
    great article :)

  10. Great plugin. Will use it on a project.
    K.

  11. Art Moore

    xv2bhnmnkrpo6auy

    網站製作學習誌

  12. Hello ShoutBox!

  13. Gerçekten çok eğlenceli thanks:)

  14. That is a great tutorial! I think on my next site redesign I am going to try and incorporate some sort of easing. Thanks again!

  15. The easing plugin with Jquery , I believe has revolutionised the internet , as it enables websites to look much slicker and smoother !

  16. maya

    so where can one find a list of all easing options (swing, slide, etc..)
    thank you..

  17. seo

    Thanks for this article.! I'm using this plugins and jquery but i want more ease. Where can i find can u help me ?

  18. Moamen

    Pretty simple and useful, thanks a lot ;)

13 Pings

  1. [...] bookmarks tagged javascript Quick Tip: Add Easing to Your Animations saved by 3 others     ilovesasuke401 bookmarked on 02/02/09 | [...]

  2. [...] Quick Tip: Add Easing to Your Animations » Learning jQuery [...]

  3. Slide Elements in Different Directions « Ajax Example

    [...] To learn about adding easing effects to your slides, check out Brandon Aaron’s Quick Tip: Add Easing to Your Animations. [...]

  4. [...] 快速提示 : 购买放松 , 您的动画 [...]

  5. [...] outros links:Escala de cinza em hover com jQuery e CSSNavegação animada com jQueryFiltragem rápida e fácil com jQueryAnimando elementos com jQuery e Easing [...]

  6. [...] 。 easing 插件页面,可以在这个页面中了解查看插件的效果。 easing 实现效果,可以在这个页面中了解到这些动画效果如何使用。 [...]

  7. [...] ui accordion from http://jqueryui.com/demos/accordion/mouseover.html and easing plugin from http://www.learningjquery.com/2009/0...our-animations to this i want to add the easing effect so that when the mouse moves over the title along with [...]

  8. [...] em hover com jQuery e CSS Navegação animada com jQuery Filtragem rápida e fácil com jQuery Animando elementos com jQuery e EasingPodcast do MêsGuanacast Podcast bem divertido e descontraido. Começei a ouvir este mes ainda [...]

Sorry, but comments for this entry are now closed.