docs(cookbook): "Advanced Animations" cookbook recipe (#586)

* chore: setup "Advanced Animations" cookbook pages * feat: StackBlitz embed update * feat: finish german + english content * chore: update screenshot * chore: lint fix * feat: update stackblitz + screenshot --------- Co-authored-by: Alvaro Saburido <[email protected]>
Tresjs · May 28, 2024 · 0bd38ee · 0bd38ee
1 parent 7b88bf9
commit 0bd38ee
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 66 deletions.
diff --git a/docs/.vitepress/config/de.ts b/docs/.vitepress/config/de.ts
@@ -61,6 +61,7 @@ export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         items: [
           { text: 'Orbit-Controls', link: '/de/cookbook/orbit-controls' },
           { text: 'Einfache Animationen', link: '/de/cookbook/basic-animations' },
+          { text: 'Fortgeschrittene Animationen', link: '/de/cookbook/advanced-animations' },
           { text: 'Gruppen', link: '/de/cookbook/groups' },
           { text: 'Texturen laden', link: '/de/cookbook/load-textures' },
           { text: 'Modelle laden', link: '/de/cookbook/load-models' },

diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
@@ -62,6 +62,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         items: [
           { text: 'Orbit Controls', link: '/cookbook/orbit-controls' },
           { text: 'Basic Animations', link: '/cookbook/basic-animations' },
+          { text: 'Advanced Animations', link: '/cookbook/advanced-animations' },
           { text: 'Groups', link: '/cookbook/groups' },
           { text: 'Load Textures', link: '/cookbook/load-textures' },
           { text: 'Load Models', link: '/cookbook/load-models' },
@@ -107,39 +108,42 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       { text: 'API', link: '/api/tres-canvas' },
       /*       { text: 'API', link: '/api/' },
       { text: 'Config', link: '/config/' }, */
-      { text: 'Resources', items: [
-        { text: 'Team', link: '/team' },
-        { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
-        {
-          text: 'Playground',
-          link: 'https://play.tresjs.org/',
-        },
-        {
-          text: 'Github',
-          link: 'https://github.com/Tresjs/tres/',
-        },
-        {
-          text: 'Issues',
-          link: 'https://github.com/Tresjs/tres/issues',
-        },
-        {
-          text: 'Ecosystem',
-          items: [
-            {
-              text: 'Cientos 💛',
-              link: 'https://cientos.tresjs.org/',
-            },
-            {
-              text: 'Nuxt module',
-              link: 'https://github.com/Tresjs/nuxt',
-            },
-            {
-              text: 'TresLeches 🍰',
-              link: 'https://tresleches.tresjs.org/',
-            },
-          ],
-        },
-      ] },
+      {
+        text: 'Resources',
+        items: [
+          { text: 'Team', link: '/team' },
+          { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Playground',
+            link: 'https://play.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Issues',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ecosystem',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Nuxt module',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
 }
diff --git a/docs/.vitepress/config/es.ts b/docs/.vitepress/config/es.ts
@@ -62,6 +62,7 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         items: [
           { text: 'Controles de órbita', link: '/es/cookbook/orbit-controls' },
           { text: 'Animaciones básicas', link: '/es/cookbook/basic-animations' },
+          { text: 'Advanced Animations', link: '/es/cookbook/advanced-animations' },
           { text: 'Grupos', link: '/es/cookbook/groups' },
           { text: 'Cargar texturas', link: '/es/cookbook/load-textures' },
           { text: 'Cargar modelos', link: '/es/cookbook/load-models' },
@@ -107,39 +108,42 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       { text: 'API', link: '/es/api/tres-canvas' },
       /*       { text: 'API', link: '/es/api/' },
       { text: 'Configuración', link: '/es/config/' }, */
-      { text: 'Recursos', items: [
-        { text: 'Equipo', link: '/es/team' },
-        { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' },
-        {
-          text: 'Playground',
-          link: 'https://play.tresjs.org/',
-        },
-        {
-          text: 'Github',
-          link: 'https://github.com/Tresjs/tres/',
-        },
-        {
-          text: 'Problemas',
-          link: 'https://github.com/Tresjs/tres/issues',
-        },
-        {
-          text: 'Ecosistema',
-          items: [
-            {
-              text: 'Cientos 💛',
-              link: 'https://cientos.tresjs.org/',
-            },
-            {
-              text: 'Módulo Nuxt',
-              link: 'https://github.com/Tresjs/nuxt',
-            },
-            {
-              text: 'TresLeches 🍰',
-              link: 'https://tresleches.tresjs.org/',
-            },
-          ],
-        },
-      ] },
+      {
+        text: 'Recursos',
+        items: [
+          { text: 'Equipo', link: '/es/team' },
+          { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Playground',
+            link: 'https://play.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Problemas',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ecosistema',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Módulo Nuxt',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },
     ],
     search: {
       provider: 'local',

diff --git a/docs/cookbook/advanced-animations.md b/docs/cookbook/advanced-animations.md
@@ -0,0 +1,35 @@
+---
+title: Advanced Animations
+description: How to use GSAP to animate your scene
+author: dennissmuda
+thumbnail: /recipes/advanced-animations.png
+difficulty: 0
+---
+
+# Advanced Animations
+
+In this guide, we are going to use GSAP to animate our scene instead of the `useRenderLoop` composable.
+
+<StackBlitzEmbed project-id="tresjs-advanced-animations" />
+
+## Use GSAP to trigger animations on 3D Objects
+
+We don't have to rely on `useRenderLoop` or TresJS to handle our animations. We could also leverage GSAP's `to` function for example:
+
+```ts
+import gsap from 'gsap'
+
+const objectRef = shallowRef(null)
+
+watchEffect(() => {
+  if (objectRef.value) {
+    gsap.to(objectRef.value.position, {
+      y: 2,
+    })
+  }
+})
+```
+
+GSAP is a very popular animation library and you can find a lot of help and resources online, including [these demos on codepen](https://codepen.io/GreenSock).
+
+Of course there are lots of alternatives out there, and you should feel free to reach for _your_ favorite animation library!
diff --git a/docs/de/cookbook/advanced-animations.md b/docs/de/cookbook/advanced-animations.md
@@ -0,0 +1,35 @@
+---
+title: Fortgeschrittene Animationen
+description: Wie man mit GSAP eine Szene animiert
+author: dennissmuda
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
+# Fortgeschrittene Animationen
+
+In diesem Rezept werden wir GSAP verwenden um unsere Szene zu animieren, statt des `useRenderLoop`-Composables.
+
+<StackBlitzEmbed project-id="tresjs-advanced-animations" />
+
+## 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:
+
+```ts
+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](https://codepen.io/GreenSock).
+
+Du kannst natürlich auch _deine_ Lieblingsbibliothek nutzen, an Animations-Bibliotheken mangelt es im Web nicht!
diff --git a/docs/es/cookbook/advanced-animations.md b/docs/es/cookbook/advanced-animations.md
@@ -0,0 +1,11 @@
+---
+title: Animaciones avanzadas
+description: Cómo utilizar GSAP para animar tu escena
+author: dennissmuda
+thumbnail: /recipes/animations.png
+difficulty: 1
+---
+
+# Animaciones avanzadas
+
+En esta guía, vamos a utilizar GSAP para animar nuestra escena en lugar del composable `useRenderLoop`.
diff --git a/docs/public/recipes/advanced-animations.png b/docs/public/recipes/advanced-animations.png