Morving Curve - Free Bézier Animation Curve Editor

Morving Curve is a free, browser-based animation easing editor that lets you design, preview, and export custom Bézier curves for use in CSS transitions, JavaScript animations, GSAP timelines, and more. No login, no install - open the tool and start shaping your easing functions in seconds.

What is an animation easing curve?

An easing curve (also called a timing function) controls how an animated value changes over time. Instead of a linear, mechanical motion, easing curves let you define acceleration, deceleration, overshoot, bounce, or spring effects - giving your UI the kind of fluid, natural feel found in high-quality products. The underlying math is a Bézier spline: you control the position of anchor points and tangent handles, and the curve engine solves for the output value at any given moment in the animation.

CSS cubic-bezier generator

For single-segment curves, Morving Curve outputs a ready-to-paste cubic-bezier(x1, y1, x2, y2) value you can drop directly into any CSS transition or animation-timing-function property. This is the same format used by standard browser DevTools easing editors, Chrome's cubic-bezier visualizer, and tools like Easings.net.

GSAP easing alternative and JS export

Working with GSAP, Anime.js, Framer Motion, or the Web Animations API? Morving Curve exports JavaScript-ready easing strings compatible with all major animation libraries. For complex multi-segment splines - curves that go beyond what a single cubic-bezier can express - it generates a look-up table (LUT) sampler function you can paste directly into your project. Think of it as a lightweight, open alternative to GSAP's CustomEase plugin.

Multi-point Bézier splines

Unlike most cubic-bezier editors that only support two control points, Morving Curve lets you add as many anchor points as you need. Switch to Add mode and click anywhere along the curve to insert a new point - the spline subdivides cleanly using de Casteljau's algorithm so continuity is preserved. This makes it possible to author complex spring-like or multi-phase easing curves that are impossible to express with a single cubic-bezier.

Export formats: CSS · JS / GSAP · LUT · JSON

Every curve you design can be exported in four formats: CSS (cubic-bezier for transitions and keyframes), JS/GSAP (easing string + Web Animations API snippet), LUT (a 32-sample float array with a sampler function for game engines, WebGL, or custom renderers), and JSON (full node data including anchor positions, tangent handles, and the LUT - useful for serialising curves between tools or storing them in a design system).

Built for animators and technical artists

Morving Curve was originally built as an internal tool at a game studio to help animators generate easing functions for real-time UI without needing to write code. The live animation preview - showing translate, scale, rotate, and opacity simultaneously - lets you feel the curve before you ship it. Saved curves are stored locally in your browser so your library is always available, session to session.