Milk Moon Studio

A Visual Guide to GSAP Easing

Q: What's the GSAP equivalent of Webflow's Ease Out Quint?

It's power4.out. GSAP renamed the Penner polynomials onto a 0–4 strength ladder, so Quint (the fifth-power t⁵ curve, the strongest of the classic polynomials) became Power4. Quint, Strong, and power4 are all the same curve — the same dramatic hang-then-rocket motion you get from Webflow's Ease Out Quint.

Q: Can CSS do an elastic or bounce ease?

Not with cubic-bezier() — a cubic bezier mathematically cannot overshoot or oscillate, so true Elastic, Bounce, and Back are impossible with it. The modern CSS linear() function (Chrome/Firefox 2023, Safari 17) changes that: it stitches together many points to approximate any curve, including bouncy and elastic ones. Generators like Jake Archibald's linear-easing tool can convert a GSAP ease into the equivalent linear() string for pure-CSS use.

Q: Which GSAP ease should I use for a UI element entering the screen?

Reach for an "out" ease — most often power2.out or power3.out. An out ease starts fast and decelerates to a gentle stop, so an element that's appearing feels like it arrived with energy and settled naturally. Save "in" eases (slow start, fast finish) for elements leaving the screen, where the acceleration carries the eye away.

Easing is the difference between motion that feels cheap and motion that feels designed. This is the whole GSAP easing vocabulary — every curve, the name you already know it by, and a live runner so you can feel each one before you ship it.

linear

power4.out

elastic.out

Three runners, one finish line. The only thing that changes is the easing.

First principles

What is an easing function?

An easing function is a tiny curve that answers one question: how far along should the animation be at each moment in time? Feed it the progress of the clock (0 at the start, 1 at the end) and it hands back the progress of the motion. If the curve is a straight diagonal, time and motion march in lockstep — that’s linear, and it feels robotic.

Bend that curve and the magic appears. Make it start shallow and steepen toward the end and the element accelerates away. Make it shoot up fast then flatten and the element arrives with energy and settles softly. Nothing about the start or end point changes — only the shape of the journey between them. That shape is the entire personality of a motion, and it’s what every name on this page describes.

Time runs left→right, progress runs bottom→top. This curve climbs fast then eases off — an out ease that lands gently.

Meet GSAP

Why GSAP’s eases are named the way they are

GSAP — the GreenSock Animation Platform — was built by Jack Doyle, a designer-turned-developer who started animating Flash banner ads back in 2008 under brutal file-size limits. That design background is why GSAP’s API feels so intuitive: it was made by someone who thinks in motion first and code second.

Here’s the part worth knowing. GSAP’s eases are the standard Robert Penner equations — Sine, Quad, Cubic, Quart, Quint, Expo, Back, Circ, Elastic, Bounce — the exact set the animation world has leaned on since Penner’s 2002 Flash book. Jack didn’t invent new curves; he called those equations “like magic.” What he did add was a clearer way to name them.

The traditional names tell you the math (Quartic is t⁴) but not the feeling. So GSAP layered on a strength ladder: power0 through power4, where the number is simply how strong the ease is.

power0 — Linear — no easing at all
power1 — Quad (t²) — the gentle default
power2 — Cubic (t³) — the polished workhorse
power3 — Quart (t⁴) — noticeably forceful
power4 — Quint / Strong (t⁵) — maximum drama

Dialing from power1 to power4 to make a move more assertive is far easier than remembering whether Quartic outranks Cubic. The old names still work as aliases — and if you’ve set easing in Webflow, you already know these curves. This page just gives you the GSAP vocabulary for the motion you’ve been designing all along.

And the timing has never been better: Webflow acquired GreenSock in October 2024, and with GSAP v3.13 (April 2025) the entire library went free — every former paid plugin included, free even for commercial use.

The fastest way to understand an ease is to put it next to another one. Pick any two and race them on a shared timeline:

Compare

Race any two eases

