aframe Animation

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Introduction

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.

Remarks

Attributes

Here is an overview of animation attributes. We'll go into more detail below.

AttributeDescriptionDefault Value
attributeAttribute to animate. To specify a component attribute, use componentName.property syntax (e.g., light.intensity).rotation
beginEvent name to wait on before beginning animation.''
delayDelay (in milliseconds) or event name to wait on before beginning animation.0
directionDirection of the animation (between from and to). One of alternate, alternateReverse, normal, reverse.normal
durDuration in (milliseconds) of the animation.1000
easingEasing function of the animation. There are very many to choose from.ease
endEvent name to wait on before stopping animation.''
fillDetermines effect of animation when not actively in play. One of backwards, both, forwards, none.forwards
fromStarting value.Current value.
repeatRepeat count or indefinite.0
toEnding value. Must be specified.None

Begin

The 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 event named 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

The 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 between the from and to values like a yo-yo. Alternating directions only take affect when we repeat the animation.

ValueDescription
alternateOn even-numbered cycles, animate from from to to. On odd-numbered cycles, animation from to to from
alternate-reverseOn odd-numbered cycles, animate from from to to. On even-numbered cycles, animation from to to from
normalAnimate from from to to.
reverseAnimate from to to from.

Easing

The easing attribute defines the easing function of the animation, which defaults to 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 ease, ease-in, ease-out, and ease-in-out.

Then there are more groups of easing functions. The above basic easing functions prefix each group of easing functions. The groups of easing functions are cubic, quad, quart, quint, sine, expo, circ, elastic, back, and bounce.

For example, the cubic group of easing functions would consist of ease-cubic, ease-in-cubic, ease-out-cubic, ease-in-out-cubic.

Fill

The fill attribute defines the effect of animation when not actively in play. Think of fill as what values the animation sets on the entity before and/or after each animation cycle. Below are the possible values for fill and their effects.

ValueDescription
backwardsBefore the animation starts, set the starting value to the from value.
bothCombine the effects of both backwards fill and forwards fill.
forwardsAfter the animation finishes, the final value will stay at the to value. The default fill.
noneBefore the animation starts, set the starting value to the initial value. After the animation finishes, reset the value to the initial value.

Repeat

The 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 repeat to indefinite and the animation will loop continuously until the animation is manually removed or stopped.


EVENTS

The <a-animation> element emits a couple of events.

Event NameDescription
animationendEmitted when the animation finishes. In case of repeats, emitted when the repeat count reaches 0. Not emitted for indefinite repeats.
animationstartEmitted immediately when the animation begins playing.


Got any aframe Question?