@chemmangat/easy-scroll

Lightweight scroll-driven animations using native CSS Scroll Timeline API. Zero dependencies. Pure performance.

Installation

npm install @chemmangat/easy-scroll

Quick Start

import { RevealOnScroll, ScrollProgress } from '@chemmangat/easy-scroll';

export default function Page() {
  return (
    <>
      <ScrollProgress color="#6366f1" height={3} />
      
      <RevealOnScroll animation="fadeInUp" delay={200}>
        <h1>Hello World</h1>
      </RevealOnScroll>
    </>
  );
}

Components

<RevealOnScroll>

<RevealOnScroll 
  animation="fadeInUp"
  delay={200}
  duration={600}
  threshold={0.1}
  once={true}
>
  <YourContent />
</RevealOnScroll>

<ScrollProgress>

<ScrollProgress color="#6366f1" height={3} />

<ParallaxSection>

<ParallaxSection speed={0.5}>
  <YourContent />
</ParallaxSection>

<CountOnScroll>

<CountOnScroll 
  from={0} 
  to={10000} 
  formatFn={(n) => n.toLocaleString()}
/>

<StaggerChildren>

<StaggerChildren animation="scaleUp" staggerDelay={100}>
  <Card />
  <Card />
  <Card />
</StaggerChildren>

Animation Types

• fadeIn - Fade in
• fadeInUp - Fade in + slide up
• fadeInDown - Fade in + slide down
• slideInLeft - Slide from left
• slideInRight - Slide from right
• scaleUp - Scale up
• scaleDown - Scale down
• rotateIn - Rotate in
• blurIn - Blur to clear

License

MIT