How do I make items with the same class appear consecutively on GSAP with scrollTrigger?

[VladBeltz]

It's easy when use the wow.js library
But I need to do it on GSAP.

 

const collageItems = document.querySelectorAll(".collage__item");
gsap.from(collageItems, {
    scrollTrigger: {
      trigger: collageItems,
    },
    autoAlpha: 0,
    y: 150,
    duration: 1.5,
    ease: "power1.out"
});

When I write the code above, the trigger for all elements is the very first element with the .collage__item class, i.e. all elements with that class start popping up as soon as the first one appears in the window area.

 

How can I make the popup effect be applied to each item specifically?

[GreenSock]

I assume you meant to do this?: 

const collageItems = gsap.utils.toArray(".collage__item");

// loop through and create an animation for each one instead of one animation for all of them
collageItems.forEach(item => {
  gsap.from(item, {
    scrollTrigger: {
      trigger: item,
    },
    autoAlpha: 0,
    y: 150,
    duration: 1.5,
    ease: "power1.out"
  });
});

Right? 

[VladBeltz]

  

17 minutes ago, GreenSock said:

Right?

 

Yeh! Thanks a lot.

But do I have to use 'to' instead of 'from' cause initially my elements have 'opacity: 1'. Do I to initialize them as with 'opacity: 0'? It would be very inconvenient for me. Now the elements reach the bottom of the window with 'opacity: 1', then the effect is applied to them :(

[Rodrigo]

Hi,

 

Absolutely, here is a simple example using a from instance:

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

 

Hopefully this helps.

Happy Tweening!

[VladBeltz]

Quote

start: "top+=150 85%"

 

Why go to all this trouble? It looks like simple stagger. Doesn't it? Same stuff I guess.

[GreenSock]

1 hour ago, VladBeltz said:

Why go to all this trouble? It looks like simple stagger. Doesn't it? Same stuff I guess.

It's not exactly the same, but you could probably do something very similar like that, yes. 

 

For the record, there's absolutely no reason to have the "top+=" in the values because they're always measured from the top anyway. 

// wasteful
start: "top+=150 85%",
end: "top+=150 60%"

// better
start: "150px 85%",
end: "150px 60%"

 

[Rodrigo]

Hi,

14 hours ago, VladBeltz said:

Why go to all this trouble? It looks like simple stagger. Doesn't it? Same stuff I guess.

 

The idea is to offset the start and end points by the amount of pixels you have in your from instance. Like that the start and end points match the final position of the element, which is normally what most users are after. I updated the codepen example to reflect that:

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

 

Hopefully this clear things up.

Happy Tweening!