Animations and transitions in A-Frame are defined using the
<a-animation> element as a child. The system is roughly based after the Web Animations specification. A-Frame uses tween.js internally.
Here is an overview of animation attributes. We'll go into more detail below.
|attribute||Attribute to animate. To specify a component attribute, use ||rotation|
|begin||Event name to wait on before beginning animation.||''|
|delay||Delay (in milliseconds) or event name to wait on before beginning animation.||0|
|direction||Direction of the animation (between ||normal|
|dur||Duration in (milliseconds) of the animation.||1000|
|easing||Easing function of the animation. There are very many to choose from.||ease|
|end||Event name to wait on before stopping animation.||''|
|fill||Determines effect of animation when not actively in play. One of ||forwards|
|from||Starting value.||Current value.|
|repeat||Repeat count or ||0|
|to||Ending value. Must be specified.||None|
begin attribute defines when the animation should start playing.
This can either be a number, representing milliseconds to wait, or an event name to wait for. For example, we can define an animation that waits 2 seconds before scaling an entity.
<a-entity> <a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation> </a-entity>
Or we can define an animation that waits for the parent element to trigger an
fade before fading an entity.
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1"> <a-animation attribute="material.opacity" begin="fade" to="0"></a-animation> </a-entity>
// Trigger an event to begin fading. document.querySelector('#fading-cube').emit('fade');
direction attribute defines which way to animate between the starting
value and the final value.
When we define an alternating direction, the animation will go back and forth
to values like a yo-yo. Alternating directions only
take affect when we repeat the animation.
|alternate||On even-numbered cycles, animate from |
|alternate-reverse||On odd-numbered cycles, animate from |
|normal||Animate from |
|reverse||Animate from |
easing attribute defines the easing function of the animation, which
ease. There are too many easing functions to list, but we can
implicitly explain them.
One possible value is
linear. And the basic easing functions are
Then there are more groups of easing functions. The above basic easing
functions prefix each group of easing functions. The groups of easing functions
For example, the
cubic group of easing functions would consist of
fill attribute defines the effect of animation when not actively in play.
fill as what values the animation sets on the entity before and/or
after each animation cycle. Below are the possible values for
|backwards||Before the animation starts, set the starting value to the |
|both||Combine the effects of both backwards fill and forwards fill.|
|forwards||After the animation finishes, the final value will stay at the |
|none||Before the animation starts, set the starting value to the initial value. After the animation finishes, reset the value to the initial value.|
repeat attribute defines how often the animation repeats. We call each
repeat of the animation a cycle. Repeat can either be a number that counts down
on each animation cycle until it reaches
0 at which point the animation will
end, or we can set
indefinite and the animation will loop
continuously until the animation is manually removed or stopped.
<a-animation> element emits a couple of events.
|animationend||Emitted when the animation finishes. In case of repeats, emitted when the repeat count reaches |
|animationstart||Emitted immediately when the animation begins playing.|