Artifact is a js library that makes simple UI animations easy.

With Artifact, instead of writing javascript that exactly specifies
your animation, one only has to describe the type of change that is being
made. Artifact uses DOM layout and computed styles to determine the
values being animated. For example, here is a fade-out effect :

animator.classTransition( domNode, 'transparent', true, [ 'opacity' ], 250 ) ; 

This tells Artifact to add the class 'transparent' to the node domNode,
and then interpolate its opacity from the current value to the value specified by the class. The duration of the animation will be
250ms. Importantly, we did not have to say what the current opacity is
or what the new opacity will be; the start and end values are
determined by inspecting the DOM.

In addition to the animation of styles, we can animate changes in the
position of elements due to changes in the document layout:

var animationGroup = animator.makeGroup( nodeList ) ;
animationGroup.animateLayout( 500, changeLayoutFunction ) ;

Here, animateLayout will call the function changeLayoutFunction and
animate any changes to the position of nodes in nodeList over a
duration of 500ms.

To see example uses of Artifact see the demo page at:

To obtain the code you can check it out with mercurial:

hg clone


Animator ( )

All functionality in Artifact is accessed through the Animator object:

var animator = Artifact.Animator ( ) ;

There are no arguments to the constructor for Animator and it can be
called with or without the new operator. It is recommended that you
instantiate only one Animator object and use it throughout your
program. Doing this will allow Artifact to operate more efficiently,
avoid conflicting animations.

Job objects

Many methods in Artifact return Job objects. The Job objects can
be used to cancel or stop a job.

cancel ( )

Cancel will stop a job without calling any callbacks.

stop ( )

Stop stops a job and immediately calls any associated callbacks.

classTransition ( node, class_name, class_state, animate_style_list, deration, options )

The classTransition method is used to add or remove a class from a DOM
element. Styles listed in animate_style_list will be animated from
their initial to final value by interpolation. The return is a Job
object for the animation.


  • node : An element from the dom to manipulate.
  • class_name : The name of the class to add or remove.
  • class_state : Boolean value to select addition (true), or removal (false), of class.
  • animate_style_list : A list of styles to animate.
  • duration : Duration in ms for the animation.
  • options : An object used as a dictionary to set optional value.


  • delay : A number of ms to delay before starting the animation.
  • callback : A function to call when the animation is complete.
  • callbackData : Data to pass to the callback when it is called.
  • ease : An easing function to use when running the animation. ( Default is ease-in-out )

makeGroup ( initial_nodes )

The makeGroup method constructs and returns a new AnimationGroup with the initial nodes set to initial_nodes.

AnimationGroup ( )

A AnimationGroup object represents a set of DOM elements which can be operated on as a group.

addNode ( )

Add a DOM element to the animation group.

removeNode ( )

Remove a DOM element from the animation group.

stop ( )

Stop any active animations on the animation group and call their callbacks.

cancel ( )

Stop any current animations on the animation group without calling their callbacks.

animateLayout ( duration, change_function, change_data, options )

Calls change_function and animates the movement of any elements in
the animation group. The movement is based on element positions before
and after the change_function is called. The change_function can
return one or more DOM elements which will be added to the animation
group. After the animation is complete, any elements that are members
of the animation group but no longer in the document will be removed
from the animation group.

  • duration : Duration in ms for the animation.
  • change_function : A function that will manipulate the DOM.
  • change_data : Data to pass to the change function.
  • options : An object used as a dictionary to set optional value.
  • delay : A number of ms to delay before starting the animation.
  • callback : Callback function to be called when animation is finished.
  • callbackData : Data to pass to the callback.
  • animatingClass : A class that will be added to any elements that are being animated.