← 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 .tsx preview
examples/dashboard-transitions.tsx/**
* Dashboard Transitions Example
*
* A complete dashboard layout demonstrating:
* - Route-level page transitions with multiple modes
* - Sidebar navigation with hover effects
* - Staggered card grid with real data
* - Collapsible panels with collapse animation
* - Notification toast with micro-interactions
* - Loading states with skeleton components
* - Layout animations for reordering
*
* This example shows how animation patterns work in a real
* application context — not just isolated demos, but a complete
* page with multiple animated systems working together.
*/
import React, { useState, useCallback } from 'react';
import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
// Variants
import { fadeUp, scaleUp } from '../src/variants/entrance';
import { fadeOut, collapse, scaleOut } from '../src/variants/exit';
import { lift, press, colorShift } from '../src/variants/hover';
import { staggerUp, staggerScale } from '../src/variants/stagger';
// Components
import { PageTransition, routeTransitionPresets } from '../src/components/PageTransition';
import { StaggerList, StaggerGrid } from '../src/components/StaggerList';
import { AnimatedCounter } from '../src/components/AnimatedCounter';
import { Skeleton, SkeletonCard, SkeletonText, ContentSwap } from '../src/components/SkeletonLoader';
import { ScrollReveal } from '../src/components/ScrollReveal';
// Hooks
import { useReducedMotion } from '../src/hooks/useReducedMotion';
import { useMicroInteraction, useSuccessAnimation, useErrorAnimation } from '../src/hooks/useMicroInteraction';
// Config
import { springs, durations, transitions } from '../src/utils/motion-config';