Elastic Snap Easing with Double Overshoot

Elastic Snap with cubic-bezier

By setting y1 below 0 and y2 above 1, you create a curve that overshoots in both directions — the animation winds back before launching forward, then overshoots the target before settling.

The Values

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

This is the easeInOutBack curve. The negative y1 (-0.55) creates a "wind-up" effect at the start, and the high y2 (1.55) creates overshoot at the end. Combined, they produce a rubber-band or elastic-snap feel.

Understanding the Motion

1. Phase 1 (0%–25%): The animation actually moves backward slightly from the starting position due to the negative y1.
2. Phase 2 (25%–75%): Rapid forward motion as the curve transitions through the steep middle section.
3. Phase 3 (75%–100%): The animation overshoots the target and then snaps back into place.

Code Example

.toggle-thumb {
  transition: transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toggle.on .toggle-thumb {
  transform: translateX(24px);
}

Adjusting the Intensity

Variation	cubic-bezier	Effect
Subtle	(0.68, -0.2, 0.265, 1.2)	Gentle wind-up and overshoot
Standard	(0.68, -0.55, 0.265, 1.55)	Classic easeInOutBack
Extreme	(0.68, -0.8, 0.265, 1.8)	Pronounced rubber-band

When to Use Caution

Elastic easing can feel jarring if overused or applied to large movements. Reserve it for small, deliberate interactions where the playfulness enhances the user experience — toggle switches, small icon animations, or micro-interactions.