76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
|
|
const REVEAL_SELECTOR = '[data-reveal]';
|
|
|
|
export const MotionController = () => {
|
|
useEffect(() => {
|
|
const elements = Array.from(
|
|
document.querySelectorAll<HTMLElement>(REVEAL_SELECTOR),
|
|
);
|
|
|
|
if (!elements.length) return;
|
|
|
|
const reduceMotion = window.matchMedia(
|
|
'(prefers-reduced-motion: reduce)',
|
|
).matches;
|
|
|
|
document.querySelectorAll<HTMLElement>('[data-reveal-group]').forEach((group) => {
|
|
group.querySelectorAll<HTMLElement>(REVEAL_SELECTOR).forEach((element, index) => {
|
|
element.style.setProperty(
|
|
'--reveal-delay',
|
|
`${Math.min(index, 5) * 50}ms`,
|
|
);
|
|
});
|
|
});
|
|
|
|
if (reduceMotion) {
|
|
elements.forEach((element) => {
|
|
element.dataset.visible = 'true';
|
|
});
|
|
document.documentElement.dataset.motionReady = 'true';
|
|
return () => {
|
|
delete document.documentElement.dataset.motionReady;
|
|
};
|
|
}
|
|
|
|
const initialRevealBoundary = window.innerHeight * 0.92;
|
|
elements.forEach((element) => {
|
|
const bounds = element.getBoundingClientRect();
|
|
if (bounds.top <= initialRevealBoundary && bounds.bottom >= 0) {
|
|
element.dataset.visible = 'true';
|
|
}
|
|
});
|
|
|
|
document.documentElement.dataset.motionReady = 'true';
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (!entry.isIntersecting) return;
|
|
|
|
const element = entry.target as HTMLElement;
|
|
element.dataset.visible = 'true';
|
|
observer.unobserve(element);
|
|
});
|
|
},
|
|
{
|
|
rootMargin: '0px 0px -8% 0px',
|
|
threshold: 0.12,
|
|
},
|
|
);
|
|
|
|
elements.forEach((element) => {
|
|
if (element.dataset.visible !== 'true') observer.observe(element);
|
|
});
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
delete document.documentElement.dataset.motionReady;
|
|
};
|
|
}, []);
|
|
|
|
return null;
|
|
};
|