GSAP STYLE EASING LAB

Curves with
personality.

拖拽控制点生成 cubic-bezier，用黑绿高对比、巨大字体、动态曲线和更准确的 motion preview 来呈现；预览目标现在会自动贴合轨道宽度滑到最右端。

Curve Editor

cubic-bezier(0.16, 1, 0.3, 1)

Midpoint

0.972

Peak Speed

6.131

Overshoot

Motion Preview

用同一条曲线驱动位移、透明度和缩放，方便判断真实 UI 体感。

900ms

start280pxend

TARGET

curve

cubic-bezier(0.16, 1, 0.3, 1)

travel

auto-fit

mode

single

Preview travel

自动计算轨道宽度，目标滑到最右端。

Duration900

P1 X0.16

P1 Y1

P2 X0.3

P2 Y1

Export Stack

接近 expo.out 的利落感，用于按钮和面板入场。

CSS

.motion-target {
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

Tailwind

className="duration-[900ms] [transition-timing-function:cubic-bezier(0.16,_1,_0.3,_1)]"

WAAPI

element.animate(
  [
    { transform: 'translateX(0) scale(0.96)', opacity: 0.65 },
    { transform: 'translateX(280px) scale(1)', opacity: 1 },
  ],
  {
    duration: 900,
    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
    fill: 'both',
  },
)

GSAP CustomEase

// 可配合 GSAP CustomEase 使用：
// gsap.registerPlugin(CustomEase)
// CustomEase.create("bitleapEase", "M0,0 C0.16,1 0.3,1 1,1")

gsap.to('.motion-target', {
  x: 280,
  duration: 0.9,
  ease: 'bitleapEase',
})

Tokens

:root {
  --ease-bitleap: cubic-bezier(0.16, 1, 0.3, 1);
}

export const easings = {
  bitleap: 'cubic-bezier(0.16, 1, 0.3, 1)',
} as const

Drag the curve

SVG 控制点支持鼠标和触控拖拽，X 被限制在 0–1，Y 允许轻微越界来制作 back / pop 效果。

Preview modes

Single 看单个目标，Stagger 看序列节奏，Compare 用线性运动对照当前曲线。

Copy ready

同时输出 CSS、Tailwind、WAAPI、设计 Token 和 GSAP CustomEase 注释片段。

BitLeap · 本地计算 · 隐私优先