viewmotion

React

viewmotion-react

The React adapter provides a useMotion hook that attaches scroll-reveal animations to refs.

Installation 

npm install viewmotion-react

useMotion hook 

import { useMotion } from "viewmotion-react";

function Hero() {
  const ref = useMotion({ preset: "fade-up", delay: 200 });
  return <h1 ref={ref}>Hello</h1>;
}

Hook parameters

PropertyTypeDescription
presetstringAnimation preset name
delaynumberDelay before animation (ms)
durationnumberAnimation duration (ms)

Full example 

import { useMotion } from "viewmotion-react";

export default function Features() {
  const titleRef = useMotion({ preset: "fade-up" });
  const card1Ref = useMotion({ preset: "fade-up", delay: 100 });
  const card2Ref = useMotion({ preset: "fade-up", delay: 200 });

  return (
    <section>
      <h2 ref={titleRef}>Features</h2>
      <div ref={card1Ref}>Card 1</div>
      <div ref={card2Ref}>Card 2</div>
    </section>
  );
}

Stagger with lists

For staggered lists, compute the delay from the array index: 

import { useMotion } from "viewmotion-react";

const items = ["Feature A", "Feature B", "Feature C"];

export default function FeatureList() {
  return (
    <ul>
      {items.map((item, i) => {
        const ref = useMotion({ preset: "fade-up", delay: i * 80 });
        return (
          <li key={item} ref={ref}>
            {item}
          </li>
        );
      })}
    </ul>
  );
}

Tip

viewmotion-react initializes its own observer when the hook mounts. You don’t need to call initMotion() separately when using the React adapter.

Configuration Vue adapter