Fade-in elements on scroll

Problem. Reveal sections as they enter the viewport, but only animate for users without reduced-motion.

Solution. Use inView and respect prefersReducedMotion.

import { inView, animate } from '@bquery/bquery/motion';
import { prefersReducedMotion } from '@bquery/bquery/a11y';

const reducedMotion = prefersReducedMotion();

document.querySelectorAll<HTMLElement>('.reveal').forEach((el) => {
  inView(el, () => {
    if (reducedMotion.value) { el.style.opacity = '1'; return; }
    animate(el, { opacity: [0, 1], transform: ['translateY(20px)', 'translateY(0)'] }, { duration: 300 });
  }, { once: true });
});

Why it works. inView uses IntersectionObserver and only fires once per element when { once: true }; reduced-motion users skip the keyframe animation entirely.

Motion — inView
Motion — animate
A11y — prefersReducedMotion
Longer worked example: Examples & Recipes — Fade-in on scroll

Fade-in elements on scroll ​

Related ​

Fade-in elements on scroll

Related