Custom Transitions and Easing
In this page:
What is Easing?
Easing describes the acceleration curve of an animation over time — how its speed changes from start to finish — rather than the constant, unchanging speed a plain linear animation would use. A well-chosen easing curve is often what makes an animation feel natural instead of mechanical.
Example: What is Easing?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<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.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "linear");
</script>
</body>
</html>Ease In and Ease Out
Ease-in starts an animation gently and gradually speeds up toward the end, which can feel like something building up momentum. It's a less common default than ease-out, but useful for animations that should feel like they're gathering energy.
Example: Ease In and Ease Out
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<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.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "easeInQuad");
</script>
</body>
</html>Ease In and Out
Ease-out starts an animation quickly and gradually slows down as it approaches its final position, mimicking how physical objects naturally decelerate. This is one of the most commonly used easing styles in interface design because it feels responsive without an abrupt stop.
Example: Ease In and Out
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<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.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "easeOutQuad");
</script>
</body>
</html>Easing with UI Effects
Ease-in-out combines a gentle start with a gentle finish, speeding up through the middle of the animation. It often feels the smoothest of the common easing styles for interface animations like panels sliding open or elements fading into view.
Example: Easing with UI Effects
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<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.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "easeInOutQuad");
</script>
</body>
</html>Small Easing Project
jQuery UI's effects — like slide, fade, and bounce — can all be given a specific easing function to control exactly how they accelerate and decelerate, letting you fine-tune the feel of transitions like menus opening or notifications appearing.
Example: Small Easing Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<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.js"></script>
</head>
<body>
<div id="panel" style="display:none">Menu</div>
<script>
$("#panel").show("slide", {}, 500, function() { console.log("Opened with easing"); });
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: