in packages/appear/src/web/visibility.ts [66:102]
function handleIntersect(entries: IntersectionObserverEntry[]) {
entries.forEach((entry) => {
const {
target,
boundingClientRect,
intersectionRatio,
} = entry;
// No `top` value in polyfill.
const currentY = boundingClientRect.y || boundingClientRect.top;
const beforeY = parseInt(target.getAttribute('data-before-current-y'), 10) || currentY;
// is in view
if (
intersectionRatio > 0.01 &&
!isTrue(target.getAttribute('data-appeared')) &&
!appearOnce(target as HTMLElement, VisibilityChangeEvent.appear)
) {
target.setAttribute('data-appeared', 'true');
target.setAttribute('data-has-appeared', 'true');
target.dispatchEvent(createEvent(VisibilityChangeEvent.appear, {
direction: currentY > beforeY ? VisibilityChangeDirection.up : VisibilityChangeDirection.down,
}));
} else if (
intersectionRatio === 0 &&
isTrue(target.getAttribute('data-appeared')) &&
!appearOnce(target as HTMLElement, VisibilityChangeEvent.disappear)
) {
target.setAttribute('data-appeared', 'false');
target.setAttribute('data-has-disappeared', 'true');
target.dispatchEvent(createEvent(VisibilityChangeEvent.disappear, {
direction: currentY > beforeY ? VisibilityChangeDirection.up : VisibilityChangeDirection.down,
}));
}
target.setAttribute('data-before-current-y', String(currentY));
});
}