A Visual Guide to GSAP Easing

Origin: The word "linear" just means "straight line" — the value changes at a perfectly constant rate, with no acceleration at all. GSAP also calls it "none" or "power0": rung 0 on Jack Doyle's 0–4 strength ladder, the bottom of the dial where there is no easing strength whatsoever.

In motion: Moves at a completely even speed from start to finish — no ease-in, no ease-out. The result can feel mechanical or robotic for most UI work, but it is ideal for things that should never appear to accelerate: spinning loaders, progress bars, and continuous scrolling parallax.

Formula: x

Origin: The traditional name is Quadratic (t²) — the curve is shaped by squaring the time value. GSAP also calls it power1: the "1" is its rung on Jack Doyle's 0–4 strength ladder (0 = linear, 4 = strongest), a friendlier dial for animators than a Latin exponent name.

In motion: The gentlest of the polynomial eases. Out Quad speeds up fast and glides to a soft stop — a very natural, web-friendly feeling. It is the GSAP default ease for a reason: approachable without being abrupt.

Formula: 1−(1−x)²

Origin: The traditional name is Cubic (t³) — a curve with a single inflection point. GSAP also calls it power2: rung 2 of 4 on Jack Doyle's strength ladder, one notch stronger than Quad and a touch more assertive.

In motion: More confident than Quad — the acceleration and deceleration have a little more weight to them. Out Cubic is the workhorse for modals, drawers, and cards that need to feel polished but not showy.

Formula: 1−(1−x)³

Origin: The traditional name is Quartic (t⁴) — the fourth-power polynomial. GSAP also calls it power3: rung 3 of 4 on Jack Doyle's strength ladder, one below the strongest, so it reads as noticeably more forceful than Cubic.

In motion: Starts very slow (or stops very fast) and makes up the distance with a sharp burst of speed. Great for elements that should feel like they spring into position with conviction — hero headlines, section transitions.

Formula: 1−(1−x)⁴

Origin: The traditional name is Quintic (t⁵), the fifth-power polynomial; GSAP's alias "Strong" was the original TweenLite name that said what it did rather than what it was. GSAP also calls it power4: rung 4 of 4, the top of Jack Doyle's strength ladder and the most forceful of the built-in polynomial eases.

In motion: Dramatic. Out Quint hangs nearly motionless for most of the duration then rockets to a dead stop. Ideal for cinematic hero animations where you want the audience to feel the weight of the landing.

Formula: 1−(1−x)⁵

Origin: The step function has roots in film and traditional animation, where motion was defined frame-by-frame rather than interpolated. CSS first introduced steps() for sprite-sheet animation; GSAP's SteppedEase does the same thing for tweens.

In motion: Jumps between discrete values instead of interpolating smoothly — exactly like flipping through animation frames. Great for sprite-sheet characters, retro digital displays, typewriter effects, and any animation that should feel quantized rather than fluid.

Formula: ⌊x·n⌋/n

Origin: Named after the sine function from trigonometry. Robert Penner noticed that a quarter-circle of a sine wave produces a naturally smooth ease — it was among the non-polynomial eases Penner included in his 2002 Flash book.

In motion: The softest ease of all — gentler even than Quad. The sine wave's natural curvature makes it feel organic and relaxed, like something floating or breathing. Great for subtle hover states and ambient motion.

Formula: sin(x·π/2)

Origin: "Expo" is short for exponential. The formula is based on powers of 2: the easeIn form is 2^(10x−10), and the easeOut form displayed here is 1−2^(−10x) — both create a curve that starts at essentially zero and explodes outward (easeIn) or fires fast and cuts off cleanly (easeOut).

In motion: The most dramatic of the "serious" eases. Out Expo fires fast and cuts off almost instantaneously at the end — it feels sharp, modern, and high-energy. Common in tech product UIs and dashboard animations.

Formula: 1−2^(−10x)

Origin: "Circ" is short for circular. The formula √(1−x²) traces the edge of a unit circle — the same geometry used in a compass arc. Penner included it because the circular arc gives a uniquely smooth transition into and out of motion.

