I'm working with nuxt3. I created this simple animation. When giving F5 or loading the page it works. However, if I am in the /project/slug route and I click on the button in the navbar to go (push) to the index, the animation is not being loaded again. Can someone help me?
onMounted(() => {
if (process.client) {
isMobile.value = window.innerWidth <= 768
gsap = window.gsap
const cards = gsap.utils.toArray(".project-card");
cards.forEach((card, i) => {
gsap.to(card, {
scale: () => 0.8 + i * 0.035,
ease: "none",
scrollTrigger: {
trigger: card,
start: "top-=" + 40 * i + " 40%",
end: "center 20%",
scrub: true
}
});
ScrollTrigger.create({
trigger: card,
start: "center-=" + 40 * i + " 40%",
end: "top center",
endTrigger: ".end-element",
pin: true,
pinSpacing: false,
id: "card-" + i
});
})
}
})
i have this cdns on nuxt.config
script: [
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js',
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js',
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js',
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js',
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js',
}
]