microinteraction lab / v.01
feel the difference between two eases .
One toggle, one button, one card. Each animates on interaction. Column A and column B share every setting except the easing curve - drag the bezier, move the sliders, and watch the same motion play out two ways at once.
ease-outcurve 01
button press and hold
press me
ease-in-outcurve 02
button press and hold
press me
controls
replay all
easing curve cubic-bezier(.2,.8,.2,1)
linear
ease-out
ease-in-out
overshoot
sharp
the CSS
updates live with your controls
copy
How to use this. Drag the two blue control points on the curve to shape the easing. Move the sliders to change duration, delay, and how far each element travels. The two columns share every setting except the easing curve - column A uses your custom bezier, column B uses a fixed ease-in-out for contrast.
About the curves. The horizontal axis is time, the vertical is progress. A line hugging the bottom-right corner eases in slowly; a line jumping to the top-left eases out fast. Control points pulled outside the 0-1 range create overshoot - try the overshoot preset and pull the button.
State lives in this page session only. Nothing is sent anywhere.