Easing concepts.
Every GSAP ease explained: expo, power, back, elastic, sine, steps and CustomEase, and when each one fits real UI.
Pick an underlined value to change it
gsap.to(".box", {x: 196,duration: ,ease: ,});
- back.outback.out is a GSAP ease that overshoots its destination, then settles back.
- circcirc is a GSAP easing family (circ.in, circ.out, circ.inOut) whose curve traces a quarter circle, so the motion is nearly flat through the middle and bends hard at one or both ends.
- CustomBounceCustomBounce is a GSAP easing plugin that builds a tunable bounce curve you shape yourself, instead of the one fixed shape you get from the built-in bounce.out.
- CustomEaseCustomEase is a GSAP plugin that lets you author any easing curve you want, defined either by an SVG path string or by control points.
- CustomWiggleCustomWiggle is a GSAP easing plugin that makes a value oscillate back and forth a set number of times before settling on its end value.
- ease-in-outease-in-out is the family of GSAP eases that accelerate from rest, cruise through the middle, and decelerate to rest.
- easeReverseeaseReverse is a GSAP tween property, added in 3.15, that sets a separate ease for when the playhead moves backward.
- elastic.out and bounce.outelastic.out and bounce.out are GSAP overshoot eases that let an element pass its target value and settle back, instead of decelerating cleanly into it.
- expo.outexpo.out is a GSAP easing function that starts an animation fast and decelerates exponentially to its final value.
- power4.outpower4.out is GSAP's most aggressive standard ease-out, decelerating from very high initial velocity to a near-instant stop at the end.
- roughrough is a GSAP ease from the EasePack plugin that jitters an animation's progress through randomized in-between points instead of moving it smoothly, so a value arrives with a shaky, hand-drawn or glitchy feel.
- sinesine is the gentlest of GSAP's standard easing families, built on a segment of a sine wave so its acceleration and deceleration are only slightly stronger than linear.
- slowslow is a GSAP ease from EasePack that runs fast at the start and end of a tween and slows down through the middle, so the value lingers where the eye can actually read it.
- steps()steps() is a GSAP ease that quantizes a tween's progress into a fixed number of discrete jumps instead of interpolating smoothly, so the animated value snaps between set positions.