jQuery Academy · Lesson

Custom Easing and Animation Callbacks

Implement custom easing functions to control animation speed and flow, and utilize callbacks to execute code precisely when animations complete or step.

Custom Easing and Animation Callbacks is a free jQuery Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Beyond Basic Animation Speed

Animations aren't just about moving elements; they're about how they move. Easing controls the acceleration and deceleration of an animation, making it look more natural or dramatic.

jQuery provides two built-in easing options: 'linear' (constant speed) and 'swing' (slow start, fast middle, slow end). But what if you need more?

Exploring Default Easing

Let's see the difference between jQuery's default easing options:

'linear': The animation moves at a constant speed from start to finish.
'swing': This is the default. It starts slow, speeds up in the middle, and slows down again at the end.

Both are simple, but often you'll want more control over the animation's feel.

Custom Easing with jQuery UI

To get more sophisticated easing effects, we often use plugins. A popular choice is the jQuery UI Easing component.

It extends jQuery's $.easing object with many new functions like 'easeOutBounce', 'easeInOutQuad', and more. This gives you a rich library of pre-defined motion curves.

To use them, you typically need to include the jQuery UI library in your project.

Code Demo: Bounce with EaseOutBounce

Let's try an animation with a custom easing function from jQuery UI. Notice how the box bounces at the end, instead of just stopping abruptly. This effect is achieved using 'easeOutBounce'.

(Note: This example assumes jQuery UI's core and effects are included.)

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

Understanding Animation Callbacks

Animations are asynchronous, meaning your code continues to run while they happen. What if you need to do something after an animation finishes?

jQuery's .animate() method accepts a callback function. The most common is the complete callback.

The complete callback fires once the animation on the selected element(s) is fully done.
It's perfect for chaining actions or showing a "done" message.

Code Demo: The `complete` Callback

Here, we'll animate a box and then change its background color and show a message only after the animation is 100% finished.

This ensures visual consistency and proper timing for subsequent actions.

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

The `step` Callback

Sometimes you need to perform an action during an animation, not just at the end. This is where the step callback comes in.

The step callback fires for each animated property at each step of the animation. It's called continuously while the animation is running.

It receives arguments like now (current value of the property), fx (an object containing animation details), and tween (for more advanced control).

Code Demo: The `step` Callback

Let's use the step callback to display the current position of our animated box as it moves.

This shows how you can get real-time updates and react to the animation's progress. We'll specifically use the now argument.

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

Using Multiple Callbacks

You can use both step and complete callbacks in the same animation.

The animate() method accepts an options object as its second argument, where you can define both duration, easing, and callback functions.

This allows for precise control: tracking progress during the animation and executing a final action after it concludes.

Callback Check

Which jQuery animate() callback is best suited for updating a progress bar continuously as an animation runs?

Easing & Callbacks: Summary

Great job! You've learned how to enhance your jQuery animations:

Custom Easing: Use plugins like jQuery UI to apply more dynamic speed curves than just 'linear' or 'swing'.
complete Callback: Execute code precisely when an animation has finished.
step Callback: Get real-time updates and perform actions repeatedly throughout an animation's progress.

These tools give you much finer control over the visual flow and interactive timing of your web elements.

Frequently asked questions

Is the “Custom Easing and Animation Callbacks” lesson free?

Yes — the full text of “Custom Easing and Animation Callbacks” is free to read here on the web, and the jQuery Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.

What will I learn in “Custom Easing and Animation Callbacks”?

Implement custom easing functions to control animation speed and flow, and utilize callbacks to execute code precisely when animations complete or step. You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start jQuery Academy?

No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Custom Easing and Animation Callbacks” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this jQuery Academy lesson?

Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to jQuery Academy