Cards stay out of the correct position

[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;
}

 

[Rodrigo]

Hi,

 

Is really hard for us to debug issues without a minimal demo. You can fork one of the starter templates in our Vue collection here:

https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters

 

This is one that uses ScrollTrigger:

https://stackblitz.com/edit/vitejs-vite-t1nmfa

 

The only thing I can see is weird from your code is the fact that you are creating a GSAP instance that is controlled by ScrollTrigger and an extra ScrollTrigger instance that pins each card. Any particular reason for that? Is not an option to pin each card in the same GSAP instance?

 

If you want to keep the cards pinned longer than the animation, then you can create a timeline and add and extra empty .to() instance to it:

cards.forEach((card, i) => {
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: card,
      start: "top-=" + 40 * i + " 40%",
      end: "center 20%",
      scrub: true,
    },
  })
  .to(card, {
    scale: () => 0.8 + i * 0.035,
    ease: "none",
  })
  .to({}, {duration: 0.25}); // half the duration of the previous instance
})

If you keep having issues, please include a minimal demo.

Happy Tweening!