Nuxt 3 с GSAP - Как правильно управлять глобальными графиками ⇐ Javascript

[Anonymous]

В настоящее время я строю веб -сайт с использованием Nuxt 3 и GSAP.

Я хочу, чтобы все анимации на домашней странице были подключены, поэтому я использую временную шкалу для этой цели. < /p>
Поток анимации заключается в следующем: < /p>

. раскрытие содержания (например, заголовок), < /li>
, а затем, используя Scrolltrigger, раскрывая остальное содержание домашней страницы в качестве пользовательских прокруток. Subpage. < /p>
У вас есть какие -либо предложения для лучшего подхода к этому? Идея, которую я использовал, была предложена Chatgpt. Но я не уверен, правильно ли это.import gsap from "gsap";

const timeline = gsap.timeline({ paused: true });
const elements = [];
const scrollTimeline = gsap.timeline({ paused: true });
const scrollElements = [];

const addToTimeline = (element) => {
if (Array.isArray(element)) {
element.forEach((item) => {
if (item.target) {
elements.push(item.target);
} else {
elements.push(item);
}
});
} else {
elements.push(element);
}
if (elements.length >= 10) {
timeline.fromTo(
elements[0].target,
{
yPercent: 0,
},
{
yPercent: -100,
ease: "power4.inOut",
duration: 1,
}
);

timeline.play();
elements.shift();
timeline.fromTo(
elements,
{
y: 16,
opacity: 0,
filter: "blur(8px)",
},
{
y: 0,
opacity: 1,
filter: "blur(0px)",
duration: 1,
ease: "power4.inOut",
stagger: 0.08,
}
);
}
};

const addToScrollTimeline = (element) => {
console.log(element[1].target.childNodes, "scroll timelien ");
let whySection = [];
let whySectionTrigger = element[0].target;

whySection.push(...element[0].target.childNodes[0].childNodes);

whySection.push(
element[0].target.childNodes[1],
element[0].target.childNodes[2]
);

scrollTimeline.fromTo(
whySection,
{
y: 100,
opacity: 0,
},
{
y: 0,
opacity: 1,
ease: "power4.inOut",
stagger: 1,
scrollTrigger: {
trigger: whySectionTrigger,
scrub: 1,
start: "top bottom+=20",
end: "top center",
},
}
);
};

export default {
timeline,
elements,
addToTimeline,
addToScrollTimeline,
};

pages/index.vue
const title = ref(null);
const subTitle = ref(null);
const buttons = ref(null);
const heroImages = ref(null);

const whyusRef = ref(null);
const processRef = ref(null);
const videoSectionRef = ref(null);
const realisationsSectionRef = ref(null);
const questionsRef = ref(null);

onMounted(() => {
globalTimeline.addToTimeline([
title.value,
subTitle.value,
buttons.value,
heroImages.value,
]);
globalTimeline.addToScrollTimeline([
{ target: whyusRef.value, title: "why-us" },
{ target: processRef.value, title: "process" },
{ target: videoSectionRef.value, title: "video-section" },
{ target: realisationsSectionRef.value, title: "realisations-section" },
{ target: questionsRef.value, title: "questions-section" },
]);
});
onUnmounted(() => {
globalTimeline.timeline.kill();
globalTimeline.scrollTimeline.kill();
});


Подробнее здесь: https://stackoverflow.com/questions/795 ... l-timeline