Trying to animate Elements in view at the same time with scrolltrigger

[altermajor]

What I'm trying to do is animate the cards that are stacked on top of each other by moving each card up on the page with scroll trigger and scrub set to true. But the problem is each card moves at same time because they're all in view. Is there any way around this? I've linked the codepen demo

See the Pen LYgyqKx by Majoralter (@Majoralter) on CodePen

[Rodrigo]

Hi @altermajor and welcome to the GreenSock forums!

 

In theses cases stagger is your best friend!  With stagger you can create a single GSAP instance controlled by ScrollTrigger and give each card a stagger equal or a bit bigger (maybe a few milliseconds) than the duration of the tween:

const cards = gsap.utils.toArray(".card");

cards.reverse();

gsap.to(cards, {
  y: -900,
  rotate: -90,
  duration: 0.5,
  stagger: 0.5,
  scrollTrigger: {
    trigger: ".section-two",
    start: "top top",
    end: "+=250%",
    markers: true,
    pin: true,
    scrub: true
  }
});

Here is a fork of your codepen:

See the Pen GRYmeOY by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[altermajor]

23 hours ago, Rodrigo said:

Hi @altermajor and welcome to the GreenSock forums!

 

In theses cases stagger is your best friend!  With stagger you can create a single GSAP instance controlled by ScrollTrigger and give each card a stagger equal or a bit bigger (maybe a few milliseconds) than the duration of the tween:

const cards = gsap.utils.toArray(".card");

cards.reverse();

gsap.to(cards, {
  y: -900,
  rotate: -90,
  duration: 0.5,
  stagger: 0.5,
  scrollTrigger: {
    trigger: ".section-two",
    start: "top top",
    end: "+=250%",
    markers: true,
    pin: true,
    scrub: true
  }
});

Here is a fork of your codepen:

 

 

 

Hopefully this helps.

Happy Tweening!

It works thanks! I also figured out an alternative solution as well!