<commit_before>---
title: Animation
type: core
layout: docs
parent_section: core
order: 6
---

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](http://www.w3.org/TR/web-animations/) specification. A-Frame uses [tween.js](https://github.com/tweenjs/tween.js/) internally.

As an introductory example, to define a 5-meter orbit on an entity about the Y-axis that takes 10 seconds, we can offset the position and animate the rotation. This animation starts with the initial rotation about the Y-axis of 0 degrees, and goes around 360 degrees. It's defined with a duration of 10000 milliseconds, maintains the final value on each cycle of the animation, and loops infinitely.

```html
<a-entity position="5 0 0" rotation="0 0 0">
  <a-animation attribute="rotation"
               to="0 360 0"
               dur="10000"
               fill="forwards"
               repeat="indefinite"></a-animation>
</a-entity>
```

There are many attributes and values used to define animations. Below is a table providing a quick overview of these attributes, and from there we'll delve into more detail.

| Attribute   | Description                                                                                                             | Default Value  |
|-------------|-------------------------------------------------------------------------------------------------------------------------|----------------|
| attribute   | Attribute to animate. To specify a component attribute, use `componentName.attribute` syntax (e.g., `light.intensity`). | rotation       |
| begin       | Delay (in milliseconds) or event name to wait on before beginning animation.                                            | 0              |
| direction   | Direction of the animation (between `from` and `to`). One of `alternate`, `alternateReverse`, `normal`, `reverse`.      | normal         |
| dur         | Duration in (milliseconds) of the animation.                                                                                 | 1000           |
| easing      | Easing function of the animation. There are very many to choose from.                                                   | ease           |
| fill        | Determines effect of animation when not actively in play. One of `backwards`, `both`, `forwards`, `none`.               | forwards       |
| from        | Starting value.                                                                                                         | Current value. |
| repeat      | Repeat count or `indefinite`.                                                                                           | 0              |
| to          | Ending value. Must be specified.                                                                                        | None           |

## Attribute

A-Frame's animation system can animate several possible categories of attributes.

### Coordinate Attributes

A-Frame has several core coordinate-based components (i.e., `position`, `rotation`, and `scale`). These components consist of three values: X, Y, and Z. We can pass three space-delimited numbers to the `from` and `to` attributes just as we would define them on the entity. In this case, the animation system will assume we are animating a coordinate value.

For example, if we want to animate an entity going from one spot to another, we can animation the `position` component.

```html
<a-entity>
  <a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
```<commit_msg>typo s/attribute/property/<commit_after>---
title: Animation
type: core
layout: docs
parent_section: core
order: 6
---

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](http://www.w3.org/TR/web-animations/) specification. A-Frame uses [tween.js](https://github.com/tweenjs/tween.js/) internally.

As an introductory example, to define a 5-meter orbit on an entity about the Y-axis that takes 10 seconds, we can offset the position and animate the rotation. This animation starts with the initial rotation about the Y-axis of 0 degrees, and goes around 360 degrees. It's defined with a duration of 10000 milliseconds, maintains the final value on each cycle of the animation, and loops infinitely.

```html
<a-entity position="5 0 0" rotation="0 0 0">
  <a-animation attribute="rotation"
               to="0 360 0"
               dur="10000"
               fill="forwards"
               repeat="indefinite"></a-animation>
</a-entity>
```

There are many attributes and values used to define animations. Below is a table providing a quick overview of these attributes, and from there we'll delve into more detail.

| Attribute   | Description                                                                                                             | Default Value  |
|-------------|-------------------------------------------------------------------------------------------------------------------------|----------------|
| attribute   | Attribute to animate. To specify a component attribute, use `componentName.property` syntax (e.g., `light.intensity`). | rotation       |
| begin       | Delay (in milliseconds) or event name to wait on before beginning animation.                                            | 0              |
| direction   | Direction of the animation (between `from` and `to`). One of `alternate`, `alternateReverse`, `normal`, `reverse`.      | normal         |
| dur         | Duration in (milliseconds) of the animation.                                                                                 | 1000           |
| easing      | Easing function of the animation. There are very many to choose from.                                                   | ease           |
| fill        | Determines effect of animation when not actively in play. One of `backwards`, `both`, `forwards`, `none`.               | forwards       |
| from        | Starting value.                                                                                                         | Current value. |
| repeat      | Repeat count or `indefinite`.                                                                                           | 0              |
| to          | Ending value. Must be specified.                                                                                        | None           |

## Attribute

A-Frame's animation system can animate several possible categories of attributes.

### Coordinate Attributes

A-Frame has several core coordinate-based components (i.e., `position`, `rotation`, and `scale`). These components consist of three values: X, Y, and Z. We can pass three space-delimited numbers to the `from` and `to` attributes just as we would define them on the entity. In this case, the animation system will assume we are animating a coordinate value.

For example, if we want to animate an entity going from one spot to another, we can animation the `position` component.

```html
<a-entity>
  <a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
```
{'fraction_non_alphanumeric': 0.11956521739130435, 'fraction_numerical': 0.011557512383048982, 'mean_word_length': 1.5550087873462215, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 54, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6170807', 'n_tokens_mistral': 1640, 'n_tokens_neox': 1503, 'n_words': 719}