---
title: Basic Animations
description: Learn how to create basic animations in TresJS
thumbnail: /recipes/model-n-animations/basic.png
---

::examples-basic-animation
::

This recipe covers the fundamentals of creating smooth animations in TresJS.

::steps

### Import `useLoop` composable

The `useLoop` composable is the core of TresJS updates, which includes: **animations**. It allows you to register a callback that will be called every time the renderer updates the scene with the browser's refresh rate.


```ts
import { useLoop } from '@tresjs/core'

const { onBeforeRender } = useLoop()

onBeforeRender(() => {
  // Animation logic here
})

```

::read-more{to="/api/composables/use-loop"}
::

### Get a reference to the object you want to animate

Similar to Vue, you can use [template refs](https://vuejs.org/guide/essentials/template-refs) to access the Three.js object instance and manipulate its properties. If you want to optimize even further, you can use `shallowRef` to avoid unnecessary reactivity.

```vue [RotatingCube.vue]
<script setup lang="ts">
import { ref } from 'vue'
import { useLoop } from '@tresjs/core'

const cubeRef = ref<THREE.Mesh | null>(null)
// or use shallowRef if you want to avoid reactivity
// const cubeRef = shallowRef<THREE.Mesh | null>(null)

const { onBeforeRender } = useLoop()

onBeforeRender(() => {
  if (cubeRef.value) {
    cubeRef.value.rotation.x += 0.01
    cubeRef.value.rotation.y += 0.01
  }
})
</script>

<template>
  <TresMesh ref="cubeRef" :position="[0, 1, 0]">
    <TresBoxGeometry :args="[1, 1, 1]" />
    <TresMeshNormalMaterial />
  </TresMesh>
</template>
```

::read-more{to="/api/advanced/performance#reactivity-and-performance"}
To read more about reactivity and performance in TresJS.
::

## Use `delta`

The `onBeforeRender` callback provides a `delta` parameter, which represents the time elapsed since the last frame. This is useful for creating frame rate independent animations.

```ts
onBeforeRender(({ delta }) => {
  if (cubeRef.value) {
    cubeRef.value.rotation.x += delta
    cubeRef.value.rotation.y += delta
  }
})
```

Without using `delta`, the animation speed would vary depending on the frame rate, leading to inconsistent behavior across different devices, like the example below:

<div class="w-full flex border border-gray-200 rounded-lg overflow-hidden">
   <div class="w-1/2 border-r border-gray-200">
      <div class="text-center p-2 border-b border-gray-200 font-bold">
         60fps
      </div>

      ::examples-basic-animation-60fps
      ::

   </div>
   <div class="w-1/2">
      <div class="p-2 text-center p-2 border-b border-gray-200 font-bold">
         120fps
      </div>

      ::examples-basic-animation-120fps
      ::

   </div>
</div>
<div class="p-2 text-xs text-gray-500 italic mt-2 block text-center">
  The value of `delta` is 0.016 for 60fps and 0.008 for 120fps,  this difference ensures that the cube rotates at the same speed on both frame rates.
</div>

## Using `elapsed` 

The `onBeforeRender` callback also provides an `elapsed` parameter, which represents the total time elapsed since the start of the animation. This can be useful for creating time-based animations like oscillations.

```ts
onBeforeRender(({ elapsed }) => {
  if (cubeRef.value) {
    cubeRef.value.position.y += Math.sin(elapsed) * 0.01
  }
})
```

::examples-basic-animation-elapsed
::