Pick two easing functions and hit Play — watch them race side-by-side on one shared timeline.

Ease A

Ease B

duration 1.5s

// Select two eases and hit Play

The playground

24 eases, hands-on — grouped by family. Hit Play to send a runner across, drag the sliders on Back and Elastic to feel how the parameters reshape the curve, and grab the code straight off the card.

The power eases — your everyday workhorses

polynomial also: power0

`none / power0`

Linear (t¹)

Webflow Linear (None)

GSAP none / power0

CSS linear = cubic-bezier(0, 0, 1, 1)

gsap.to('.box', { x: 300, ease: 'none', duration: 1 })

Constant speed, zero personality — perfect for loaders and mechanical motion.

Learn more

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

polynomial also: quad

`power1`

Quadratic (t²)

Webflow Ease In Quad / Ease Out Quad / Ease In Out Quad

GSAP power1

CSS no exact keyword; ease-in/ease-out are close cousins

gsap.to('.box', { x: 300, ease: 'power1.in', duration: 1 })

GSAP's default ease — gentle t² curve that feels natural for almost any UI element.

Learn more

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: x²

polynomial also: cubic

`power2`

Cubic (t³)

Webflow Ease In Cubic / Ease Out Cubic / Ease In Out Cubic

GSAP power2

CSS no exact keyword; ease/ease-in/ease-out are bezier approximations

gsap.to('.box', { x: 300, ease: 'power2.in', duration: 1 })

The polished workhorse — t³ feels intentional and confident for modals and cards.

Learn more

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: x³

polynomial also: quart

`power3`

Quartic (t⁴)

Webflow Ease In Quart / Ease Out Quart / Ease In Out Quart

GSAP power3

CSS needs cubic-bezier() or linear()

gsap.to('.box', { x: 300, ease: 'power3.in', duration: 1 })

Sharp t⁴ acceleration — use when you want elements to snap into place with conviction.

Learn more

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: x⁴

polynomial also: quint, strong

`power4`

Quintic (t⁵)

Webflow Ease In Quint / Ease Out Quint / Ease In Out Quint

GSAP power4

CSS needs cubic-bezier() or linear()

gsap.to('.box', { x: 300, ease: 'power4.in', duration: 1 })

Maximum built-in polynomial drama — t⁵ hangs then rockets, perfect for cinematic reveals.

Learn more

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: x⁵

polynomial also: SteppedEase

`steps(n)`

GSAP steps(n)

CSS steps(n, jump-*), step-start, step-end

steps 10

gsap.to('.box', { x: 300, ease: 'steps(10)', duration: 1 })

Discrete frame-jumps instead of smooth curves — essential for sprite sheets and typewriter effects.

Learn more

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

Sine, Expo, Circ — the smooth operators

harmonic

`sine`

Sinusoidal (sin/cos)

Webflow Ease In Sine / Ease Out Sine / Ease In Out Sine

GSAP sine

CSS cubic-bezier() approximation available

gsap.to('.box', { x: 300, ease: 'sine.in', duration: 1 })

The gentlest ease — sine-wave curvature that floats and breathes naturally.

Learn more

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 one of the first non-polynomial eases he added to 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)

harmonic

`expo`

Exponential (2^x)

Webflow Ease In Expo / Ease Out Expo / Ease In Out Expo

GSAP expo

CSS cubic-bezier() approximation available

gsap.to('.box', { x: 300, ease: 'expo.in', duration: 1 })

High-energy exponential snap — Out Expo fires fast and cuts clean for a modern UI feel.

Learn more

Origin: "Expo" is short for exponential. The formula is based on powers of 2 (2^(10x−10)), which creates a curve that starts at essentially zero and explodes outward — or conversely, slams to zero from full speed.

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: 2^(10x−10)

harmonic

`circ`

Circular (√(1−x²))

Webflow Ease In Circ / Ease Out Circ / Ease In Out Circ

GSAP circ

CSS cubic-bezier() approximation available

