Skip to content
Animate any quantitative value with a variety of easing types.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
animateAnything.js

README.md

AnimateAnythingJS

AnimateAnythingJS is a very lightweight animation library cabable of animating any quantitative value. Though it can be used for any commonly animationed values such as position or size, it's especially useful for animating values that other animation libraries can't easily handle like SVG points or rgb colors.


Easing Options

AnimateAnythingJS offers the following easing options as functions. (Visualizations of each animation style can be found here for reference.)

.linear()
.easeInQuad(), .easeOutQuad(), .easeInOutQuad()
.easeInCubic(), .easeOutCubic(), .easeInOutCubic()
.easeInQuart(), .easeOutQuart(), .easeInOutQuart()
.easeInQuint(), .easeOutQuint(), .easeInOutQuint()
.easeInSine(), .easeOutSine(), .easeInOutSine()
.easeInExpo(), .easeOutExpo(), .easeInOutExpo()
.easeInCirc(), .easeOutCirc(), .easeInOutCirc()
.easeInElastic(), .easeOutElastic(), .easeInOutElastic()
.easeInBack(), .easeOutBack(), .easeInOutBack()
.easeOutBounce()


Example

All AnimateAnythingJS functions require four arguments: 1) the beginning value, 2) the end value, 3) animation duration (as number of frames), and 4) frames elapsed (as an updated frame count). An optional fifth argument can be used to delay the animation's start by a specified number of frames.

AJS.<functionName>( <beginningValue>, <endValue>, <durationInFrames>, <framesElapsed>, <[delayInFrames]> );

Let's use a simple SVG line as an example. Say you want to animate just one point of the line so that it bounces down to a floor, but you want the other point to remain where it is. Do this by applying the AJS.EaseOutBounce() function to a stored y-value on a loop set to iterate however many frames you want the animation to have. On each loop, update the target point's y value using .setAttribute() and concatenating the svg path string.

var svgShape = document.getElementById("svg-shape");
var animationYValue = 0;
var animationDurationInFrames = 60;
var animationCurrentFrame = 0;

function runAnimation() {
  animationCurrentFrame++;
  if ( animationCurrentFrame <= animationDurationInFrames ) {
    window.requestAnimationFrame( ()=> { 
      animationYValue = AJS.easeOutBounce( 0, 100, animationDurationInFrames, animationCurrentFrame );
      svgShape.setAttribute("points", "0 0 10 " + animationYValue );
      runAnimation();
    });
  } 
}

runAnimation();
You can’t perform that action at this time.