0

I'm working on GSAP and I have two elements on different pages that have the same class and I want to apply their animation using scrollTrigger when I reach the element. Is there a way I can do this with a function instead of giving them a specific class and repeating myself?

Here is my code:

HTML:

 <div class="container"></div>
    <div class="containe">
        <img class="image" src="./card-1.png" alt="">
    </div>
    <div class="container">
        <img class="image" src="./card-2.png" alt="">
    </div>

CSS:

.container{
 height: 100vh;
}

GSAP:

gsap.to('.image' ,{
    x:500,
    rotation:250,
    duration:1,
    opacity:1,
    scrollTrigger:{
        trigger:'.image',
        start:'top center',
        toggleActions:'restart none none none',
    }
})
Chris Perry
  • 6,666
  • 3
  • 11
  • 21
Nora
  • 77
  • 6

1 Answers1

0

I believe you don't need to repeat the code for the same class; just put GSAP javascript in a single js file and call it anywhere you want. Also, you can use the same class on a single page and scroll trigger them separately:

1. By using toArray() method:

var sections = gsap.utils.toArray(".image");

sections.forEach((section) => {
  gsap.to(section, {
    x: 500,
    rotation: 250,
    duration: 1,
    opacity: 1,
    scrollTrigger: {
      trigger: section,
      end: "-=500",
      scrub: true,
      toggleActions: "restart none none none",
    },
  });
});

tweak start / end points for best result. Example Pen

2. you can also use ScrollTrigger.batch

ScrollTrigger.batch(".image", {
  onEnter: (batch) =>
    gsap.to(batch, {
      x: 500,
      rotation: 250,
      duration: 1,
      opacity: 1,
    }),
});

You can also set onLeave animation. Checkout this Pen for example

Raef
  • 36
  • 3