forked from ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI
28 lines
607 B
TypeScript
28 lines
607 B
TypeScript
|
import { prefersReducedMotion, syncopatedDelay } from './tokens';
|
||
|
|
|
||
|
|
export function reveal(node: HTMLElement, index = 0) {
|
||
|
|
if (prefersReducedMotion()) return;
|
||
|
|
|
||
|
|
node.classList.add('reveal');
|
||
|
|
node.style.setProperty('--d', `${syncopatedDelay(index)}ms`);
|
||
|
|
|
||
|
|
const observer = new IntersectionObserver(
|
||
|
|
(entries) => {
|
||
|
|
for (const entry of entries) {
|
||
|
|
if (entry.isIntersecting) {
|
||
|
|
node.classList.add('is-visible');
|
||
|
|
observer.disconnect();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ threshold: 0.1, rootMargin: '0px 0px -8% 0px' }
|
||
|
|
);
|
||
|
|
observer.observe(node);
|
||
|
|
|
||
|
|
return {
|
||
|
|
destroy() {
|
||
|
|
observer.disconnect();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|