v2.0.0

Scroll animations
that don't cost
you anything.

Zero dependencies. Uses IntersectionObserver and CSS transitions natively. Wrap a component, pick an animation, ship it.

npm i @chemmangat/easy-scrollRead the docs
0
animations
0
dependencies
0.0KB
gzipped

Five components.
Everything you need.

RevealOnScroll — animate anything on scroll.

StaggerChildren — cascade animations across lists.

ScrollProgress — page progress indicator.

CountOnScroll — animated number counters.

ParallaxSection — depth through parallax.

page.tsx
import { RevealOnScroll } from
  '@chemmangat/easy-scroll'

<RevealOnScroll
  animation="fadeInUp"
  delay={100}
  onAnimationComplete={onDone}
>
  <YourComponent />
</RevealOnScroll>

// any HTML element, no div wrapper
<RevealOnScroll as="li"
  animation="slideInLeft"
>
  <span>list item</span>
</RevealOnScroll>

New in v2.0

Animation callbacks

onAnimationStart and onAnimationComplete. Hook into the lifecycle without extra wrappers or state hacks.

Polymorphic as prop

Render as any element. No more wrapping a li in a div just to animate it.

prefers-reduced-motion

Automatically respected. Elements appear instantly for users who prefer reduced motion — no flicker.

16 new animations

riseFade, spiralIn, popIn, glide variants, rollIn, stretchIn, and more. Total: 37.

All 37 animations

fadeInfadeInUpfadeInDownfadeInLeftfadeInRightslideInLeftslideInRightslideInUpslideInDownscaleUpscaleDownzoomInzoomOutbounceInrotateInrotateInLeftrotateInRightblurInflipInflipInXflipInYswingIndropInriseFadeexpandWidthshrinkIntiltLefttiltRightpopInglideUpglideDownglideLeftglideRightspiralInstretchInrollInLeftrollInRight

16 new in v2.0 — highlighted above