Introduce the raw object GSAP animation

components/experiments/micro-interactions/gsap/WlGsapRawObjectAnimation.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <p>Value: <code>{{ source.value }}</code></p>
+    <div class="h-2 w-64 overflow-hidden rounded-full bg-slate-500">
+      <div class="h-full bg-slate-400" :style="{ width: `${source.value}%` }" />
+    </div>
+    <a href="#" class="underline" @click.prevent="listeners.onRestart">Restart</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import gsap from 'gsap'
+import { onMounted, reactive } from 'vue'
+
+const source = reactive({ value: 0 })
+
+const methods = {
+  animate(): void {
+    gsap.set(source, { value: 0 })
+    gsap.to(
+      source,
+      {
+        value: 100,
+        duration: 2
+      })
+  }
+}
+
+const listeners = {
+  onRestart(): void {
+    methods.animate()
+  }
+}
+
+onMounted(methods.animate)
+</script>

pages/experiments/micro-interactions/gsap/index.vue

@@ -9,6 +9,10 @@
       <ExperimentCanvas>
         <WlGsapStaggeredAnimation />
       </ExperimentCanvas>
+      <p>A raw object animation example:</p>
+      <ExperimentCanvas>
+        <WlGsapRawObjectAnimationVue />
+      </ExperimentCanvas>
     </Container>
   </NuxtLayout>
 </template>
@@ -18,4 +22,5 @@ import Container from '~/components/shared/layout/Container.vue'
 import ExperimentCanvas from '~/components/shared/experiments/ExperimentCanvas.vue'
 import WlGsapSimpleAnimation from '~/components/experiments/micro-interactions/gsap/WlGsapSimpleAnimation.vue'
 import WlGsapStaggeredAnimation from '~/components/experiments/micro-interactions/gsap/WlGsapStaggeredAnimation.vue'
+import WlGsapRawObjectAnimationVue from '~/components/experiments/micro-interactions/gsap/WlGsapRawObjectAnimation.vue'
 </script>