Animations in A-Frame using anime.js
A-Frame has an
<a-animation> API out of the box. Why build a component version?
<a-animation>, we must do
<a-animation>, we must wait for it to append to the DOM and register a callback listener.
<a-animation>tag is the only outlier in which we must use a DOM element to modify an entity.
<a-animation>'s API is loosely based off of Web Animations draft specification which is overly complex.
<a-animation>uses the Custom Element polyfill directly with tween.js. anime.js's features makes the animation codebase much slimmer (140 vs 550 lines of code).
Base name is
animation. Although we can attach multiple animations to one
entity by name-spacing the component with double underscores (
|delay||How long (milliseconds) to wait before starting.||0|
|dir||Which dir to go from
|dur||How long (milliseconds) each cycle of the animation is.||1000|
|easing||Easing function of animation. To ease in, ease out, ease in and out.||easeInQuad||See easings|
|elasticity||How much to bounce (higher is stronger).||400|
|loop||Whether to repeat animation indefinitely.||false|
|pauseEvents||Comma-separated list of events to listen to to pause.||null|
|property||Property to animate. Can be a component name, a dot-delimited property of a component (e.g.,
|round||Whether to round values.||false|
|startEvents||Comma-separated list of events to listen to before playing. Animation will not autoplay if specified.||null|
Choose one type from the
Type column, and combine it with one function from
Function column. For example:
easeInOutElastic. The only exception is
linear which stands on its own.
|animation__[ID]-begin||Animation completed. Different event emitted depending on animation name.|
|animation__[ID]-complete||Animation completed. Different event emitted depending on animation name.|
Install and use by directly including the browser files:
My A-Frame Scene
Install via npm:
npm install aframe-animation-component
Then register and use.