Deceleration reduces an animation’s speed near its destination, making digital motion feel more like a physical object settling instead of stopping abruptly. section 12.1 section 12.1.1
Shape deceleration with cubic Bézier control points:
- Move x2 earlier to begin deceleration sooner, or later to preserve speed for longer. section 11.2.2
- Adjust y2 to control the final approach: larger values create a gentler finish, while smaller values create a faster finish. section 11.2.2
- Use an ease-out curve when motion should accelerate initially and gradually lose momentum at the end. section 12.1.1
- Keep y-values between 0 and 1 for standard easing; values above 1 create overshoot, and negative values create anticipation. section 11.5
Sliding dialog
A dialog animated with constant speed looks mechanical. Replacing linear progress with eased progress—1 - Math.pow(1 - progress, 3)—makes it slow naturally as it reaches the center of the viewport. section 12.1.1
Listing 12.2 Animating a dialog onto the screen with an ease-out curve
function openDialog() {
if (isAnimating) return;
isAnimating = true;
let dialog = document.getElementById('dialog');
let start = -300;
let end = (window.innerHeight / 2) - (dialog.offsetHeight / 2);
let distance = end - start;
let duration = 1000;
let startTime = Date.now();
function animate() {
let elapsed = Date.now() - startTime;
let progress = elapsed / duration;
if (progress >= 1) {
isAnimating = false;
return;
}
const eased = 1 - Math.pow(1 - progress, 3); #1
let currentTop = start + eased * distance;
dialog.style.top = currentTop + 'px';
requestAnimationFrame(animate);
}
animate();
}
Inspect the JavaScript listing to see deceleration applied directly to normalized animation progress before calculating the dialog’s position. section 12.1.1
