How to not trigger elements above the viewport when reloading the page at the bottom

[Grasmachien]

I'm creating a photo gallery and I'm using Scrolltrigger to lazy load the thumbnails.
I'm using the onEnter method for this.
My problem is that when I reload the page at the bottom of the grid/gallery all images above the viewport (top of the page) get loaded as well since the onEnter callback triggers for all of them.

Is there a way to prevent this?
Should I just use the intersection observer for this?
 

I have added a Codepen just to show what I'm doing but I thing the refresh at a certain page position does not work on Codepen so it might not be directly reproducable over there. 

See the Pen dymXJBw by grasmachien (@grasmachien) on CodePen

[Cassie]

Hey there! You could use isInViewPort to find out if the element is already in view.

See the Pen BarzrRY?editors=0011 by GreenSock (@GreenSock) on CodePen

 

Quote

 

ScrollTrigger.isInViewport( Element:Element | String, proportion:Number, horizontal:Boolean ) : Boolean

 

Returns true if the element is in the viewport. You can optionally specify a minimum proportion, like ScrollTrigger.isInViewport(element, 0.2) would only return true if at least 20% of the element is in the viewport.

 

Hope this helps!
 

[GreenSock]

If I understand your question correctly, you could also just:

ScrollTrigger.config({limitCallbacks: true});

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