Learn
Building the Scene
Animation

We can add animations to our entities using A-Frame’s built-in animation component.

Animations are essentially programmed changes in an entity’s values. The changes can be based on time intervals or on interactions.

Suppose we have a box in our scene and we want it to hover up and down to add some motion. Check out the animation component:

<a-box color="red" position="2 2 -5" rotation="0 45 45" animation="property: object3D.position.x; to: 3; dir: alternate; dur: 2000; loop: true"> </a-box>

Note that there are five animation properties separated by semicolons. Here, we are telling the animation component to:

  • Animate the object position’s x-axis.
  • Animate from the original x-position to 3, which is 1 meter to the right.
  • Set the dir (direction) to alternate so it goes back and forth.
  • Set the dur (duration) to 2000 millisecond on each cycle.
  • Set the loop to true to repeat the animation forever.

Check out the animation documentation for more info.

Instructions

1.

Go back to the code and add some animation for the character, specifically the object3D.position.y with

  • to of 2.2
  • dir of alternate
  • dur of 2000
  • loop of true
2.

The Welcome! text looks a little weird being stationary while the character moves, let’s give it some animation, too.

Add the same animation for the text entity and make it go up and down by 0.2 meters.

Folder Icon

Take this course for free

Already have an account?