Concepts category

Easing concepts.

How animation interpolates between values - the shape of the curve from start to finish.

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.