gsap.to('.box', { x: 300, ease: 'circ.in', duration: 1 })

Circular arc deceleration — rounded and satisfying, great for sliding panels.

Learn more

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²)

Back, Elastic, Bounce — eases with personality

dynamic

`back`

Back (overshoot)

Webflow Ease In Back / Ease Out Back / Bounce Past

GSAP back

CSS not natively possible with cubic-bezier(); needs linear()

overshoot 1.70158

gsap.to('.box', { x: 300, ease: 'back.in(1.70158)', duration: 1 })

Overshoots and springs back — configurable anticipation that gives UI elements a physical weight.

Learn more

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: c3·x³ − c1·x²

dynamic

`elastic`

Elastic (oscillating)

Webflow Ease In Elastic / Ease Out Elastic / Ease In Out Elastic

GSAP elastic

CSS impossible with cubic-bezier(); needs linear()

amplitude 1 period 0.3

gsap.to('.box', { x: 300, ease: 'elastic.in(1, 0.3)', duration: 1 })

Rubber-band oscillations — configurable wobble that makes notifications and badges feel alive.

Learn more

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

dynamic

`bounce`

Bounce (multi-segment)

Webflow Bounce / Out Bounce

GSAP bounce

CSS impossible with cubic-bezier(); needs linear()

gsap.to('.box', { x: 300, ease: 'bounce.in', duration: 1 })

Ball-drop physics — out Bounce lands with distinct bumps, perfect for playful onboarding UIs.

Learn more

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)

GSAP-only: the eases tradition never had

gsap exclusive

`RoughEase`

GSAP RoughEase

CSS not natively possible

Free · bundled with GSAP 3.13+

gsap.registerPlugin(RoughEase);
gsap.to('.box', {
  x: 300, duration: 1,
  ease: 'rough({ strength: 1.5, points: 20, taper: none, randomize: false })',
});

Intentionally chaotic — randomized jitter for glitchy, hand-drawn, or trembling motion.

Learn more

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

gsap exclusive

`SlowMo`

GSAP SlowMo

CSS not natively possible

Free · bundled with GSAP 3.13+

gsap.registerPlugin(SlowMo);
gsap.to('.box', { x: 300, ease: 'slow(0.6, 0.8)', duration: 1 });

Cinematic ramp-and-hold — eases in, lingers at slow speed, then eases out for dramatic reveals.

Learn more

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

gsap exclusive

`ExpoScaleEase`

GSAP ExpoScaleEase

CSS not natively possible

Free · bundled with GSAP 3.13+ best shown on scale (0.5 → 3)

gsap.registerPlugin(ExpoScaleEase);
// best shown on scale: 0.5 → 3
gsap.fromTo('.box', { scale: 0.5 }, {
  scale: 3, duration: 1,
  ease: 'expoScale(0.5, 3, power2.inOut)',
});

Perceptual scale correction — makes dramatic zoom-ins and zoom-outs look visually even.

Learn more

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

gsap exclusive

`CustomEase`

GSAP CustomEase

CSS can export as cubic-bezier() for simple curves; complex paths need linear()

Free · bundled with GSAP 3.13+

gsap.registerPlugin(CustomEase);
CustomEase.create('myEase', 'M0,0 C0.25,0.1 0.3,1.4 1,1');
gsap.to('.box', { x: 300, ease: 'myEase', duration: 1 });

Unlimited curve freedom — draw any timing curve as an SVG path, paste it in.

Learn more

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

gsap exclusive

`CustomBounce`

GSAP CustomBounce

CSS not natively possible

Free · bundled with GSAP 3.13+

gsap.registerPlugin(CustomBounce);
CustomBounce.create('myBounce', { strength: 0.6 });
gsap.to('.box', { x: 300, ease: 'myBounce', duration: 1 });

Cartoon-physics bounce on demand — configure exactly how many times it bounces and how it squashes.

Learn more

Origin: CustomBounce was built by the GSAP team to give designers exact control over bounce behaviour — 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

