Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

AnimateAnythingJS

AnimateAnythingJS is a very lightweight animation library cabable of animating any quantifiable value. Though it can be used for commonly animationed values such as positions or sizes, 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();

About

Animate any quantifiable value with a variety of easing types.

Resources

Stars

Watchers

Forks

Packages

No packages published