Apply same scrolltrigger animation to multiple elements with same class

[archimedo]

Hello, I created a simple scrolltrigger animation that shows text when a card become visibile in the screen.

Since I have multiple similar cards on my page, I thought it would be good to apply the same code to all of them together.

I tried with a loop but it seems not to be working, can you help me understand what I'm missing?

Thanks!

See the Pen bGyNgag by aieio (@aieio) on CodePen

[Rodrigo]

Hi,

 

Maybe you're looking for ScrollTrigger's Batch method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Hopefully this helps.

Happy Tweening!

[archimedo]

3 hours ago, Rodrigo said:

Hi,

 

Maybe you're looking for ScrollTrigger's Batch method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Hopefully this helps.

Happy Tweening!

Hi Thanks for your answer.

I've tried with batch as well but it seems not to be working

 

See the Pen JjqoLEm by aieio (@aieio) on CodePen

[GreenSock]

You had various syntax problems and logic problems in your code. Plus you weren't loading or registering ScrollTrigger. Is this what you're looking for?: 

 

See the Pen jOoExGv?editors=1010 by GreenSock (@GreenSock) on CodePen

[archimedo]

22 hours ago, GreenSock said:

You had various syntax problems and logic problems in your code. Plus you weren't loading or registering ScrollTrigger. Is this what you're looking for?: 

 

 

 

Thank you so much for your help!

I was noticing that when I scroll up again the animation sometimes restarts. is there a way where the animation is executed only once?

[Rodrigo]

17 hours ago, archimedo said:

I was noticing that when I scroll up again the animation sometimes restarts. is there a way where the animation is executed only once?

You mean if you scroll back up and down again?

 

In that case just use the once config option:
https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#once

 

ScrollTrigger.batch(".section", {
  onEnter: (batch) => {
    let targets = [];
    batch.forEach(el => {
      targets.push(...Array.from(el.querySelectorAll('h1, p')))
    });
    gsap.from(targets, {
      y: "100%",
      opacity: 0,
      stagger: 0.3,
      duration: 1.2,
      delay: 0.6,
      ease: "power4.out",
      stagger: {
        each: 0.3,
        from: "start",
        ease: "none"
      }
    });
  },
  start: "top bottom",
  once: true,
});

Hopefully this helps.

Happy Tweening!

[archimedo]

21 minutes ago, Rodrigo said:

You mean if you scroll back up and down again?

 

In that case just use the once config option:
https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#once

 

ScrollTrigger.batch(".section", {
  onEnter: (batch) => {
    let targets = [];
    batch.forEach(el => {
      targets.push(...Array.from(el.querySelectorAll('h1, p')))
    });
    gsap.from(targets, {
      y: "100%",
      opacity: 0,
      stagger: 0.3,
      duration: 1.2,
      delay: 0.6,
      ease: "power4.out",
      stagger: {
        each: 0.3,
        from: "start",
        ease: "none"
      }
    });
  },
  start: "top bottom",
  once: true,
});

Hopefully this helps.

Happy Tweening!

Yes that's exactly what I was looking for!

it seems to work great! the only problem is that if I reload the page and the scrollbar is down already, the animation won't start immediately but it will wait for all the other elements on top to finish. 

Is there a way to make the animation start immediately and not make it dependent on the other sections?

[Rodrigo]

Hi,

 

Just set the maximum number of elements for each batch to be 1 with :

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()#configuration

 

Something like this:

ScrollTrigger.batch(".section", {
  onEnter: (batch) => {
    let targets = [];
    batch.forEach(el => {
      targets.push(...Array.from(el.querySelectorAll('h1, p')))
    });
    gsap.from(targets, {
      y: "100%",
      opacity: 0,
      stagger: 0.3,
      duration: 1.2,
      delay: 0.6,
      ease: "power4.out",
      stagger: {
        each: 0.3,
        from: "start",
        ease: "none"
      }
    });
  },
  batchMax: 1,
  start: "top bottom"
});

Hopefully this helps.

Happy Tweening!