Menu

Observers

Collection sugar over MutationObserver, IntersectionObserver and ResizeObserver. Standalone ESM also exported.

MutationObserverIntersectionObserverResizeObserver

observe

js
const obs = F("#app").observe((mutations) => {
  console.log(mutations);
}, { childList: true, subtree: true, attributes: true });

obs.disconnect(); // standard observer API

visible

js
F("#hero").visible((isVisible, entry) => {
  if (isVisible) F("#hero").addClass("in-view");
}, { threshold: 0.5 });

resize

js
F("#panel").resize((rect) => {
  console.log(rect.width, rect.height);
});

Standalone

js
import { observe, visible, resize } from "flash.js/observers";
observe("#app", cb);
visible("#hero", cb);
resize("#panel", cb);

Live demo

#obs-target — mutate me via buttons
—
Scroll target — visible: —

UI →

⌕