> For the complete documentation index, see [llms.txt](https://docs.hology.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hology.app/gameplay/animation/animation-system.md).

# Animation system

The rendering library Three.js used in Hology Engine provides an animation system that you can you on its own. Take a look at the [official Three.js documentation](https://threejs.org/docs/#manual/en/introduction/Animation-system) to get a better understanding of how to directly use animation clips, mixer, actions and more.

Below we can see how an Animation Mixer can be used to play animations.

```typescript
import { Actor, AssetLoader, BaseActor, inject } from '@hology/core/gameplay';
import * as THREE from 'three';

@Actor()
class Character extends BaseActor {
  private assetLoader = inject(AssetLoader)
  private mixer: THREE.AnimationMixer

  async onInit(): Promise<void> {
    // We load a model by name that has previously been 
    // imported to the project in the editor.
    const model = await this.assetLoader.getModelByAssetName('character-human')
    const mesh = model.scene
    // Adding the model to the actor's object to be rendered. 
    this.object.add(mesh)    

    // Each object to be animated needs its own animation mixer
    const mixer = new THREE.AnimationMixer(mesh)
    // Find a clip from loaded animations by name
    const clip = THREE.AnimationClip.findByName(model.animations, 'idle')
    const action = mixer.clipAction(clip)
    action.play()

    this.mixer = mixer
  }

  onUpdate(deltaTime: number): void {
    this.mixer.update(deltaTime)
  }

}

export default Character
```

You can download this example project to see the code in action.

{% embed url="<https://github.com/hologyengine/animation-tutorial/tree/main>" %}

The above example illustrates how to use the constructs provided by the rendering library ThreeJS for playing animations. If you want to animate something like a character, it can be better to use Hology Engine's `CharacterAnimationComponent` which provides easier ways of transitioning between animations and playing different animations for upper and lower body.