Framer Motion Animate on Scroll: whileInView and useInView

Reveal on scroll

import { motion } from 'motion/react';

<motion.section
  initial={{ opacity: 0, y: 24 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.4 }}
/>

Stagger children

const list = { visible: { transition: { staggerChildren: 0.08 } } };
const item = { hidden: { opacity: 0, y: 12 }, visible: { opacity: 1, y: 0 } };

<motion.ul variants={list} initial="hidden" whileInView="visible" viewport={{ once: true }}>
  {items.map(i => <motion.li key={i.id} variants={item} />)}
</motion.ul>

useInView for custom logic

const ref = useRef(null);
const isInView = useInView(ref, { once: true });
useEffect(() => { if (isInView) startCounter(); }, [isInView]);

Scroll-linked animation

For a progress bar or parallax that follows the scroll position, use useScroll to get scrollYProgress and useTransform to map it to a style. The browser also has native scroll-driven animations in CSS, which can run off the main thread where supported.

Keep scroll reveals subtle and short. Content that waits for an animation before it is readable frustrates users, and people with prefers-reduced-motion should see it immediately.

Frequently asked questions

Why does whileInView fire again when I scroll back?

Set viewport={{ once: true }} so it only runs the first time.

How do I trigger the animation earlier?

Use viewport.margin, for example margin: "0px 0px -100px 0px", or lower amount.

Does whileInView hurt performance?

It uses IntersectionObserver, which is cheap. Animate transform and opacity, not layout properties.

Can I do this without a library?

Yes. IntersectionObserver plus a CSS class works, and CSS scroll-driven animations cover many cases.

A little space for good ideas.

How do I animate an element when it scrolls into view with Framer Motion?

Core Takeaway