<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>