šŸ‘Smooth Criminal

Howdy!

Drag handles. Click the curve to add a point. Double-click to remove.

@_alexand_re
01.5sFlip the curve
Presets
Saved
vector path

An SVG path string that traces the easing curve from (0,0) to (1,1). Used by animation tools that accept path-based custom easings.

M0,0 C0.04,0.9 0.1,1 1,1
// GSAP CustomEase
const ease = CustomEase.create("ease", "M0,0 Cā€¦")

gsap.to(".el", {
  ease,
  duration: 1,
})
css linear()

A CSS timing function that approximates the curve as a series of linear stops. Natively supported in all modern browsers ā€” no JavaScript required.

linear(0, 0.6088, 0.768, 0.8474, 0.8953, 0.9268, 0.9486, 0.9641, 0.9752, 0.9833, 0.9891, 0.9932, 0.9961, 0.998, 0.9992, 0.9998, 1)
.element {
  transition: transform 1s linear(0, 0.6088, ā€¦, 0.9998, 1);
}
css cubic-bezier()

An exact CSS cubic-bezier() extracted from the curve's two control points. Works natively in all browsers and in any tool that accepts a timing function.

cubic-bezier(0.04, 0.9, 0.1, 1)
.element {
  transition: transform 1.5s cubic-bezier(ā€¦);
}

/* Tailwind */
<div class="ease-[cubic-bezier(ā€¦)] transition duration-[1500ms]"></div>