Smoothin-out

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

curvesnap.out
anchors03
01.5s
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.01,0.627 0.075,0.796 0.131,0.864 C0.224,0.977 0.374,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.7068, 0.8563, 0.9155, 0.9465, 0.9644, 0.9758, 0.9834, 0.9887, 0.9924, 0.9951, 0.9969, 0.9982, 0.9991, 0.9996, 0.9999, 1)
.element {
  transition: transform 1s linear(0, …, 1);
}
Saved
No saved curves yet
Presets