43 lines
857 B
JavaScript
43 lines
857 B
JavaScript
import { onBeforeUnmount, onMounted, unref } from "vue";
|
|
|
|
export function usePageShellMotion(rootRef) {
|
|
let ctx;
|
|
|
|
onMounted(() => {
|
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
return;
|
|
}
|
|
|
|
const root = unref(rootRef);
|
|
const { $gsap } = useNuxtApp();
|
|
|
|
if (!root || !$gsap) {
|
|
return;
|
|
}
|
|
|
|
ctx = $gsap.context(() => {
|
|
$gsap.fromTo(
|
|
root,
|
|
{ autoAlpha: 0 },
|
|
{ autoAlpha: 1, duration: 0.42, ease: "power2.out" },
|
|
);
|
|
|
|
root.querySelectorAll("[data-cta-orbit]").forEach((element) => {
|
|
$gsap.to(element, {
|
|
scale: 1.08,
|
|
autoAlpha: 0.72,
|
|
duration: 2.8,
|
|
ease: "sine.inOut",
|
|
repeat: -1,
|
|
yoyo: true,
|
|
});
|
|
});
|
|
}, root);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
ctx?.revert();
|
|
});
|
|
}
|
|
|