x-intersect:leave.full and .half and default or .any

[mokhosh]

I think we can use x-intesect for implementing some cool features that were very complicated before. Like positioning a popup if part of it is not visible on the page.
Right now x-intesect:leave only triggers when 100% of the element is hidden, and you cannot control it like normal x-intersect with modifiers, otherwise we could do things like x-intersect:leave="$el.styles.bottom = 0".

Would love to hear your thoughts on how useful we can make this and how far we can go with this idea.

[SimoTod]

I don't think it's possible. X-intersect.half triggers when 50% of the element intersects the viewport. The plugin uses the interectionObserver api which doesn't know if you are scrolling in or out the viewport (basically it fires both ways). The only thing you can detect is when the element leaves the viewport in full (threshold = 0 + isInterecting = false).

[mokhosh]

Ok i did more testing and it can detect partial leave, but the problem is it only fires after you scroll, it doesn't fire on show/hide for example which is a problem.

Here's a pen if you wanna tinker: https://codepen.io/mokhosh/pen/OJxgVyL

[SimoTod]

Mmmh I'm not sure, i have a feeling that it won't detect it properly in some cases. (for example, if you scroll really slowly 1 px at the time, it may fire when the intersection ratio is 1 even if it's about to leave. I might be mistaken though). For half, are you planning to check if the ratio is < 0.5

[mokhosh]

I didn't check the really slow scroll 😁, but my goal was to create a visibility aware popup menu, which doesn't seem as strait forward as I thought.

I think I'll have to dig into libraries that do this and see if there's another way of making it easier with alpine. Intersect doesn't seem the way forward for this use case.

Although I think it's still useful to extend the functionality, maybe for other situations.