DEV Community

Thesius Code
Thesius Code

Posted on • Originally published at datanest-stores.pages.dev

Animation & Effects Pack

#react #javascript #webdev #typescript

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 check prefers-reduced-motion and gracefully degrade to instant transitions
  • Composable Primitives — Stack animation variants to build complex sequences from simple building blocks

Quick Start

  1. Install Framer Motion: 
npm install framer-motion
Enter fullscreen mode Exit fullscreen mode

  1. Copy the animations/ directory into your project's src/lib/ folder.

  2. 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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,
};
Enter fullscreen mode Exit fullscreen mode

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
  • Set triggerOnce: true for 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
  • Use layout prop 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.

Get the Full Kit →

Or grab the entire Frontend Developer Pro bundle (11 products) for $129 — save 30%.

Get the Complete Bundle →

Related Articles

Top comments (0)