66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<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> |