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: