ScrollTrigger - Start staggering from elements in viewport

[ManolisG]

Hello 

 

I have a grid of, let's say 100 items (.grid-post) and I use the batch() method of scrollTrigger this way:

 

ScrollTrigger.batch(".grid-post", {
  onEnter: elements => {
    gsap.from(elements, {
      y: 60,
      autoAlpha: 0,
      stagger: 0.1,
      duration: 0.5,
    });
  },
  once: true
});

It works just fine when you first load the page and start scrolling down.

 

However when you have scrolled further down the page and then you hit refresh, since the browser remembers your scroll position, you have to wait for all the animations to happen from the beginning of the grid causing a big delay in actually viewing the items that are in viewport. 

 

Is there any way of using the isInViewport() with the batch() method to just limit the batch with elements that are in viewport downwards? All the previous ones can be shown without animation as i'm not interested in onEnterBack animations.  

 

Unfortunately, I cant give you a CodePen as it doesn't keep the scroll position when you hit refresh on the browser and I hope you understand what I'm after.

 

Any help would be appreciated as I'm quite fresh to GSAP. 

 

Thanks!

 

 

[akapowl]

Welcome to the GreenSock forums @ManolisG

 

Have you tried setting a batchMax ?

 

That helps for me. If it doesn't for you though, I think we'll have to wait for somebody who knows his way around .batch() a little better than me  

 

See the Pen eYyjqja by akapowl (@akapowl) on CodePen

 

• batchMax [Integer | Function] - The maximum number of elements that should be allowed in each batch. When a batch is full, it will immediately fire its callback and begin collecting the next batch and if that fills immediately as well it will fire immediately. So if, for example, you set batchMax: 3 and then 9 elements all enter the viewport at roughly the same time, 3 batches would be created, thus the onEnter callback would get fired 3 times in quick succession (not waiting for the interval to elapse). If you have a responsive layout that may require changing of the batchMax when the page resizes, you can use a function instead that returns an Integer. That will get called whenever ScrollTrigger fires a "refresh" (which occurs when the viewport resizes, when an inactive tab becomes active, etc.). Like batchMax: () => { ...your logic here... return integer }

[GreenSock]

I think you're looking for this: 

ScrollTrigger.config({limitCallbacks: true});

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

From the docs: 

• limitCallbacks [Boolean] - if true, ScrollTrigger will only fire callbacks (onEnter, onLeave, onEnterBack, onLeaveBack) when the active state is toggled. For example, if you have a grid of 100 elements that each have a ScrollTrigger associated with them, and only 10 are on the screen at any given time and then you scroll down so that only boxes 50 - 60 are showing and reload the page, limitCallbacks: true would skip the onEnter for elements 1-49. The default limitCallbacks value is false meaning that the onEnter for elements 1-60 would all fire in this scenario. 

 

[ManolisG]

Thank you very much both! 

 

Apparently i must have missed that in the documentation.