The ultimate animation library for javascript - animate everything!
The ultimate javascript animation library. Animate everything - from HTML elements to objects like circles, sprites, or skeletons.
It's as easy as anim8( button ).play('tada ~0.5s 1.5s x4 z100ms ease-inout')
- which plays the tada
animation
in 1.5 seconds after waiting 0.5 seconds 4 times with a 100 ms break in between using the easing function ease-inout
.
Attributes can be animated along a path, by using spring forces, or physical forces. Attributes can be animated together or separately. The values that define the paths, spring, and physical forces can be a constant value (ex: 0, {x:2, y:5}), a function which is evaluated during animation, a function which is evaluated at the beginning of an animation, the current value, or a value relative to the current value.
bower install anim8js
npm install anim8js
<script src="https://cdn.jsdelivr.net/npm/anim8js@1/build/anim8js.min.js"></script>
What are valid animation durations, delays, & sleeps?
A number of milliseconds or a string with a number followed by any of the following units: ms, s, c, cs, third, jiffy, sec, m, min, h, hr
What are valid animation repeats?
A number or any of the following strings: inf, infinity, infinite, once, twice, thrice, dozen, random
What are valid easings?
anim8.Easings
.easing-easingType
where easing is an existing easing in anim8.Easings
and easingType is an existing type in anim8.EasingsTypes
like in, out, inout, or pong. An example is 'sqrt-inout'.How do I override any default values?
You can find the following defaults in anim8.Defaults
:
duration, easing, teasing, delay, sleep, repeat, scale, transitionTime, transitionDelta, transitionIntoDelta,
transitionEasing, cache
How do I add my own ______
Easing
: anim8.Easings.myCustomEasing = function(x) { ... };Path
: anim8.Paths.myCustomPath = function(pathDefinition) { ... return instance of anim8.Path ... };Spring
: anim8.Springs.myCustomSpring = function(springDefinition) { ... return instance of anim8.Spring ... };Builder
: anim8.Builders.myCustomParser = instance of anim8.Parser;Animation
: anim8.save( 'myAnimationName', animation definition );Calculator
: anim8.Calculators.myCustomCalculator = instance of anim8.Calculator;