In motion: Feels like an object being swung on a pendulum — slow at the extremes, fast in the middle. Out Circ decelerates in a very rounded, satisfying way. Less common than Expo but excellent for UI panels that slide in from the side.

Formula: √(1−(x−1)²)

Origin: Penner named it "Back" because the motion goes backwards (past the start or end point) before returning. The overshoot constant 1.70158 was Penner's own finely tuned value — it produces exactly the right amount of anticipation without going too far.

In motion: Out Back overshoots its destination and springs back into place — like a ball settling after a gentle bounce. It adds life and physicality to menus, tooltips, and cards that pop into view. Configurable: increase overshoot for more drama.

Formula: 1+c₃(x−1)³+c₁(x−1)²

Origin: "Elastic" describes the rubber-band physics the curve mimics. The formula uses a decaying sine wave — the same math that models a vibrating string — to simulate an elastic material snapping back. Penner derived it to fill the gap between Back (one overshoot) and real springy motion (many oscillations).

In motion: Bounces like a rubber band — multiple oscillations that decay to rest. Out Elastic is attention-grabbing: great for notification badges, selection feedback, or playful "pop" moments. Configurable: lower the period for tighter, faster wobbles.

Formula: 2^(−10x)·sin((10x−0.75)·2π/3) + 1

Origin: Penner modeled the physics of a ball dropping and bouncing on a floor — each bounce has less energy than the last. The formula uses four piecewise quadratic segments, each shorter and higher than the one before, to simulate the decreasing bounces of a real ball.

In motion: Out Bounce makes an element look like it dropped onto the screen and bounced to a stop. It is more literal than Elastic — multiple distinct bumps versus smooth oscillation. Perfect for onboarding illustrations, game UI, and anywhere physicality adds delight.

Formula: n1·(x−k/2.75)² + offset (piecewise)

Origin: RoughEase was a GreenSock invention designed for motion designers who needed jittery, hand-drawn-looking animation. The name is entirely descriptive — the curve is intentionally rough. It was part of the Club GreenSock EasePack, free since GSAP v3.13 (April 2025).

In motion: Generates a randomized, spiky curve with configurable roughness, strength, number of points, and taper. The result looks hand-animated — trembling text, earthquake effects, glitchy UI transitions, distressed type. Each call produces a unique curve.

Formula: randomized multi-point spline

Origin: SlowMo is a GSAP-original ease that was designed for cinematic slow-motion effects. The idea came from film: a shot eases in, lingers at slow speed for a configurable ratio, then eases out. The name says exactly what it does.

In motion: Ease in, play at a crawl through the middle, then ease out — like a camera push that ramps up, holds, and ramps down. Perfect for product reveals, dramatic text entrances, or any sequence where you want to give the viewer time to absorb a moment.

Formula: configurable slow-middle spline

Origin: ExpoScaleEase was created to solve a specific perceptual problem: when scaling from a very large value to 1 (or vice versa), a linear interpolation of scale values looks wrong to the human eye because scale is perceived logarithmically. The name combines "exponential scale" + "ease."

In motion: Compensates for logarithmic scale perception so that zooming from 500% down to 100% looks perceptually even — not front-loaded. Essential for zoom-based hero transitions, map reveals, and any tween where the start and end scale differ dramatically.

Formula: logarithmic scale compensation

Origin: CustomEase is a GreenSock plugin that lets you define any curve imaginable as an SVG path. It was the "holy grail" ease for motion designers — total freedom over the timing curve. Free since GSAP v3.13 (April 2025).

