This utility allows to animate an element on a set of CSS properties. Users can define one or several queues of animations in order to build complex scenarios, register callbacks to some animation events and use different pre-defined or custom easing functions. Other features are also shown in this document.
The simple way to launch an animation is as follows
Animation Sample Usage
Several properties at a time can be animated, as shown below
It is possible to use different CSS units
Aria Template utility allows to queue animations in two ways.
queue configuration property can be set to true in order to use the global queue.
In the second case, it is possible to provide a queue id in order to add an animation to a specific queue (and perhaps to execute several simultaneous queue and implement complex scenarios).
User callbacks are fired when the four events handled occur:
- onStartAnimation: fired before an animation starts
- onEndAnimation: fired after an animation ends
- onStartQueue: fired before a queue starts
- onEndQueue: fired after a queue ends
Not only the HTMLElement style properties can be animated: also
scrollLeft and other custom properties.
This utility provides four different easing functions:
- linear: mantains the same speed from start to end
- ease-in-out: animation with slow start and slow end
- ease-out: animation with slow start
- ease-in: animation with slow end
Furthermore, you can also provide Aria Templates with your custom function that has to be:
y = f(x), where x represent the time and y is the progress of the animation.
By exploiting the described features, it is possible to build complex scenarios like the following.
The animable style properties are the following:
see them live in this dedicated sample