th/th-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scrolltrigger hero page

Browse Source
This commit is contained in:
365884
2026-03-07 12:45:19 +01:00
parent b3bc957ec1
commit e4cd6977a9
1 changed files with 50 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/sections/HeroSection.vue
View File

@@ -2,6 +2,9 @@
import { onMounted, onUnmounted, ref } from "vue" import { onMounted, onUnmounted, ref } from "vue"
import gsap from "gsap" import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger)
@@ -13,32 +16,42 @@ function toggleTimeline() {
tl.reversed(!tl.reversed()) tl.reversed(!tl.reversed())
} }
function startNextAnimation() { function startNextAnimation() {
ctx = gsap.context((self) => { ctx = gsap.context(() => {
const boxes = gsap.utils.toArray('.box')
tl = gsap.timeline({delay:2}) const boxes = gsap.utils.toArray(".box")
.to(boxes[0], {x: gsap.utils.random(300, 600), rotate :180})
.to(boxes[1], {x:-gsap.utils.random(300, 500), rotate: -180}, '<') tl = gsap.timeline({
.to(boxes[2], {x: gsap.utils.random(300, 400) , rotate: 180}) scrollTrigger: {
.to(boxes[3], {x: gsap.utils.random(300, 500), rotate : 180}) trigger: ".scroll-trigger-ready__worm-wrap",
.to(boxes[4], {x: - gsap.utils.random(300, 400), rotate: -180}, '<') start: "top 00%",
.to(boxes[5], {x: gsap.utils.random(300, 500) , rotate: 180}) end: "bottom 30%",
.to(boxes[6], {x: - gsap.utils.random(300, 600), rotate: 180}) scrub: 1
.to(".title", { }
y: window.innerHeight - 130, })
duration: 1.2,
ease: "power2.inOut" tl
}) .to(boxes[0], { x: gsap.utils.random(300, 600), rotate: 180 })
.reverse(); .to(boxes[1], { x: -gsap.utils.random(300, 500), rotate: -180 }, "<")
}, main.value); .to(boxes[2], { x: gsap.utils.random(300, 400), rotate: 180 })
.to(boxes[3], { x: gsap.utils.random(300, 500), rotate: 180 })
.to(boxes[4], { x: -gsap.utils.random(300, 400), rotate: -180 }, "<")
.to(boxes[5], { x: gsap.utils.random(300, 500), rotate: 180 })
.to(boxes[6], { x: -gsap.utils.random(300, 600), rotate: 180 })
.to(".title", {
y: window.innerHeight - 130,
duration: 4.0,
ease: "power2.inOut"
}, 0)
}, main.value)
} }
onMounted(() => { onMounted(() => {
startNextAnimation(); startNextAnimation();
tl.reversed(false);
}); });
onUnmounted(() => { onUnmounted(() => {
ctx.revert() ctx?.revert()
}) })
@@ -83,25 +96,37 @@ onUnmounted(() => {
color: #ffffff; color: #ffffff;
font-size: clamp(2rem, 12rem, 5vw); font-size: clamp(2rem, 12rem, 5vw);
box-sizing: border-box; box-sizing: border-box;
font-display: block; font-display: block;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
}
.titel {
font-weight: 900;
font-size: clamp(3rem, 6vw, 6rem);
} }
.box { .box {
width: 100px; width: 100px;
height: 100px; height: 100px;
background: linear-gradient( 111.45deg,#ffffff 19.42%,#f7bdf8 73.08%); background: linear-gradient(111.45deg, #ffffff 19.42%, #f7bdf8 73.08%);
border-radius: 20%; border-radius: 20%;
} }
.box:nth-child(2) {
background: linear-gradient(111.45deg, #ffffff 19.42%, #39ffba 73.08%);
}
.box:nth-child(3) {
background: linear-gradient(111.45deg, #ffffff 56.42%, #aed1e3 73.08%);
}
.box:nth-child(4) {
background: linear-gradient(111.45deg, #ffffff 90.42%, #f8e3bd 12.08%);
}
.box:nth-child(5) {
background: linear-gradient(111.45deg, #ffffff 19.42%, #76aaee 73.08%);
}