React scroll animations.
9 KB. Zero deps.

'use client';
import { useEffect } from 'react';
import { scrollReveal } from 'svg-scroll-draw/reveal';

export function FeaturesSection() {
  useEffect(() => {
    const inst = scrollReveal('.feature-card', {
      preset:  'fadeUp',
      stagger: 0.1,
      once:    true,
    });
    return () => inst.destroy();
  }, []);

  return (
    <section>
      {features.map(f => (
        <div key={f.id} className="feature-card">{f.content}</div>
      ))}
    </section>
  );
}

'use client';
import { useEffect, useRef } from 'react';
import { scrollAnimate } from 'svg-scroll-draw';
// Or use the component wrapper:
import { ScrollAnimate } from 'svg-scroll-draw/react';

// Hook style (imperative)
export function HeroSection() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const inst = scrollAnimate(ref.current, {
      props: {
        opacity:   [0, 1],
        transform: ['translateY(40px)', 'translateY(0)'],
      },
      easing: 'ease-out',
      once:   true,
    });
    return () => inst.destroy();
  }, []);

  return <div ref={ref}>Hero content</div>;
}

// Component style (declarative)
export function HeroDeclarative() {
  return (
    <ScrollAnimate
      props={{ opacity: [0, 1], transform: ['translateY(24px)', 'translateY(0)'] }}
      easing="ease-out"
      once
    >
      <div>Hero content</div>
    </ScrollAnimate>
  );
}

'use client';
import { useEffect, useRef } from 'react';
import { scrollPin } from 'svg-scroll-draw/pin';

export function ProductSection() {
  const imageRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!imageRef.current) return;
    const inst = scrollPin(imageRef.current, {
      top:         80,                     // below fixed header
      pinDistance: window.innerHeight * 3,
      onEnter:     () => setActive(true),
      onLeave:     () => setActive(false),
    });
    return () => inst.destroy();
  }, []);

  return (
    <div style={{ display: 'flex', gap: 64 }}>
      <div ref={imageRef} style={{ width: '50%' }}>
        <img src="/product.webp" alt="Product" />
      </div>
      <div style={{ flex: 1 }}>
        {features.map(f => <FeatureBlock key={f.id} {...f} />)}
      </div>
    </div>
  );
}

import { ScrollCounter } from 'svg-scroll-draw/react';

export function StatsSection() {
  return (
    <div className="stats-grid">
      <ScrollCounter
        to={50000}
        format={n => Math.round(n).toLocaleString() + '+'}
        easing="ease-out"
        once
      />
      <ScrollCounter to={9} format={n => '~' + Math.round(n) + ' KB'} once />
    </div>
  );
}

import { ScrollText } from 'svg-scroll-draw/react';

export function Headline() {
  return (
    <ScrollText
      split="words"
      stagger={0.07}
      from={{ opacity: 0, y: 32 }}
      easing="ease-out"
      once
    >
      <h1>Animate everything on scroll.</h1>
    </ScrollText>
  );
}

import dynamic from 'next/dynamic';

// Option A: 'use client' component
// AnimatedHero.tsx starts with 'use client'
import { AnimatedHero } from '@/components/AnimatedHero';

// Option B: dynamic import with ssr: false
const AnimatedSection = dynamic(
  () => import('@/components/AnimatedSection'),
  { ssr: false }
);

export default function Page() {
  return (
    <>
      <AnimatedHero />
      <AnimatedSection />
    </>
  );
}