Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@motionone/easing
Advanced tools
@motionone/easing is a JavaScript library that provides a collection of easing functions for animations. These functions help create smooth transitions and animations by defining the rate of change of a parameter over time.
Basic Easing Functions
This feature provides basic easing functions like easeIn, easeOut, and easeInOut. These functions can be used to create smooth animations by adjusting the rate of change of a parameter over time.
const { easeIn, easeOut, easeInOut } = require('@motionone/easing');
// Example usage
const startValue = 0;
const endValue = 100;
const duration = 1000; // in milliseconds
function animate(time) {
const progress = time / duration;
const easedProgress = easeIn(progress);
const currentValue = startValue + (endValue - startValue) * easedProgress;
console.log(currentValue);
if (time < duration) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
Custom Easing Functions
This feature allows you to create custom easing functions using cubic bezier curves. You can define your own easing curves to achieve unique animation effects.
const { cubicBezier } = require('@motionone/easing');
// Define a custom cubic bezier easing function
const customEase = cubicBezier(0.42, 0, 0.58, 1);
// Example usage
const startValue = 0;
const endValue = 100;
const duration = 1000; // in milliseconds
function animate(time) {
const progress = time / duration;
const easedProgress = customEase(progress);
const currentValue = startValue + (endValue - startValue) * easedProgress;
console.log(currentValue);
if (time < duration) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
Spring Easing Functions
This feature provides spring-based easing functions, which simulate the physics of a spring. These functions can create more natural and dynamic animations.
const { spring } = require('@motionone/easing');
// Define a spring easing function
const springEase = spring({ stiffness: 100, damping: 10 });
// Example usage
const startValue = 0;
const endValue = 100;
const duration = 1000; // in milliseconds
function animate(time) {
const progress = time / duration;
const easedProgress = springEase(progress);
const currentValue = startValue + (endValue - startValue) * easedProgress;
console.log(currentValue);
if (time < duration) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
d3-ease is a part of the D3.js library and provides a variety of easing functions for animations. It offers similar functionalities to @motionone/easing, including basic easing functions and custom easing curves. However, d3-ease is more commonly used in data visualization projects.
animejs is a lightweight JavaScript animation library that includes a wide range of easing functions. It provides similar functionalities to @motionone/easing but also includes additional features for creating complex animations, such as keyframes and timelines.
GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It includes a comprehensive set of easing functions and offers more advanced animation capabilities compared to @motionone/easing, such as timeline control and plugin support.
@motionone/easing
Easing functions for Motion One.
Full docs for Motion One available at motion.dev.
FAQs
A collection of easing functions.
The npm package @motionone/easing receives a total of 1,171,670 weekly downloads. As such, @motionone/easing popularity was classified as popular.
We found that @motionone/easing demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.