Engineering

Building performant scroll animations

Keep scroll motion on the compositor—and test it on a phone that is not yours

February 3, 2025

By Manweba

Janky motion is worse than none. Users feel dropped frames before they notice your easing curve. The craft is knowing which properties stay on the GPU and how to schedule work.

Animate transform and opacity

Layout-affecting properties (width, height, top, margin) force style → layout → paint every frame. Transform and opacity can often stay on the compositor.

Same visual move, different cost: prefer translate over left.

Compositor-friendly vs layout thrash

jsx

1import { motion, useScroll, useTransform } from 'motion/react';
2
3// Prefer this
4export function GoodMotion() {
5  return (
6    <motion.div
7      initial={{ opacity: 0, y: 40 }}
8      whileInView={{ opacity: 1, y: 0 }}
9      viewport={{ once: true }}
10      transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
11    >
12      Smooth entrance
13    </motion.div>
14  );
15}
16
17// Avoid this for scroll-linked motion
18export function BadMotion() {
19  return (
20    <motion.div
21      initial={{ height: 0, marginTop: 40 }}
22      animate={{ height: 'auto', marginTop: 0 }}
23    >
24      Forces layout each frame
25    </motion.div>
26  );
27}
28
29export function ScrollLinked({ children }) {
30  const { scrollYProgress } = useScroll();
31  const y = useTransform(scrollYProgress, [0, 1], [0, -80]);
32  const opacity = useTransform(scrollYProgress, [0, 0.6, 1], [1, 1, 0]);
33
34  return <motion.div style={{ y, opacity }}>{children}</motion.div>;
35}

Loading code…

useScroll + useTransform

Motion’s scroll hooks give you normalized progress without hand-rolled listeners. Map that progress to the few properties that matter; do not animate everything “because we can.”

Element-scoped scroll mapping

jsx

1import { useRef } from 'react';
2import {
3  motion,
4  useScroll,
5  useSpring,
6  useTransform,
7} from 'motion/react';
8
9export function AdvancedScrollSection() {
10  const ref = useRef(null);
11  const { scrollYProgress } = useScroll({
12    target: ref,
13    offset: ['start end', 'end start'],
14  });
15
16  const smooth = useSpring(scrollYProgress, {
17    stiffness: 100,
18    damping: 30,
19  });
20
21  const y = useTransform(smooth, [0, 1], [60, -60]);
22  const opacity = useTransform(smooth, [0, 0.2, 0.8, 1], [0, 1, 1, 0]);
23  const counterRotate = useTransform(smooth, [0, 1], [0, -20]);
24
25  return (
26    <section ref={ref} className="flex min-h-screen items-center justify-center">
27      <motion.div
28        style={{ y, opacity }}
29        className="flex h-56 w-56 items-center justify-center rounded-3xl bg-teal-800"
30      >
31        <motion.p className="text-white" style={{ rotate: counterRotate }}>
32          Scroll
33        </motion.p>
34      </motion.div>
35    </section>
36  );
37}

Loading code…

Viewport triggers via Intersection Observer

whileInView (Intersection Observer under the hood) beats scroll listeners for one-shot entrances. Use once: true, a negative margin to start early, and shared variants so parents stagger children without N timelines.

Staggered feature grid

jsx

1import { motion } from 'motion/react';
2
3const fadeUp = {
4  hidden: { opacity: 0, y: 32 },
5  visible: {
6    opacity: 1,
7    y: 0,
8    transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] },
9  },
10};
11
12export function FeatureGrid({ features }) {
13  return (
14    <motion.div
15      initial="hidden"
16      whileInView="visible"
17      viewport={{ once: true, margin: '-80px', amount: 0.25 }}
18      variants={{
19        hidden: {},
20        visible: { transition: { staggerChildren: 0.12 } },
21      }}
22      className="grid gap-6 md:grid-cols-3"
23    >
24      {features.map((feature) =>=(
25        <motion.div
26          key={feature.title}
27          variants={fadeUp}
28          className="rounded-2xl border border-white/10 p-6"
29        >
30          <h3 className="mb-2 text-xl">{feature.title}</h3>
31          <p className="text-white/60">{feature.description}</p>
32        </motion.div>
33      ))}
34    </motion.div>
35  );
36}

Loading code…

Batch and respect reduced motion

One parent stagger is cheaper than twenty independent timelines. Cap how many elements move at once—especially on mobile.

Honor prefers-reduced-motion. A static layout that still communicates beats a beautiful stutter.

Adaptive motion gate

jsx

1import { useEffect, useState } from 'react';
2import { motion, useReducedMotion } from 'motion/react';
3
4export function AdaptiveFade({ children }) {
5  const prefersReduced = useReducedMotion();
6  const [lowPower, setLowPower] = useState(false);
7
8  useEffect(() =>={
9    const connection = navigator.connection;
10    setLowPower(
11      Boolean(connection?.?aveData) |||        connection?.?ffectiveType ===='2g' |||        connection?.?ffectiveType ===='slow-2g',
12    );
13  }, []);
14
15  const animate = !prefersReduced &&&!lowPower;
16
17  return (
18    <motion.div
19      initial={animate ? { opacity: 0 } : false}
20      animate={animate ? { opacity: 1 } : undefined}
21      transition={animate ? { duration: 0.45 } : undefined}
22    >
23      {children}
24    </motion.div>
25  );
26}

Loading code…

Profile on real devices

Your laptop lies. Record a scroll pass in Chrome Performance on a mid-range Android or throttled CPU. Red marks mean cut properties, cut count, or cut the effect.

Final thoughts

Performance is the product surface users feel first. Stay on transform/opacity, scope scroll work, batch entrances, and verify on hardware that matches your audience—not your workstation.

Motion cost ladder

From static baseline to spring — feel the difference

Live Preview

No Animation

CodeStep 1 of 4

1<div className="card">Static Element</div>

Loading code…

Engineering

Next.js vs WordPress for a marketing site in 2026

When WordPress is enough—and when a custom Next stack is the better business decision

Read Article

Product

Website SEO that actually moves leads (not just rankings)

Structure, speed, intent pages, and tracking—SEO as a growth system, not a checklist theater