How to Include jQuery UI Easing for Animations

This guide explains how to integrate and use the jQuery UI easing library to enhance web animations beyond standard linear and swing transitions. By including the full jQuery UI suite or its standalone effects core, you unlock over thirty specialized easing functions—such as bounce, elastic, and back transitions. Below, you will find direct instructions on loading the library via CDN and applying these effects to your jQuery animation methods.

1. Load jQuery Core and jQuery UI via CDN

Because jQuery UI depends on the core jQuery library, you must load jQuery first, followed by jQuery UI. Place these script tags within your HTML document's <head> or just before the closing </body> tag:

<!-- 1. jQuery Core -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 2. jQuery UI (includes all easing equations) -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

If you only need easing equations and wish to avoid the entire jQuery UI framework, you can alternatively use the standalone jQuery Easing Plugin by CDN, but loading jQuery UI's effects module is the standard official approach.

2. Apply Easing in the .animate() Method

Once both scripts are loaded, the standard jQuery .animate() method automatically accepts jQuery UI easing keywords as its third argument (or via the options object).

Syntax:

$(selector).animate(properties, duration, easing, complete);

3. Example Implementation

Here is an example demonstrating a box animating across the screen using the easeOutBounce transition:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Easing Example</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: #007bff;
      position: relative;
    }
  </style>
  <!-- Load Libraries -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>

  <button id="start-btn">Animate Box</button>
  <div id="box"></div>

  <script>
    $('#start-btn').on('click', function() {
      $('#box').animate({
        left: '400px'
      }, 1500, 'easeOutBounce');
    });
  </script>

</body>
</html>

4. Available Easing Functions

jQuery UI organizes easing into three variations per curve: easeIn (starts slow), easeOut (ends slow), and easeInOut (starts and ends slow). Common curves include:

• Quad / Cubic / Quart / Quint: Standard acceleration/deceleration curves.
• Expo: Rapid exponential acceleration.
• Back: Pulls back past the start or target before settling (easeInBack, easeOutBack, easeInOutBack).
• Bounce: Bounces against the edge (easeInBounce, easeOutBounce, easeInOutBounce).
• Elastic: Simulates an elastic band snapping into place (easeInElastic, easeOutElastic, easeInOutElastic).