@motionone/easing

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