Easing

CustomEase

CustomEase is a GSAP plugin that lets you author any easing curve you want, defined either by an SVG path string or by control points. Use it when GSAP's built-in eases (`power`, `expo`, `back`, `sine`, etc.) can't express the curve your design needs - a long flat tail, an asymmetric in-out, a specific cubic-bezier from a design tool. As of GSAP 3.13 (mid-2024) it ships free for commercial use.

Updated June 2, 2026

Mechanics

How CustomEase works

CustomEase converts an SVG path (or a control-point string) into an ease curve. The X axis is normalized time (0 to 1); the Y axis is normalized progress (0 to 1). The path's shape IS the ease curve. Once registered, the ease is named and reusable across the project.

script.js

The SVG path is a normal cubic-bezier description. You can paste a cubic-bezier from a design tool like Figma or cubic-bezier.com directly: M0,0 C{x1},{y1} {x2},{y2} 1,1.

When

Use CustomEase for

  • Brand-specific motion curves a designer hands you as cubic-bezier values
  • Asymmetric in-out curves that the standard power family can't match
  • Long-flat-tail curves where the element should ease out far past the standard curve
  • Animations where the same custom curve is reused across many components (define once, name it, reference everywhere)
Alternatives

Use something else when

  • GSAP's built-in eases cover what you need - expo.out, power4.out, back.out, sine.inOut handle 90% of UI
  • You need a one-off curve for a single tween - the registration ceremony isn't worth it
  • True spring physics with damping and stiffness - use a spring library or roll a custom solver, not CustomEase
  • You only need to tune an existing ease's strength - back.out(2), power4.out etc. accept arguments
In production

Used in these Annnimate components

  • Annnimate's marketing landing uses a CustomEase for the section-to-section scroll feel - none of the standard eases matched the brand's preferred deceleration shape
  • The Multi Flip uses a CustomEase on the gallery scrub so the per-card hold feels tuned to the visual rhythm
  • The Magnetic Button uses a CustomEase on the elastic return so the strength matches the designer's sketch
  • The Popping Text uses CustomEase for the character entrance when the back.out default looks too cartoony
Used in components

See it running in production

Multi FlipA stack of cards that fans out from a messy pile into a neat grid as you scroll, each one starting overlapped at a random angle.Magnetic ButtonThe button and its text gently pull toward your cursor and drift with it, so it feels like it's reaching for you.Popping TextLetters pop into place one by one, scaling up from nothing with a little bounce and a random tilt.
FAQ

Common questions

Is CustomEase free for commercial use?
Yes - as of GSAP 3.13 (mid-2024) CustomEase is part of the public GSAP package and free for commercial use. Install via npm i gsap, import from gsap/CustomEase, register once.
Where do I get the SVG path string?
Paste from a design tool that exports cubic-bezier values (Figma, Sketch, after-effects). Or use https://cubic-bezier.com to design visually and copy the four control point values. Or open https://gsap.com/docs/v3/Eases/CustomEase and use the visual editor to design and export the path.
Can I use CustomEase per-tween without naming it?
Yes - ease: CustomEase.create('temp', 'M0,0 C0.2,0.8 0.4,1 1,1') creates and uses inline. But if the same curve appears in more than one tween, register it once at module load with a name, then reference by name everywhere. Less repetition, single source of truth.
How does CustomEase compare to CSS cubic-bezier?
Same shape, same control-point semantics. The difference is that CustomEase can describe curves with MORE than four control points (multi-segment paths) and integrates with GSAP's stagger, timeline, and ScrollTrigger. CSS cubic-bezier maxes out at four control points and only animates CSS properties.
Does CustomEase work with prefers-reduced-motion?
The curve plays as designed. To respect prefers-reduced-motion, wrap the tween in gsap.matchMedia with a (prefers-reduced-motion: reduce) branch that uses ease: 'none' and duration: 0.1 (or skips animation entirely). CustomEase doesn't auto-detect motion preference - that's the call-site's job.
PreviousCustomBounceCustomBounce 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.NextCustomWiggleCustomWiggle is a GSAP easing plugin that makes a value oscillate back and forth a set number of times before settling on its end value.
Related conceptsexpo.outpower4.outback.outease-in-out