button with image

pages/[id]/[slug].vue

@@ -6,6 +6,66 @@
 </template>
 
 <script setup>
+import { gsap } from 'gsap'
+import ScrollTrigger from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+watch(useColorMode(), (color) => {
+  console.log(color);
+  
+})
+
+onMounted(() => {
+  
+ 
+  
+  
+  const anim = gsap.fromTo(
+    'h1',
+    {
+      opacity: 0,
+      zoom: 0.95
+    },
+    {
+      opacity: 1,
+      duration: 1,
+      zoom: 1,
+      ease: 'power2.out',
+    }
+  )
+
+  ScrollTrigger.create({
+    trigger: 'h1',
+    start: 'top 80%',
+    onEnter: () => anim.restart(),       // play when scrolling down
+    onEnterBack: () => anim.restart(),   // play again when scrolling up
+  })
+
+  const animh2 = gsap.fromTo(
+    'h2',
+    {
+      opacity: 0,
+      color: 'var(--color-accent-green-light)',
+    },
+    {
+      opacity: 1,
+      duration: 1,
+      ease: 'power2.out',
+    }
+  )
+
+  ScrollTrigger.create({
+    trigger: 'h2',
+    start: 'top 80%',
+    onEnter: () => animh2.restart(),       // play when scrolling down
+    onEnterBack: () => animh2.restart(),   // play again when scrolling up
+  })
+
+
+})
+
+
 const route = useRoute();
 const store = useStore();
 const menuStore = useMenuStore();