gsap exclusive

`CustomWiggle`

GSAP CustomWiggle

CSS not natively possible

Free · bundled with GSAP 3.13+

gsap.registerPlugin(CustomWiggle);
CustomWiggle.create('myWiggle', { wiggles: 6, type: 'easeOut' });
gsap.to('.box', { x: 300, ease: 'myWiggle', duration: 1 });

Attention-grabbing shake or wobble — configurable oscillation for bells, badges, and form feedback.

Learn more

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

The CSS & Webflow native side

css only also: ease

`power2 (approx.)`

Webflow Ease

GSAP power2 (approx.)

CSS ease = cubic-bezier(0.25, 0.1, 0.25, 1)

CSS-native — no GSAP needed (shown for comparison)

/* CSS-native — no GSAP needed (shown for comparison) */
transition-timing-function: ease = cubic-bezier(0.25, 0.1, 0.25, 1);

The browser default — CSS `ease` is a quick-start cubic bezier that Webflow designers see as "Ease."

Learn more

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 quickly, slows toward the end — a rough cubic bezier cousin of ease-out. 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)

css only also: ease-in

`power1.in (approx.)`

Webflow Ease In

GSAP power1.in (approx.)

CSS ease-in = cubic-bezier(0.42, 0, 1, 1)

CSS-native — no GSAP needed (shown for comparison)

/* CSS-native — no GSAP needed (shown for comparison) */
transition-timing-function: ease-in = cubic-bezier(0.42, 0, 1, 1);

The exit ease — slow start, fast finish; use for elements leaving the screen.

Learn more

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)

css only also: ease-out

`power1.out (approx.)`

Webflow Ease Out

GSAP power1.out (approx.)

CSS ease-out = cubic-bezier(0, 0, 0.58, 1)

CSS-native — no GSAP needed (shown for comparison)

/* CSS-native — no GSAP needed (shown for comparison) */
transition-timing-function: ease-out = cubic-bezier(0, 0, 0.58, 1);

The entry ease — fast start, gentle landing; feels human and responsive for appearing elements.

Learn more

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)

css only also: ease-in-out

`power1.inOut (approx.)`

Webflow Ease In Out

GSAP power1.inOut (approx.)

CSS ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

CSS-native — no GSAP needed (shown for comparison)

/* CSS-native — no GSAP needed (shown for comparison) */
transition-timing-function: ease-in-out = cubic-bezier(0.42, 0, 0.58, 1);

Symmetric S-curve — slow-fast-slow; the default pick for looping or reversible transitions.

Learn more

Origin: The symmetric CSS keyword — slow start and slow finish with a fast middle. The bezier (0.42, 0, 0.58, 1) mirrors ease-in and ease-out around the centre, creating a balanced S-curve. 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)

css only also: step-start, step-end

`steps(n) / SteppedEase`

GSAP steps(n) / SteppedEase

CSS steps(n, jump-start | jump-end | jump-both | jump-none)

CSS-native — no GSAP needed (shown for comparison)

/* CSS-native — no GSAP needed (shown for comparison) */
transition-timing-function: steps(n, jump-start | jump-end | jump-both | jump-none);

CSS sprite-sheet ready — discrete frame-jumps with configurable jump position.

Learn more

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)

css only also: linear()

`CustomEase (export tool)`

Webflow — (no IX2 equivalent; available via Webflow GSAP Interactions custom ease)

GSAP CustomEase (export tool)

CSS linear(0, 0.25 75%, 1) — multi-point native CSS

CSS-native — no GSAP needed (shown for comparison)

/* CSS-native — no GSAP needed (shown for comparison) */
transition-timing-function: linear(0, 0.25 75%, 1) — multi-point native CSS;

The native CSS Bounce/Elastic solution — multi-point linear() finally lets CSS approximate any GSAP curve.

Learn more

Origin: The CSS `linear()` easing function landed in Chromium 113 / Firefox 112 (2023) and Safari 17 (2023). It was specifically designed by Jake Archibald and the CSS working group to let 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%, …)

