Create Smooth, Customizable, and Complex Animations With Animate.js

Preview:

Description:

Animate.js is a tiny yet robust JavaScript library that helps you create smooth, customized, and complex animations using CSS properties and a little bit of JavaScript.

It works by calculating intermediate values between the start and end points of an animation. It uses requestAnimationFrame for smooth performance and applies easing functions to create natural-looking motion.

The library defines a set of base easing functions for common animation curves. It then generates variations (easeIn, easeOut, easeInOut) for each base function. This approach provides a wide range of animation styles while keeping the codebase compact.

During animation, Animate.js calculates the current position based on elapsed time and the chosen easing function. It then updates the specified CSS property on each frame, creating fluid motion.

The library also handles edge cases, such as determining start values from computed styles and managing animations where the end value is less than the start value.

How to use it:

1. Download the Animate.js file and import it into your project:

import {animate} from "./animate.js";

2. Create your own animations using the animate function. The example below shows how to fade out a header element by animating its opacity from 1 to 0.

await animate({
  element: document.getElementById('header'),
  style_property: 'opacity',
  start_value: 1, 
  end_value: 0
});

3. All possible options to customize your animation.

• element: The HTML element to animate
• style_property: The CSS property to animate
• start_value: The initial value (optional)
• end_value: The final value
• unit: The CSS unit or a function to process the value
• duration: Animation duration in milliseconds
• algo: Easing function (linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInSine, easeOutSine, easeInOutSine, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce)

animate({
  element: document.getElementById('box'),
  style_property: 'width',
  start_value: 100,
  end_value: 300,
  unit: 'px',
  duration: 1000,
  algo: 'easeInOutCubic'
});