| 12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- import { resolveElements } from 'motion-dom';
- const thresholds = {
- some: 0,
- all: 1,
- };
- function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
- const elements = resolveElements(elementOrSelector);
- const activeIntersections = new WeakMap();
- const onIntersectionChange = (entries) => {
- entries.forEach((entry) => {
- const onEnd = activeIntersections.get(entry.target);
- /**
- * If there's no change to the intersection, we don't need to
- * do anything here.
- */
- if (entry.isIntersecting === Boolean(onEnd))
- return;
- if (entry.isIntersecting) {
- const newOnEnd = onStart(entry.target, entry);
- if (typeof newOnEnd === "function") {
- activeIntersections.set(entry.target, newOnEnd);
- }
- else {
- observer.unobserve(entry.target);
- }
- }
- else if (typeof onEnd === "function") {
- onEnd(entry);
- activeIntersections.delete(entry.target);
- }
- });
- };
- const observer = new IntersectionObserver(onIntersectionChange, {
- root,
- rootMargin,
- threshold: typeof amount === "number" ? amount : thresholds[amount],
- });
- elements.forEach((element) => observer.observe(element));
- return () => observer.disconnect();
- }
- export { inView };
|