bezier-easing
Advanced tools
BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions exactly like in CSS Transitions.
The bezier-easing npm package provides a way to create cubic Bezier easing functions, which are commonly used in animations to create smooth transitions. This package allows you to define custom easing curves and use them to interpolate values over time.
Create a Bezier Easing Function
This feature allows you to create a cubic Bezier easing function by specifying four control points. The resulting function can be used to interpolate values smoothly.
const BezierEasing = require('bezier-easing');
const ease = BezierEasing(0.25, 0.1, 0.25, 1.0);Use the Easing Function
Once you have created a Bezier easing function, you can use it to interpolate values. The function takes a progress value between 0 and 1 and returns the interpolated value.
const BezierEasing = require('bezier-easing');
const ease = BezierEasing(0.25, 0.1, 0.25, 1.0);
const value = ease(0.5); // Interpolates the value at 50% progressPredefined Easing Functions
The package also provides some predefined easing functions like easeInOut, which can be used directly without specifying control points.
const BezierEasing = require('bezier-easing');
const easeInOut = BezierEasing.easeInOut;
const value = easeInOut(0.5); // Interpolates the value at 50% progress using a predefined ease-in-out curveThe d3-ease package provides a collection of easing functions for smooth animations. It includes a variety of predefined easing functions such as linear, cubic, and elastic. Compared to bezier-easing, d3-ease offers a broader range of predefined easing functions but does not allow for custom cubic Bezier curves.
The eases package offers a set of common easing functions for animations. It includes functions like easeInOutQuad, easeInOutCubic, and more. Similar to d3-ease, it provides predefined functions but lacks the ability to create custom cubic Bezier curves like bezier-easing.
Anime.js is a lightweight JavaScript animation library that includes a variety of easing functions. It supports custom easing functions and provides a more comprehensive animation framework compared to bezier-easing. However, it is a larger library with more dependencies.
BezierEasing 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.
Implementing efficient lookup is not easy because it implies projecting the X coordinate to a Bezier Curve. This micro library uses fast heuristics (involving dichotomic search, newton-raphson, sampling) to focus on performance and precision.
It is heavily based on implementations available in Firefox and Chrome (for the CSS transition-timing-function property).
var easing = BezierEasing(0, 0, 1, 0.5);
// easing allows to project x in [0.0,1.0] range onto the bezier-curve defined by the 4 points (see schema below).
console.log(easing(0.0)); // 0.0
console.log(easing(0.5)); // 0.3125
console.log(easing(1.0)); // 1.0
(this schema is from the CSS spec)
BezierEasing(P1.x, P1.y, P2.x, P2.y)
It is the equivalent to CSS Transitions' transition-timing-function.
In the same way you can define in CSS cubic-bezier(0.42, 0, 0.58, 1),
with BezierEasing, you can define it using BezierEasing(0.42, 0, 0.58, 1) which have the `` function taking an X and computing the Y interpolated easing value (see schema).
MIT License.
npm test
Implementation based on this article.
You need a node installed.
Install the deps:
npm install
The library is in index.js.
Ensure any modication will:
npm test)npm run benchmark – don't rely 100% on its precision but it still helps to notice big gaps)npm run visualFAQs
BezierEasing provides Cubic Bezier Curve easing which generalizes easing functions exactly like in CSS Transitions.
The npm package bezier-easing receives a total of 296,438 weekly downloads. As such, bezier-easing popularity was classified as popular.
We found that bezier-easing demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.