@philiprehberger/framer-motion-presets

Reusable Framer Motion animation presets, variants, and transitions

Installation

npm install @philiprehberger/framer-motion-presets framer-motion

Usage

import { fadeInUp, staggerContainer, staggerItem, transitions } from '@philiprehberger/framer-motion-presets';
import { motion } from 'framer-motion';

function AnimatedList({ items }) {
  return (
    <motion.ul variants={staggerContainer} initial="initial" animate="animate">
      {items.map((item) => (
        <motion.li key={item.id} variants={staggerItem}>
          {item.name}
        </motion.li>
      ))}
    </motion.ul>
  );
}

Reduced Motion

Use prefersReducedMotion() to check if the user has enabled "prefers-reduced-motion" in their OS settings:

import { prefersReducedMotion, fadeInUp } from '@philiprehberger/framer-motion-presets';

<motion.div variants={prefersReducedMotion() ? {} : fadeInUp} />

API

Transitions & Easing

| Export | Description | |--------|-------------| | easing | Easing curves (ease, easeIn, easeOut, etc.) | | transitions | Named transitions: fast, base, slow, bounce, spring |

Fade / Scale / Slide Variants

All have initial, animate, and optionally exit states:

| Export | Animation | |--------|-----------| | fadeIn | Opacity 0 → 1 | | fadeInUp / fadeInDown / fadeInLeft / fadeInRight | Fade + directional slide | | scaleIn / scaleInBounce | Scale from 0 with optional bounce | | slideInUp / slideInDown / slideInLeft / slideInRight | Slide from edge | | pageTransition / pageFade | Full-page transitions |

Stagger

| Export | Description | |--------|-------------| | staggerContainer | Parent with staggerChildren in animate.transition | | staggerItem | Child variant for stagger lists | | gridStagger / gridItem | Grid-aware stagger | | waveStagger / waveItem | Wave pattern stagger |

Component Variants

| Export | Description | |--------|-------------| | modalVariants / backdropVariants | Modal open/close with backdrop | | toastVariants | Toast slide-in and exit | | dropdownVariants | Dropdown expand/collapse |

Interactions

| Export | Description | |--------|-------------| | hoverScale / tapScale / hoverLift | Hover and tap micro-interactions | | dragConstraints / swipeVariants / magnetic | Drag and gesture presets |

Advanced

| Export | Description | |--------|-------------| | createParallax(offset) | Parallax scroll factory | | flip3D / cube3D / tilt3D | 3D transform variants | | springBounce / springElastic / springWobble | Spring physics presets | | createScrollReveal(options) | Scroll-triggered reveal factory | | morphVariants | Shape morphing variant | | textReveal | Text reveal animation | | createCounterAnimation(from, to) | Animated number counter factory | | pulse / shimmer / skeleton | Loading state animations |

Development

npm install
npm run build
npm test

License

MIT