# No Bounce or Elastic Easing
**NEVER** · **ID:** `animations-impeccable-no-bounce-easing` · **Category:** animations
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/animations-impeccable-no-bounce-easing
> NEVER: Let a UI element overshoot its final position: no `animate-bounce`, no animation named `bounce|elastic|wobble|jiggle|spring`, and no `cubic-bezier()` whose y1 or y2 falls outside `[-0.1, 1.1]`. Ease out with exponential curves (ease-out-quart / quint / expo).
Ease out with exponential curves and never let a UI element overshoot its final position
The detector flags any animation-name matching bounce|elastic|wobble|jiggle|spring, Tailwind's animate-bounce, and — the precise part — any cubic-bezier() whose y1 or y2 falls outside the range [-0.1, 1.1], because a control point past the 0–1 band is exactly what overshoot is. Real objects decelerate into a stop; they do not sail past their destination and spring back. Overshoot on a modal or a toast reads as dated and, on anything a user opens dozens of times a day, as broken. Note this is not a duplicate of "Easing Fits Subject", which only asks that a curve match its subject and never bans overshoot — this principle draws the hard line.
## Bad — do not do this
`animations-impeccable-no-bounce-easing-bad`
```tsx
import { useEffect, useRef, useState } from 'react';
/**
* Bad: the modal enters on cubic-bezier(.68, -.55, .27, 1.55). y1 = -0.55 and
* y2 = 1.55 both fall outside the detector's [-0.1, 1.1] band, which is the
* precise definition of overshoot: the element sails past its resting position
* and springs back. The toast underneath uses Tailwind's `animate-bounce`.
*
* Duration (400ms) and distance (32px) are identical to the Good example —
* only the curve differs.
*/
export function ImpeccableNoBounceEasingBad() {
const [shown, setShown] = useState(false);
const frame = useRef(0);
useEffect(() => {
frame.current = requestAnimationFrame(() => setShown(true));
return () => cancelAnimationFrame(frame.current);
}, []);
const replay = () => {
setShown(false);
frame.current = requestAnimationFrame(() =>
requestAnimationFrame(() => setShown(true))
);
};
return (
{/* Modal — overshooting curve */}
Delete workspace?
This cannot be undone.
{/* Toast — animate-bounce, forever */}
Saved
cubic-bezier(.68, -.55, .27, 1.55) — y1 and y2 escape the [-0.1, 1.1]
band, so the dialog overshoots and springs back. The toast bounces on a loop. Nothing here
has mass; the motion is claiming it does.
);
}
```
## Good — do this
`animations-impeccable-no-bounce-easing-good`
```tsx
import { useEffect, useRef, useState } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
/**
* Good: the same modal, the same 400ms, the same 32px of travel — on
* cubic-bezier(.22, 1, .36, 1) (ease-out-quart). Both y control points sit
* inside the detector's [-0.1, 1.1] band, so the dialog decelerates into its
* resting position and stops there, like a real object. The toast settles in
* on the same curve instead of bouncing.
*
* Only the curve differs from the Bad example.
*/
/** The two curves plotted in the same unit box, so the overshoot is visible. */
function CurveStrip() {
return (
{/* Toast settles on the same curve — no loop, no bounce */}
Saved
cubic-bezier(.22, 1, .36, 1) — same 400ms, same 32px, both y points
inside [-0.1, 1.1]. It sprints and decelerates into place instead of springing past it.
Reduced motion gets an instant appearance.