With anim8js you can take plain objects, HTML elements, PixiJS &EaselJS entities and animate them in every way possible.
Tweening,
keyframe animations,
springs,
physics,
movies,
path following,
relative animation,
queueing,
transitioning,
sequential animations, and
parametrized animations
have never been easier.
You can animate single values, 2d & 3d points, and colors out of the box.
anim8( element ).play('tada 1s ~5s x2 slingshot');
// play tada in 1 second twice delayed by 5 seconds using slingshot easing
Features
- Animate an attribute along a path, apply spring forces, or apply physical forces
- Animate attributes independently from each other
- An easy to understand format for specifying how an animation should play
- Smoothly transition from current animation to next animation
- Create movies (animation sequences involving any number of subjects) and play them at any speed, in reverse, or jump to a specific time
- Create parametrized animations for procedurally generating animations
- Sequentially animate a set of subjects
- Event based system for listening when animations start or finish
- Defer calling methods on an animator until an animation event has occurred
- Animate using the current state of an object, a relative state, constant values, randomly generated values, or dynamically created values
- Save animations to efficiently use them later
- Translate animations from one set attributes to another
- Animation Controls: play, unplay, queue, transition, pause, resume, stop, end, finish, nopeat
- Animator[s] Controls: (include above), tweenTo, tweenManyTo, tweenFrom, tweenManyFrom, tween, tweenMany, move, moveMany, follow, & spring
- Animation Types: keyframe, spring, physics, path [following], move [relatively], travel, tweenFrom, tweenTo, initial, final, deltas/values, queue, & and
- Path Types: Tween, Keyframe, Quadratic, Cubic, Delta, Jump, Compiled, Combo, Sub, Quadratic Corners, Linear, Uniform, Hermite, Bezier, Parametric, Basis Spline, & Catmull-Rom
- Springs: Linear & Distance
- Attribute Types: Number, 2d [xy], 3d [xyz], quaternion [xyz theta] RGB, & RGBA
- Current Subject Types: plain object, HTML element, jQuery object, EaselJS object, & PIXI display object
- Easing Types: in, out, inout, yoyo, mirror, reverse, flip
- Easings: linear, quad, ease, cubic, quartic, quintic, back, sine, overshot, elastic, revisit, lasso, slowbounce, bounce, smallbounce, tinybounce, hesitant, sqrt, sqrtf, slingshot, gentle, bezier
Extensions
- anim8js-dom - animate HTML elements
- anim8js-jquery - animate HTML elements with jQuery
- anim8js-animate.css - animate.css inspired animations for HTML elements
- anim8js-pixi - animate PixiJS display objects & shaders
- anim8js-easel - animate EaselJS objects
- anim8js-scrollmagic - animate ScrollMagic
Who's using anim8js?
The following projects are using anim8js: