🧩 How I Built a Lightweight Scroll Animation Library for React

aka_andy780 — Tue, 11 Nov 2025 14:31:26 +0000

When I started building my personal website, I wanted it to feel a little more alive. I didn’t want everything to just appear instantly. I wanted sections to slide in as you scroll, text to fade in at the right moment, and that smooth sense of motion that makes a site feel polished.

At first, I tried doing it with inline CSS animations, but it got messy fast. Every new component meant more lines of code, more tweaks, and more inconsistency. What I really wanted was something reusable — a clean React component I could drop anywhere and say, “animate this when it comes into view.”

I hadn’t heard about animation libraries like Framer Motion or React Spring yet. So I decided to figure it out myself. I started small, using the IntersectionObserver API to detect when elements enter the viewport, and then added a few transition effects.

That little experiment turned into two reusable components that I’ve been using in almost every project since.

⚙️ The idea

The goal was simple:

Keep it light and dependency-free
Make it easy to customize direction, delay, duration, and easing
Let it work automatically when something becomes visible
Make it reusable so I could drop it anywhere

So I built two components:

AnimatedElement – for single items
AnimationSequence – for staggering multiple elements one after another

They rely entirely on the browser’s built-in IntersectionObserver, which watches when something enters the screen. When it does, the component fades or slides it in with smooth transitions. No external libraries, no extra setup.

🎬 The result: React Scroll Reveal

After refining and reusing it across projects, I turned it into a small public library called
👉 React Scroll Reveal

With just a few lines, you can animate any element as it comes into view:

import { AnimatedElement, AnimationSequence } from "react-scroll-reveal";

function Example() {
  return (
    <AnimationSequence direction="up" baseDelay={200} staggerDelay={150}>
      <h2>Hello World</h2>
      <p>This fades in from below when scrolled into view.</p>
    </AnimationSequence>
  );
}

That’s it. No setup, no heavy libraries.

💡 Why it’s worth checking out?

It’s lightweight and doesn’t depend on any other animation tools.
It’s fully customizable — direction, delay, distance, duration, and easing.
It’s accessible, respecting the user’s motion preferences.
It works with any React setup, whether that’s Create React App, Next.js, or Vite.
Because it uses basic CSS transitions and native browser APIs, it’s smooth even on low-end devices.

🚀 What’s next

I’m planning to add parallax-style effects and new animation presets in the future.
If you want to contribute, suggest features, or just try it out, the repo is open and active:

🔗 GitHub: React Scroll Reveal

✨ Final thought

This project started because I wanted my personal site to look a bit nicer. I didn’t expect it to become a library that I’d reuse everywhere. Sometimes the tools you build for yourself end up being the most valuable ones to share.

If you love working with React and care about small, subtle details in your UI, I’d love for you to check it out and tell me what you think.

DEV Community: aka_andy780

🧩 How I Built a Lightweight Scroll Animation Library for React

⚙️ The idea

💡 Why it’s worth checking out?

🚀 What’s next

✨ Final thought