motionkit

Lightweight React animation presets — 50+ animations in <5KB. CSS-based, no Framer Motion needed.

Features

• 🎯 50+ presets — fade, slide, scale, bounce, rotate, flip, zoom, and more
• 🪶 <5KB gzipped — CSS animations, no JS animation loop
• 🎨 Stagger support — animate children sequentially
• 👁️ Viewport trigger — animate on scroll with IntersectionObserver
• ♿ Reduced motion — respects prefers-reduced-motion
• 🔧 TypeScript first-class support
• 📱 Mobile-safe — works everywhere

Installation

npm install @fauzitech/motionkit

Quick Start

import { Motion } from '@fauzitech/motionkit';

function App() {
  return (
    <Motion preset="fadeInUp" duration={500}>
      <h1>Hello World</h1>
    </Motion>
  );
}

Usage

Basic Animation

<Motion preset="fadeInUp" duration={500}>
  <div>I fade in from below</div>
</Motion>

Stagger Children

<Motion preset="fadeInUp" stagger={100}>
  <div>Item 1</div>  {/* 0ms delay */}
  <div>Item 2</div>  {/* 100ms delay */}
  <div>Item 3</div>  {/* 200ms delay */}
</Motion>

Trigger on Scroll

<Motion preset="fadeInUp" triggerOnView>
  <div>I animate when scrolled into view</div>
</Motion>

Custom Element

<Motion preset="slideInLeft" as="section" className="hero">
  <div>I'm a section element</div>
</Motion>

All Options

<Motion
  preset="bounceIn"        // Animation preset
  duration={500}            // Duration in ms
  delay={200}               // Delay in ms
  easing="ease-out"         // Easing function
  fillMode="both"           // Fill mode
  iterations={1}            // Play count ('infinite' for loop)
  stagger={100}             // Stagger children by N ms
  triggerOnMount={true}     // Trigger on mount
  triggerOnView={false}     // Trigger on viewport enter
  threshold={0.1}           // IntersectionObserver threshold
  as="div"                  // Element type
  className="my-class"      // CSS class
  style={{ color: 'red' }}  // Inline styles
  onComplete={() => {}}     // Animation complete callback
>
  <div>Content</div>
</Motion>

Presets

Fade

fadeIn fadeOut fadeInUp fadeInDown fadeInLeft fadeInRight fadeOutUp fadeOutDown fadeOutLeft fadeOutRight

Slide

slideInUp slideInDown slideInLeft slideInRight slideOutUp slideOutDown slideOutLeft slideOutRight

Scale

scaleIn scaleOut scaleInCenter scaleOutCenter

Bounce

bounceIn bounceOut bounceInUp bounceInDown bounceInLeft bounceInRight

Rotate

rotateIn rotateOut rotateInCenter rotateOutCenter

Flip

flipInX flipInY flipOutX flipOutY

Zoom

zoomIn zoomOut zoomInUp zoomInDown

Special

shakeX shakeY swing tada wobble jello heartbeat flash rubberBand headShake

Hooks

useInView

import { useInView } from '@fauzitech/motionkit';

function Section() {
  const { ref, isInView } = useInView({ threshold: 0.2 });
  
  return (
    <div ref={ref}>
      {isInView && <div>I'm visible!</div>}
    </div>
  );
}

useStagger

import { useStagger } from '@fauzitech/motionkit';

function List() {
  const delays = useStagger(5, 100); // 5 items, 100ms stagger
  
  return (
    <ul>
      {delays.map((style, i) => (
        <li key={i} style={style}>Item {i + 1}</li>
      ))}
    </ul>
  );
}

Utilities

getAnimationCSS

Get CSS animation string for manual use:

import { getAnimationCSS } from '@fauzitech/motionkit';

const animation = getAnimationCSS('fadeInUp', { duration: 500, delay: 200 });
// → "mk-fadeInUp 500ms ease 200ms 1 both"

getPresets

Get all available presets:

import { getPresets } from '@fauzitech/motionkit';

const allPresets = getPresets();
// → ['fadeIn', 'fadeOut', ...]

Preset Groups

import { presets } from '@fauzitech/motionkit';

presets.fade;    // ['fadeIn', 'fadeOut', ...]
presets.slide;   // ['slideInUp', ...]
presets.bounce;  // ['bounceIn', ...]
// ... more groups

Comparison

| Feature | motionkit | Framer Motion | react-spring | |---------|-----------|---------------|--------------| | Bundle size | <5KB | 170KB+ | 45KB+ | | CSS-based | ✅ | ❌ | ❌ | | Stagger | ✅ | ✅ | ✅ | | Viewport trigger | ✅ | ✅ | ❌ | | Reduced motion | ✅ | ✅ | ❌ | | Learning curve | Low | High | Medium |

License

MIT © Muhammad Fauzi Azhar