Easy Scroll
Native CSS animations. Zero dependencies.
Lightweight scroll-driven animations using the native Scroll Timeline API. Pure performance, pure elegance.
Why Easy Scroll?
Three simple reasons
Easy to Install
One command. No configuration files. No setup headaches.
Easy to Use
Simple React components. Intuitive props. Works immediately.
Easy on Performance
Zero dependencies. Native browser APIs. Lightweight and fast.
Easy to install. Easy to use. Easy on performance.
That's why it's called Easy Scroll.
By The Numbers
Built for performance and simplicity
370+ developers are choosing Easy Scroll every week
Join the growing community building beautiful scroll experiences
Built for Speed
No bloat. No overhead. Just buttery smooth animations powered by native browser APIs.
Zero Dependencies
No GSAP. No Framer Motion. Pure native CSS Scroll Timeline API for maximum performance and minimal bundle size.
21 Animation Types
Fade, slide, scale, rotate, blur, flip, zoom, bounce — all the essentials with smooth easing curves and full customization.
React Hooks
Clean, composable hooks that feel natural in your React components. TypeScript-first with full type safety.
Try It Live
See the animations in action. Click replay to watch them again.
Reveal on Scroll
Code
<RevealOnScroll
animation="fadeInUp"
delay={200}
duration={600}
>
<div className="p-8 bg-purple-500/20
border border-purple-500/50 rounded-xl">
<h3 className="text-2xl font-bold">
Hello World!
</h3>
<p className="text-gray-300 mt-2">
This animates on scroll
</p>
</div>
</RevealOnScroll>Live Preview
Hello World!
This animates on scroll
Click Replay to see the animation again. In your project, these animations trigger automatically when elements scroll into view.
Stagger Children
Code
<StaggerChildren
animation="scaleUp"
staggerDelay={100}
className="grid grid-cols-3 gap-4"
>
<div className="p-6 bg-pink-500/20
border border-pink-500/50 rounded-xl
text-center">
Card 1
</div>
<div className="p-6 bg-pink-500/20
border border-pink-500/50 rounded-xl
text-center">
Card 2
</div>
<div className="p-6 bg-pink-500/20
border border-pink-500/50 rounded-xl
text-center">
Card 3
</div>
</StaggerChildren>Live Preview
Click Replay to see the animation again. In your project, these animations trigger automatically when elements scroll into view.
Count Animation
Code
<CountOnScroll
from={0}
to={9999}
duration={2000}
formatFn={(n) => n.toLocaleString()}
className="text-6xl font-black
bg-gradient-to-r from-blue-400
to-cyan-400 bg-clip-text
text-transparent"
/>Live Preview
Click Replay to see the animation again. In your project, these animations trigger automatically when elements scroll into view.
See It In Action
Watch these animations loop continuously to see the smooth effects.
Reveal on Scroll
Elements fade in smoothly as they enter the viewport. Control timing, easing, and threshold with simple, intuitive props.
Stagger Children
Animate lists and grids with cascading delays. Each child animates in sequence for a polished, professional effect.
Count Animations
Numbers that count up when scrolled into view. Perfect for stats, metrics, and impact sections that demand attention.
The smoothest scroll animations. Native performance, zero overhead.
Everything You Need
TypeScript First
Fully typed with strict mode. IntelliSense everywhere.
SSR Ready
Works perfectly with Next.js App Router and server components.
Tiny Bundle
Less than 3KB gzipped. Your users will thank you.
Mobile Optimized
Smooth 60fps animations on all devices.
Customizable
Full control over timing, easing, and thresholds.
Accessible
Respects prefers-reduced-motion for better UX.
Ready to Elevate?
Install @chemmangat/easy-scroll and start building beautiful scroll experiences today.