diff --git a/website/components/Landing/LandingHero.vue b/website/components/Landing/LandingHero.vue index f9bff738..d7bf5155 100644 --- a/website/components/Landing/LandingHero.vue +++ b/website/components/Landing/LandingHero.vue @@ -9,13 +9,14 @@ const profileContainer = ref() onMounted(() => { ctx.value = gsap.context((self) => { const artItems = self.selector!(".art-item") - const relContainer = self.selector!(".profile-container #wrapper") + const scrollWrapper = self.selector!(".profile-container #wrapper") const ease: gsap.TweenVars = { ease: "elastic.out(1, 0.75)", duration: 0.75, } + // Trigger onload artItems.forEach((item: HTMLElement | any, i: number) => { gsap .timeline() @@ -23,16 +24,18 @@ onMounted(() => { .delay(i * 0.15) }) + // Trigger on-scroll gsap .timeline({ scrollTrigger: { - trigger: relContainer, + trigger: scrollWrapper, start: "top top", end: "bottom center", - scrub: 0.75, + scrub: 1, + markers: true }, }) - .to(artItems[2], { y: -150 }) + .to(artItems[2], { y: -145 }) .to(artItems[1], { y: -125 * 2 }, "<") .to(artItems[0], { y: -125 * 3 }, "<") }, profileContainer.value) @@ -47,29 +50,44 @@ onUnmounted(() => ctx.value.revert())

MyFursona

- An open-source platform where you can manage and share your amazing, + An platform where you can manage and share your amazing, adorable, and fluffy characters and show them off to your friends and family!

-
+