Grapesjs Style Easing

A CSS timing function is four numbers describing a curve. Nobody reads cubic-bezier(0.68, -0.55, 0.27, 1.55) and pictures the motion it produces. This plugin adds the editor that makes it legible: a draggable curve inside the GrapesJS Style Manager.

What it adds

A cubic-bezier control for editing timing functions, so transitions and animations can be shaped visually — pulled into an ease-out, given an overshoot — with the resulting value written straight into the stylesheet.

Why it matters

Motion is one of the clearest signals of a polished interface, and it is also the part most often left at ease, because tuning it by hand means editing numbers and reloading. Putting the curve in front of the person styling the page turns that into direct manipulation.

Options

bezierEditorOpts passes configuration through to the underlying cubic-bezier editor.

Setup

The repository's index.html carries a complete working example, including how the property is registered into a Style Manager sector.

Good to know

Install as grapesjs-style-easing. One of the Blocomposer Style Manager plugins, alongside the gradient picker and the per-side border controls.