← Back to all products
$29
Animation & Effects Pack
Framer Motion animations, scroll effects, page transitions, loading states, and micro-interactions library.
MarkdownTypeScriptReact
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 27 files
animation-effects-pack/
├── LICENSE
├── README.md
├── examples/
│ ├── dashboard-transitions.tsx
│ ├── landing-page.tsx
│ └── loading-states.tsx
├── free-sample.zip
├── guide/
│ └── animation-guide.md
├── guides/
│ └── animation-guide.md
├── index.html
├── src/
│ ├── components/
│ │ ├── AnimatedCounter.tsx
│ │ ├── PageTransition.tsx
│ │ ├── Parallax.tsx
│ │ ├── ScrollReveal.tsx
│ │ ├── SkeletonLoader.tsx
│ │ └── StaggerList.tsx
│ ├── hooks/
│ │ ├── useMicroInteraction.ts
│ │ ├── useReducedMotion.ts
│ │ └── useScrollProgress.ts
│ ├── utils/
│ │ ├── easing.ts
│ │ └── motion-config.ts
│ └── variants/
│ ├── entrance.ts
│ ├── exit.ts
│ ├── hover.ts
│ └── stagger.ts
└── tests/
├── components.test.tsx
├── entrance-variants.test.ts
└── hooks.test.ts
📖 Documentation Preview README excerpt
Animation Effects Pack
A comprehensive collection of Framer Motion animation patterns, reusable components, and utility hooks for building polished, accessible React interfaces. Every animation respects prefers-reduced-motion out of the box.
What's Inside
Variant Libraries (`src/variants/`)
Pre-built animation variant objects you can drop into any motion.* component:
| File | Variants | Description |
|---|---|---|
entrance.ts | 12 variants | Fade, slide, scale, rotate, flip, blur, clip-path reveals |
exit.ts | 10 variants | Reverse entrance patterns + collapse, shrink, dissolve |
hover.ts | 14 variants | Lift, glow, tilt, magnetic, bounce, underline, morphing |
stagger.ts | 8 presets | Container orchestration for lists, grids, cascades, waves |
Components (`src/components/`)
Drop-in animated components with full TypeScript generics:
| Component | What it does |
|---|---|
PageTransition | Route-level transitions with 6 built-in modes (fade, slide, scale, flip, morph, parallax) |
ScrollReveal | Intersection Observer + motion with configurable thresholds and directional awareness |
Parallax | Multi-layer parallax with speed control, works in scroll containers or viewport |
StaggerList | Renders lists with orchestrated child animations, supports dynamic additions/removals |
AnimatedCounter | Smooth number interpolation with formatting, locale support, and spring physics |
SkeletonLoader | Shimmer/pulse/wave loading skeletons that match your content layout |
Hooks (`src/hooks/`)
| Hook | Purpose |
|---|---|
useScrollProgress | Track scroll position as 0-1 progress, segment-aware, with velocity |
useReducedMotion | System preference detection + manual override + context provider |
useMicroInteraction | Tiny feedback animations (success, error, click, drag) with haptic timing |
Utilities (`src/utils/`)
| File | Contents |
|---|---|
motion-config.ts | Centralized spring/tween presets, duration scales, responsive breakpoints |
easing.ts | 30+ easing functions, cubic-bezier helpers, spring parameter calculator |
Examples (`examples/`)
Three complete page-level examples showing how everything works together:
landing-page.tsx— Hero section with scroll-triggered reveals, parallax background, staggered feature cards, animated statistics countersdashboard-transitions.tsx— Route transitions, sidebar animations, card grid with stagger, collapsible panels, notification toastsloading-states.tsx— Skeleton screens, progressive loading, shimmer effects, content swap transitions
Tests (`tests/`)
entrance-variants.test.ts— Validates variant structure and reduced-motion fallbackscomponents.test.tsx— Component rendering, intersection observer mocking, animation lifecyclehooks.test.ts— Hook behavior, media query mocking, state transitions
Guide (`guides/`)
... continues with setup instructions, usage examples, and more.
📄 Code Sample .ts preview
src/hooks/useMicroInteraction.ts
/**
* useMicroInteraction Hook
*
* Provides tiny, polished feedback animations for user interactions.
* These are the "details that delight" — small animations that make
* an interface feel responsive and alive.
*
* Micro-interactions are NOT the big entrance/exit animations.
* They're the small reactions: a button bouncing when clicked,
* a success checkmark appearing, a form field shaking on error.
*
* Design principles:
* - Duration: 150-400ms (faster than conscious attention, felt but not watched)
* - Movement: Small (2-8px or 2-5% scale). Big movements are distracting.
* - Purpose: Every micro-interaction must communicate something (success, error, feedback)
* - Haptic: Timing should match haptic feedback patterns (if device supports it)
*
* Usage:
* const { trigger, animationProps } = useMicroInteraction('success');
*
* <motion.button
* onClick={() => { doThing(); trigger(); }}
* {...animationProps}
* >
* Save
* </motion.button>
*/
import { useState, useCallback, useRef, useEffect } from 'react';
import type { MotionProps, Transition, Variant } from 'framer-motion';
// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------
/**
* Available micro-interaction modes:
*
* - 'success': Green pulse + slight scale up (form submission, save)
* - 'error': Red flash + shake (validation error, failed action)
* - 'click': Quick scale down/up (button press feedback)
* - 'bounce': Bouncy scale (like/favorite, toggle on)
* - 'wiggle': Horizontal wiggle (attention, badge notification)
* - 'spin': 360-degree rotation (refresh, loading)
* - 'pop': Scale up with overshoot (new item added, counter increment)
* - 'magnetic': Element follows cursor within bounds (interactive buttons)
*/
export type MicroInteractionMode =
| 'success'
| 'error'
# ... 360 more lines ...