Initial commit

src/components/sections/HeroSection.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue"
+import gsap from "gsap"
+import ScrollTrigger from "gsap/ScrollTrigger"
+import { ScrollSmoother } from 'gsap/ScrollSmoother';
+
+
+gsap.registerPlugin(ScrollTrigger)
+
+const section = ref<HTMLElement | null>(null)
+let ctx
+
+onMounted(() => {
+  ctx = gsap.context(() => {
+    gsap.from(".hero-title", {
+      y: 100,
+      opacity: 0,
+      duration: 1.2,
+      ease: "power3.out",
+      scrollTrigger: {
+        trigger: section.value,
+        start: "top 80%",
+        end: "top 50%",
+        scrub: true
+      }
+    })
+
+    gsap.from(".hero-sub", {
+      y: 40,
+      opacity: 0,
+      duration: 1,
+      delay: 0.3,
+      scrollTrigger: {
+        trigger: section.value,
+        start: "top 80%",
+        end: "top 50%",
+        scrub: true
+      }
+    })
+  }, section)
+})
+
+onUnmounted(() => ctx.revert())
+</script>
+
+<template>
+  <section ref="section" class="hero">
+    <h1 class="hero-title">Welcome</h1>
+    <p class="hero-sub">Tom Herpel</p>
+  </section>
+</template>
+
+<style scoped>
+.hero {
+  min-height: 100vh;
+  background: #0f0f0f;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.hero-title {
+  font-size: clamp(3rem, 6vw, 6rem);
+}
+</style>