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.



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

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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?