37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useEffect } from 'react';
|
|
|
|
/**
|
|
* Observes all `.scroll-reveal` elements in the DOM and adds the `revealed`
|
|
* class when they scroll into view. Works with the stagger-1 … stagger-10
|
|
* utility classes defined in index.css for sequenced entrance animations.
|
|
*
|
|
* Call once at the top of a lesson component:
|
|
* useScrollReveal();
|
|
*/
|
|
export default function useScrollReveal() {
|
|
useEffect(() => {
|
|
const sel = [
|
|
'.scroll-reveal:not(.revealed)',
|
|
'.scroll-reveal-left:not(.revealed)',
|
|
'.scroll-reveal-right:not(.revealed)',
|
|
'.scroll-reveal-scale:not(.revealed)',
|
|
].join(',');
|
|
const els = document.querySelectorAll(sel);
|
|
if (!els.length) return;
|
|
|
|
const obs = new IntersectionObserver(
|
|
entries =>
|
|
entries.forEach(e => {
|
|
if (e.isIntersecting) {
|
|
e.target.classList.add('revealed');
|
|
obs.unobserve(e.target);
|
|
}
|
|
}),
|
|
{ threshold: 0.12, rootMargin: '0px 0px -60px 0px' },
|
|
);
|
|
|
|
els.forEach(el => obs.observe(el));
|
|
return () => obs.disconnect();
|
|
}, []);
|
|
}
|