The honest part

Where the columns break

For most of the catalogue, the four worlds line up neatly. Linear, Quad, Cubic, Quart, Quint, Sine, Expo, and Circ all map cleanly across GSAP, Penner, and Webflow — and even CSS can approximate them with a cubic-bezier(). If that were the whole story, you wouldn’t need GSAP.

The story is the asymmetry. Back, Elastic, Bounce, RoughEase, CustomWiggle, and Steps are where the columns stop lining up. A cubic bezier mathematically cannot overshoot or oscillate, so classic CSS simply can’t do a real bounce or an elastic snap — and neither can Webflow’s classic interactions for the configurable, plugin-based eases. (Modern CSS linear() finally cracks this open by approximating any curve as many tiny segments, but it’s an approximation you have to generate, not a keyword you reach for.)

One honest caveat about Webflow, because it matters in practice: Webflow’s classic IX2 interactions and the new GSAP-powered IX3 interactions can coexist on a site, but they do not mix within a single interaction. Classic Interactions give you the fixed Penner dropdown; the newer “Interactions with GSAP” bundle custom easing, bounce, wiggle, and an ease visualizer. You can use both across a project, but any one interaction is built in one system or the other — you can’t drive an IX2 timeline with a GSAP custom ease.

The full map

Every ease, every name, side by side

One row per ease — the name you already know it by, the GSAP string to type, the traditional Penner term, and what CSS can (or can’t) do natively.

Equivalence map of 24 easing functions across Webflow, GSAP, Penner, and CSS.
Familiar / Webflow name	GSAP	Penner	CSS
Linear (None)	`none / power0`	Linear (t¹)	linear = cubic-bezier(0, 0, 1, 1)
Ease In Quad	`power1`	Quadratic (t²)	no exact keyword; ease-in/ease-out are close cousins
Ease In Cubic	`power2`	Cubic (t³)	no exact keyword; ease/ease-in/ease-out are bezier approximations
Ease In Quart	`power3`	Quartic (t⁴)	needs cubic-bezier() or linear()
Ease In Quint	`power4`	Quintic (t⁵)	needs cubic-bezier() or linear()
Ease In Sine	`sine`	Sinusoidal (sin/cos)	cubic-bezier() approximation available
Ease In Expo	`expo`	Exponential (2^x)	cubic-bezier() approximation available
Ease In Circ	`circ`	Circular (√(1−x²))	cubic-bezier() approximation available
Ease In Back	`back`	Back (overshoot)	not natively possible with cubic-bezier(); needs linear()
Ease In Elastic	`elastic`	Elastic (oscillating)	impossible with cubic-bezier(); needs linear()
Bounce	`bounce`	Bounce (multi-segment)	impossible with cubic-bezier(); needs linear()
SteppedEase	`steps(n)`	—	steps(n, jump-*), step-start, step-end
RoughEase	`RoughEase`	—	not natively possible
SlowMo	`SlowMo`	—	not natively possible
ExpoScaleEase	`ExpoScaleEase`	—	not natively possible
CustomEase	`CustomEase`	—	can export as cubic-bezier() for simple curves; complex paths need linear()
CustomBounce	`CustomBounce`	—	not natively possible
CustomWiggle	`CustomWiggle`	—	not natively possible
Ease	`power2 (approx.)`	—	ease = cubic-bezier(0.25, 0.1, 0.25, 1)
Ease In	`power1.in (approx.)`	—	ease-in = cubic-bezier(0.42, 0, 1, 1)
Ease Out	`power1.out (approx.)`	—	ease-out = cubic-bezier(0, 0, 0.58, 1)
Ease In Out	`power1.inOut (approx.)`	—	ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)
step-start	`steps(n) / SteppedEase`	—	steps(n, jump-start \| jump-end \| jump-both \| jump-none)
linear()	`CustomEase (export tool)`	—	linear(0, 0.25 75%, 1) — multi-point native CSS

