@motionone/easing

What is @motionone/easing?

@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.

What are @motionone/easing's main functionalities?

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);

Other packages similar to @motionone/easing

d3-ease

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

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

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.

README

@motionone/easing

Easing functions for Motion One.

📚 Documentation

Full docs for Motion One available at motion.dev.