Preventing initial onIntersection method call

[harun911]

Hello k3nsei,

first of all, thank you for this beautiful library to make it easy to use of the intersection observer api.

I want to use this library to render angular animations when an element becomes visible in the viewport, and run the animation only once after the user has seen it. However I'm experiencing an issue which I hope you can clarify or help me with.

The issue arises on initial load of the page, the onIntersection method gets called after page load.
When I console.log the onIntersection method, I can see the target logged with the value of the visible property.
This is first true and then reverts to false. When I have 5 elements which have the inViewPort tag, I can see 5 calls being made on initial load, even when they are not visible within the viewport at that moment. How can I prevent this initial call from happening for the elemens that are not visible? Or is there another way you would advise to setup the component?

I have followed the installation tutorial as available on the github page.

Thanks in advance!

[k3nsei]

@harun911 Hi this is weird behavior on demo code it's always false when it's not visible. For example this could be fault of CSS recalculation or wrong options like threshold. But overall its hard to guess it without seeing a code.

You can always use IntersectionObserverEntry directly from InViewportMetadata to decide when you elements are visible. There are properies like isIntersecting and intersectionRatio.

[GiannisS]

Hello, I have the exact same issue as @harun911! Did you find a solution?
That's my logs when the modal loads for the first time:

That's the code:

There are 20 items in a list. Only 6 are visible. The first 20 logs all have isIntersecting: true then there are 14 more logs with isIntersecting: false(which is correct, 20-6=14).

The weird thing is it only happens on the first load of modal. If I close and open the modal again it works as expected.

[harun911]

@GiannisS I did actually find a solution. And it was by sheer luck.
I was using the OnIntersection method on images I tried to animate on a webpage.
At a certain point, somehow my browser was lagging and I could see the images load sequentially one by one, and saw them pushed towards the bottom of the page. Hence, the library was correct, the images were indeed first visible before they disappeared to the bottom of the page. That was an eye-opener. Normally, this sequential loading of the elements happens so fast, that it's not visible to the naked eye and your reasoning gets clouded.
So, I'm guessing you're running into the same issue I had, the elements loading sequentially, but loading so fast, that they do pass the IntersectionObserver.

[GiannisS]

Oh I see, that actually would make so much sense. Thanks for sharing and for saving me so much time.

[harun911]

You're welcome man! Took me several hours of debugging, haha, I'm glad I could save you that time ;)

[k3nsei]

I'm closing it, issue was with lack of pre-defined size for images.