artifact-animator

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

Usage no npm install needed!

<script type="module">
  import artifactAnimator from 'https://cdn.skypack.dev/artifact-animator';
</script>

README

Artifact

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: http://0x0000.bitbucket.org/artifact/index.html

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

hg clone https://bitbucket.org/0x0000/artifact/

Usage

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.

Arguments

  • 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.

Options

  • 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.

Arguments
  • 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.
Options
  • 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.