FAQ

Easing questions, answered

The questions designers and developers actually ask when crossing between Webflow, GSAP, and plain CSS.

What's the GSAP equivalent of Webflow's Ease Out Quint?

It's power4.out. GSAP renamed the Penner polynomials onto a 0–4 strength ladder, so Quint (the fifth-power t⁵ curve, the strongest of the classic polynomials) became Power4. Quint, Strong, and power4 are all the same curve — the same dramatic hang-then-rocket motion you get from Webflow's Ease Out Quint.

Is GSAP free now?

Yes — GSAP is 100% free, including every former Club GreenSock plugin (SplitText, MorphSVG, DrawSVG, CustomEase, and the rest), free even for commercial use. Webflow acquired GreenSock in October 2024 and made the whole library free with the v3.13 release announced on 30 April 2025. GSAP still ships under its own standard license rather than MIT, but there is no paywall.

Why does GSAP call it power4 instead of Quint?

Because a number tells you how strong the ease is at a glance, and "Quint" doesn't. GSAP's creator Jack Doyle — a designer-turned-developer — kept Robert Penner's industry-standard equations but layered a clearer naming scheme on top: Power0 (Linear) through Power4 (Quint), where the number is the strength of the curve. Dialing from power1 to power4 to make an animation more assertive is far more intuitive than remembering whether Quartic is stronger than Cubic. The classic names still work as aliases.

Did the creator of GSAP make up the ease names randomly?

No — quite the opposite. GSAP's eases are the standard Robert Penner easing equations (Sine, Quad, Cubic, Quart, Quint, Expo, Back, Circ, Elastic, Bounce), the same set the whole animation industry has used since Penner's 2002 Flash book. Jack Doyle has called those equations "like magic." The only thing GSAP added was the Power0–Power4 clarity layer — a deliberate teaching decision, not arbitrary invention.

Can CSS do an elastic or bounce ease?

Not with cubic-bezier() — a cubic bezier mathematically cannot overshoot or oscillate, so true Elastic, Bounce, and Back are impossible with it. The modern CSS linear() function (Chrome/Firefox 2023, Safari 17) changes that: it stitches together many points to approximate any curve, including bouncy and elastic ones. Generators like Jake Archibald's linear-easing tool can convert a GSAP ease into the equivalent linear() string for pure-CSS use.

What's the difference between GSAP's Back ease and Elastic ease?

Back overshoots once and settles — it sails just past its target, then eases back into place, like a drawer that bumps shut. Elastic oscillates: it wobbles back and forth several times before coming to rest, like a released rubber band. Both are configurable in GSAP (Back's overshoot, Elastic's amplitude and period), which is why the playground above lets you drag those sliders.

Do Webflow IX2 and GSAP interactions mix?

They can coexist on the same site, but they do NOT mix within a single interaction. Webflow now has two animation systems: classic Interactions (IX2), with a fixed Penner-derived easing dropdown, and the newer Interactions with GSAP, which bundles GSAP for custom easing, bounce, wiggle, and an ease visualizer. You can use both across different elements of a project, but a given interaction is built in one system or the other — you cannot drive an IX2 timeline with a GSAP custom ease.

Which GSAP ease should I use for a UI element entering the screen?

Reach for an "out" ease — most often power2.out or power3.out. An out ease starts fast and decelerates to a gentle stop, so an element that's appearing feels like it arrived with energy and settled naturally. Save "in" eases (slow start, fast finish) for elements leaving the screen, where the acceleration carries the eye away.

Milk Moon Studio

We build motion that feels designed

Milk Moon Studio is a design and development studio that sweats this exact level of detail — the curve, the timing, the feeling — on Webflow and beyond. If your site’s motion deserves the same care, let’s talk.

Visit Milk Moon Studio Read the Webflow easing guide →

Prefer the Webflow side of the story? Our companion piece, Visual guide to Webflow interaction easing functions, walks the same curves through Webflow’s classic IX2 dropdown.