In motion: Turns any SVG path string or cubic-bezier into an easing function. This means you can design your exact timing curve in the GSAP Ease Visualizer (or a tool like Figma's motion editor) and paste it in. If you need a curve that goes backwards, bounces exactly twice, or holds in the middle, this is your tool.

Formula: arbitrary SVG path

Origin: CustomBounce was built by the GSAP team to give designers exact control over bounce behavior — how many bounces, how squashed, how quickly they decay. It pairs with a matching CustomEase to keep the squash-and-stretch in sync with the position.

In motion: Generates a tailored bounce curve and (optionally) a paired squash-and-stretch ease. Unlike the fixed Bounce ease, you control the number of bounces and their feel. The result is hand-crafted cartoon physics rather than simulated ball-drop physics.

Formula: configurable multi-segment bounce spline

Origin: CustomWiggle was designed by the GSAP team as the playful counterpart to CustomBounce — where Elastic oscillates smoothly, Wiggle can be configured to pulse, zig-zag, or shake with a variety of waveform shapes (sine, uniform, sawtooth, etc.).

In motion: Produces a configurable "attention shake" — like wobbling a notification bell or making a form field shake on invalid input. Choose your wiggle count, type (ease-out wiggle vs uniform), and direction. The output pairs naturally with rotation or x/y tweens.

Formula: configurable decaying oscillation

Origin: The CSS `ease` keyword was baked into the CSS Transitions spec (2009) as the friendly default — it approximates the classic Mac OS animation style. The control points (0.25, 0.1, 0.25, 1) were chosen by the CSS working group to feel natural on a wide range of UI elements.

In motion: Starts with a brief ramp-up, then decelerates smoothly to a stop — closer to ease-out than ease-in, but not identical. It is the default CSS transition timing, so your browser already uses it constantly without you asking. Webflow's "Ease" option maps directly to this.

Formula: cubic-bezier(0.25, 0.1, 0.25, 1)

Origin: Part of the original CSS transitions keyword set. "Ease in" is the universal animation term for "start slow, finish fast." The bezier (0.42, 0, 1, 1) is a gentle acceleration curve the CSS working group felt looked right for exits and dismissals.

In motion: Starts slowly and accelerates toward the end — the exit ease. Elements leaving the screen should ease-in (they accelerate away) so the user's eye is not yanked back. Use it for dismissals, fade-outs, and slide-aways.

Formula: cubic-bezier(0.42, 0, 1, 1)

Origin: The counterpart to ease-in. "Ease out" means "start fast, finish slow" — an element enters at full speed and decelerates to rest. The bezier (0, 0, 0.58, 1) was chosen for feeling natural and responsive on entrances.

In motion: Starts fast and decelerates to a stop — the entry ease. Elements appearing on screen should ease-out so they feel like they arrived with energy and settled naturally. The most human-feeling motion direction for UI entrances.

Formula: cubic-bezier(0, 0, 0.58, 1)

Origin: The symmetric CSS keyword — slow start and slow finish with a fast middle. The bezier (0.42, 0, 0.58, 1) is a symmetric S-curve — it borrows ease-in's opening slope and ease-out's closing slope for a balanced ramp-up, cruise, and ramp-down. Useful for looping animations and state transitions.

In motion: Ramps up, cruises, and ramps back down symmetrically. Great for looping or continuous animations (carousels, pulsing indicators) where the transition should feel equally smooth in both directions.

Formula: cubic-bezier(0.42, 0, 0.58, 1)

Origin: CSS steps() was introduced in the CSS Animations Level 1 spec to support sprite-sheet animation directly in CSS. The jump direction keywords (jump-start, jump-end, etc.) were added later to give fine-grained control over which frame appears at time 0 and time 1.

In motion: Produces discrete jumps for sprite-sheet characters, progress indicators, and retro pixel animations. `step-start` jumps immediately; `step-end` holds until the last moment. Pair with a background-position tween for frame-by-frame CSS sprite animation.

Formula: ⌊x·n⌋/n (with jump position)

Origin: The CSS `linear()` easing function landed in Chromium 113 / Firefox 112 (2023) and Safari 17 (2023). Introduced in the CSS Easing spec (with Jake Archibald's generator popularizing it), it lets developers describe Bounce, Elastic, and Spring eases natively in CSS — filling the gap that cubic-bezier() could never cover.

In motion: Accepts a list of value/position pairs and interpolates between them linearly — effectively a piecewise-linear approximation of any curve. Generators like Jake Archibald's linear-easing-generator.netlify.app can take any GSAP ease and output the equivalent `linear()` string for pure CSS use.

Formula: linear(p0 t0%, p1 t1%, …)