Animation & Effects Pack
A production-ready animation library built on Framer Motion that gives React developers 60+ polished animations out of the box. Includes scroll-triggered reveals, page transitions with App Router support, skeleton loading states, micro-interactions for buttons and inputs, parallax effects, and staggered list animations. Every animation respects prefers-reduced-motion, ships with TypeScript types, and is designed to compose — combine primitives to build complex choreographed sequences without writing keyframes from scratch.
Key Features
Scroll-Triggered Animations — Fade-in, slide-up, scale, and parallax effects that fire when elements enter the viewport using Intersection Observer
Page Transitions — Smooth route transitions for Next.js App Router with shared layout animations and exit effects
Loading State Library — 15 skeleton, shimmer, and pulse loading patterns that match your design system's spacing
Micro-Interactions — Button press, hover lift, input focus, toggle switch, and notification badge animations
Staggered Lists — Animate list items sequentially with configurable delay, direction, and spring physics
Gesture Animations — Drag-to-dismiss, swipe cards, pinch-to-zoom, and long-press interactions with haptic-ready callbacks
Motion-Safe by Default — All animations checkprefers-reduced-motionand gracefully degrade to instant transitions
Composable Primitives — Stack animation variants to build complex sequences from simple building blocks
Quick Start
- Install Framer Motion:
npm install framer-motion
Copy the
animations/directory into your project'ssrc/lib/folder.Use any animation component directly:
import { FadeIn } from '@/lib/animations/reveals';
import { StaggerList } from '@/lib/animations/lists';
export function FeatureSection({ features }: { features: Feature[] }) {
return (
<FadeIn delay={0.2}>
<h2 className="text-3xl font-bold">Features</h2>
<StaggerList staggerDelay={0.08}>
{features.map((f) => (
<FeatureCard key={f.id} feature={f} />
))}
</StaggerList>
</FadeIn>
);
}
Architecture / How It Works
animation-effects-pack/
├── animations/
│ ├── reveals/ # Scroll-triggered entrance animations
│ │ ├── FadeIn.tsx # Opacity transition with direction variants
│ │ ├── SlideIn.tsx # Translate + opacity with spring physics
│ │ ├── ScaleIn.tsx # Scale from 0.8 with configurable origin
│ │ └── index.ts # Barrel export
│ ├── transitions/ # Page and layout transitions
│ │ ├── PageTransition.tsx # App Router route transitions
│ │ ├── SharedLayout.tsx # Shared element transitions
│ │ └── CrossFade.tsx # Crossfade between states
│ ├── loading/ # Skeleton and loading states
│ │ ├── Skeleton.tsx # Configurable skeleton shapes
│ │ ├── Shimmer.tsx # Shimmer overlay effect
│ │ └── Pulse.tsx # Pulsing placeholder
│ ├── interactions/ # Micro-interactions
│ │ ├── ButtonPress.tsx
│ │ ├── HoverLift.tsx
│ │ └── ToggleSwitch.tsx
│ ├── lists/ # List animations
│ │ ├── StaggerList.tsx
│ │ └── AnimatePresenceList.tsx
│ ├── gestures/ # Gesture-driven animations
│ │ ├── DragDismiss.tsx
│ │ └── SwipeCard.tsx
│ └── hooks/ # Utility hooks
│ ├── useReducedMotion.ts
│ ├── useScrollProgress.ts
│ └── useInView.ts
└── examples/ # Full page demos
├── landing-page.tsx
└── dashboard.tsx
Every component accepts a variants prop for customization and wraps Framer Motion's motion components with sensible defaults.
Usage Examples
Scroll-Triggered Reveal
import { SlideIn } from '@/lib/animations/reveals';
// Direction: 'up' | 'down' | 'left' | 'right'
<SlideIn direction="up" duration={0.5} distance={40}>
<PricingCard plan={plan} />
</SlideIn>
Page Transitions (Next.js App Router)
// app/template.tsx — wraps every page with transition
'use client';
import { PageTransition } from '@/lib/animations/transitions';
export default function Template({ children }: { children: React.ReactNode }) {
return (
<PageTransition
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
{children}
</PageTransition>
);
}
Respecting Reduced Motion
import { useReducedMotion } from '@/lib/animations/hooks';
function AnimatedCard({ children }: { children: React.ReactNode }) {
const shouldReduce = useReducedMotion();
return (
<motion.div
whileHover={shouldReduce ? {} : { scale: 1.03, y: -4 }}
transition={shouldReduce ? { duration: 0 } : { type: 'spring', stiffness: 300 }}
>
{children}
</motion.div>
);
}
Configuration
Customize defaults in animations/config.ts:
export const animationConfig = {
spring: { type: 'spring' as const, stiffness: 260, damping: 20 },
durations: { fast: 0.15, normal: 0.3, slow: 0.6 },
scroll: { threshold: 0.15, triggerOnce: true, rootMargin: '-50px' },
respectReducedMotion: true,
};
Best Practices
Use spring physics over duration-based easing — springs feel more natural and never overshoot when interrupted
Keep animations under 400ms — anything longer feels sluggish; entrance reveals are the exception (up to 600ms)
Animate transform and opacity only — these properties are GPU-composited and won't trigger layout recalculations
SettriggerOnce: truefor scroll animations — repeating animations on every scroll pass feels broken, not clever
Test on low-end devices — use Chrome DevTools' CPU throttling (4x slowdown) to verify animation smoothness
Uselayoutprop sparingly — Framer Motion's layout animations are powerful but expensive; profile before shipping
Troubleshooting
| Issue | Cause | Fix |
|---|---|---|
| Page transition flickers on route change | AnimatePresence missing mode="wait" | Add mode="wait" to AnimatePresence in your template |
| Scroll animations fire before element is visible | Threshold set too low or rootMargin too large | Increase threshold to 0.2+ and reduce rootMargin |
| Animations jank on mobile Safari | Animating height or width triggers layout | Switch to transform: scaleY() or clip-path instead |
useInView doesn't re-trigger | triggerOnce defaults to true | Set triggerOnce: false if you need repeating animations |
This is 1 of 11 resources in the Frontend Developer Pro toolkit. Get the complete [Animation & Effects Pack] with all files, templates, and documentation for $29.
Or grab the entire Frontend Developer Pro bundle (11 products) for $129 — save 30%.
SOCIAL SHARE CARD GENERATOR