bezier-easing – cubic-bezier implementation for your JavaScript animation easings

bezier-easing

bezier-easing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, …any other custom curve) exactly like in CSS Transitions.

Pass in the 4 points of the bezier curve of your liking – just like you’d use when defining a CSS Transition Timing Function using cubic-bezier() – and then project x, ranging from 0 to 1 (0% – 100%), in it.

var easing = BezierEasing(0, 0, 1, 0.5);
console.log(easing(0.0)); // 0.0
console.log(easing(0.5)); // 0.3125
console.log(easing(1.0)); // 1.0

Installation possible via npm:

npm install bezier-easing

bezier-easing
bezier-easing Examples →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.