Skip to main content

Harshal V. LADHE

Designing Custom Curves with cubic-bezier()

How the `cubic-bezier(x1, y1, x2, y2)` function works — control points, the time-vs-progress model, and hand-tuning your own easing curves.

Content tagged cubic-bezier

  • Post:An Interactive Guide to the CSS linear() Easing Function

    Chain custom stops into springs, bounces, and elastics.
    A deep, interactive guide to CSS's linear() easing function — comma-separated stops, percentage positions, and building spring and bounce curves cubic-bezier() can't express.
    Published at:
    Categories:Animations
    Estimated reading time:28 min read

  • Post:An Interactive Guide to CSS cubic-bezier()

    Drag two control points, design your own curve.
    An interactive guide to CSS cubic-bezier(): what the four numbers control, how to build overshoot and anticipation curves, hand-tuned recipes, and a draggable curve playground.
    Published at:
    Categories:Animations
    Estimated reading time:16 min read