Elastic easing / back easing

Back easing and elastic easing both leave the ordinary 0 to 1 corridor. Back briefly pulls opposite the movement or overshoots the target once. Elastic crosses the target several times with shrinking swings, like a plucked spring. The first feels like a snap; the second feels flexible and energetic. The names come from Robert Penner's easing equations, written for Flash and still the vocabulary GSAP uses in 'back.out' and 'elastic.out'.

Reach for back easing on small menus, toggles, and pop-ins that need one confident settle. Reserve elastic motion for playful icons, blobs, and celebratory moments where multiple oscillations suit the material. A cubic-bezier can make a single back-style overshoot, while a CSS linear() curve, explicit keyframes, or a spring can describe the repeated crossings of elastic motion.

Gotcha: every wind-up adds perceived delay and every extra crossing adds noise. Keep overshoot small, avoid it on large text or panels, and check overflow containers so the moving edge is not clipped. Do not use either curve for controls that must track a pointer exactly.