felipe_cla

Hello everyone, everything good? I'm running this animation, but it messes up all the content on the screen when I use that ScrollTrigger.create . can anybody help me? <div class="container-project"> <div class="stackingcards"> <ProjectCard v-for="(project, index) in projectData" :key="index" class="stackingcard" :data="project" /> </div> <div class="end-element color3 h-60"> final </div> </div> const projectScrollMagic = () => { const cards = document.querySelectorAll('.project-card') const endElement = documentquerySelector('.end-element') 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 }) }) } .container-project { padding: 5rem 0rem 20rem 0rem; width: 100%; box-sizing: border-box; } .stackingcards { position: relative; }

BUt i need to have trigger element triggerElement: `#switch-${index}`, triggerHook: "onEnter", duration: containerHeight * 0.8, // D

i have this code . Does ScrollTrigger aldo has .Controller? const swithesScrollMagic = () => { const switches = document.querySelectorAll('.switch') let element = document.querySelector('.stack-item') let containerHeight = null const controllers = [] if (element) containerHeight = element.offsetHeight switches.forEach((stack, index) => { const controller2 = new ScrollMagic.Controller() controllers.push(controller2) // Cria uma cena para o elemento atual new ScrollMagic.Scene({ triggerElement: `#switch-${index}`, triggerHook: "onEnter", duration: containerHeight * 0.8, // Define a duração com base na altura do container }) .setTween( gsap.fromTo( `#switch-${index}`, { y: containerHeight }, // Posição inicial { y: 0, opacity: 1 } // Posição final ) ) .addTo(controller2) }) }

Hi Rodrigo, thanks for answering. I'm using nuxt3. About using cdn, I'm not sure to use the npm packages in the project, if I import them in the setup script, I get that window doesn't exist, and if I try to put the procces.client I get this error Hugs I was using this cdn 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', } ] 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', } ] so now i installed gsap and scrollmagic in my project and i created a plugin scrollmagic.client.js with import gsap from 'gsap' import ScrollMagic from 'scrollmagic' import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap' import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators' gsap.registerPlugin(ScrollMagic) export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(ScrollMagic) return { provide: { scrollmagic } } }) but im getting

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', } ]