Scrolltrigger animation and stagger not working as expected

[Vander]

Hi there!
 

I'm trying to controll stagger animation with the scroll, triggering the animation when, for example, the top of the wrapper containers hits the 75% of the screen and ending it when it reaches the center of the screen, but it triggers when you reload the page.

 

I'd like to link the animation to the scroll

 

Also is there any way more than one square can be hidden? now i'm hiding them one by one and i'd like to stagger them at least 5 at the same time, is it possible?

 

Many thanks for your help

See the Pen LYgbojz?editors=0110 by EricCV (@EricCV) on CodePen

[Cassie]

Hi there, you had some typos 

See the Pen XWxNLoP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

it's scrollTrigger not Scrolltrigger, and you needed to define a class for your selector at the top.

If you want to stagger 5 at a time you could look into writing your own stagger logic, I'm afraid I'm not entirely sure what that would look like, but here's the info from the docs -
 

Quote

 

Function

gsap.to(".box", {
  y: 100,
  stagger: function(index, target, list) {
    // your custom logic here. Return the delay from the start (not between each)
    return index * 0.1;
  }
});

Only use this if you need to run custom logic for distributing the staggers. The function gets called once for each target/element in the Array and should return the total delay from the starting position (not the amount of delay from the previous tween's start time). The function receives the following parameters:

index [Integer] - The index value from the list.
target [Object] - The target in the list at that index value.
list [Array | NodeList] - The targets array (or NodeList).

 

 

I hope this helps set you off in the right direction!

[Vander]

36 minutes ago, Cassie said:

Hi there, you had some typos 
 

 

 

it's scrollTrigger not Scrolltrigger, and you needed to define a class for your selector at the top.

If you want to stagger 5 at a time you could look into writing your own stagger logic, I'm afraid I'm not entirely sure what that would look like, but here's the info from the docs -
 

 

I hope this helps set you off in the right direction!

Many thanks @Cassie I didn't see the typos! Yeah i'll go further with the stagger logic thanks