Fortgeschrittene Animationen

In diesem Rezept werden wir GSAP verwenden um unsere Szene zu animieren, statt des useRenderLoop-Composables.

Loading...

3D Objekte mit GSAP animieren

Wir müssen nicht unbedingt useRenderLoop oder gar TresJS für unsere Animationen benutzen. Zum Beispiel könnten wir auch GSAP's to-Method verwenden:

import gsap from 'gsap'

const objectRef = shallowRef(null)

watchEffect(() => {
  if (objectRef.value) {
    gsap.to(objectRef.value.position, {
      y: 2,
    })
  }
})

GSAP ist schon seit vielen Jahren eine sehr beliebte Animations-Library im Web. Es gibt also unzählige Resourcen online wie zum Beispiel diese Demos auf Codepen.

Du kannst natürlich auch deine Lieblingsbibliothek nutzen, an Animations-Bibliotheken mangelt es im Web nicht!