Installation guide

This guide covers everything you need to install and run Animation Playground locally, including detailed information about dependencies and deployment options.

Prerequisites

Node.js version

Animation Playground requires Node.js 20 or later. Check your current version:

node --version

If you need to install or update Node.js, download it from nodejs.org or use a version manager like nvm:

# Install Node.js 20 using nvm
nvm install 20
nvm use 20

Package manager

You can use any of these package managers:

npm - Comes bundled with Node.js
yarn - Install with npm install -g yarn
pnpm - Install with npm install -g pnpm
bun - Download from bun.sh

Git

Git is required to clone the repository:

git --version

Download from git-scm.com if needed.

Installation steps

Clone the repository

Clone the Animation Playground repository:

git clone https://github.com/Aduwoayooluwa/animations.git
cd animations

Install dependencies

Choose your preferred package manager:

npm install

This installs all required dependencies listed in package.json.

Start the development server

Run the development server:

npm run dev

The application will be available at http://localhost:3000.

Dependencies explained

Animation Playground uses a carefully selected set of dependencies to demonstrate different animation techniques:

Core framework

{
  "next": "15.2.2",
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

Next.js 15.2.2 - React framework with App Router, server components, and optimized builds
React 19 - Latest React with improved performance and concurrent features

Animation libraries

{
  "framer-motion": "^12.5.0",
  "gsap": "^3.12.7",
  "@react-spring/web": "^9.7.5",
  "react-transition-group": "^4.4.5"
}

Framer Motion (12.5.0)

Declarative animation API for React
Built-in gesture support (drag, tap, hover)
AnimatePresence for exit animations
Reorder components for drag-to-reorder lists
Used in: Timeline Editor, sortable lists, gesture demos

GSAP (3.12.7)

Professional-grade JavaScript animation library
High-performance timeline-based animations
Advanced easing and control
Used in: JavaScript animations tab

React Spring (9.7.5)

Physics-based animations with spring dynamics
Natural, realistic motion
Interpolation and configuration options
Used in: React animations tab, library comparison

React Transition Group (4.4.5)

Simple component lifecycle animations
CSS transition/animation integration
Used in: Basic enter/exit animations

UI components

{
  "@radix-ui/react-checkbox": "^1.1.4",
  "@radix-ui/react-tabs": "^1.1.3"
}

Radix UI - Accessible, unstyled UI components
Used for: Tab navigation, checkboxes in demos

Code highlighting

{
  "prism-react-renderer": "^2.4.1"
}

Prism React Renderer - Syntax highlighting for code examples
Displays generated CSS, JavaScript, and React code snippets

Styling

{
  "tailwindcss": "^4",
  "@tailwindcss/postcss": "^4"
}

Tailwind CSS 4 - Utility-first CSS framework
Used throughout the application for responsive design

TypeScript

{
  "typescript": "^5",
  "@types/react": "^19",
  "@types/react-dom": "^19"
}

Full TypeScript support for type safety and better DX
Type definitions for all React and third-party libraries

Development server

Available scripts

Animation Playground includes these npm scripts:

Script	Command	Description
`dev`	`next dev`	Starts development server on http://localhost:3000
`build`	`next build`	Creates optimized production build
`start`	`next start`	Runs production server (requires build first)
`lint`	`next lint`	Runs ESLint to check code quality

Development features

The development server includes:

Hot Module Replacement (HMR) - See changes instantly without full page reload
Fast Refresh - Preserves component state during edits
TypeScript compilation - Real-time type checking
Error overlay - Detailed error messages in the browser

Custom port

To run on a different port:

npm run dev -- -p 3001

Building for production

Create production build

Generate an optimized build:

npm run build

This creates a .next folder with:

Minified JavaScript bundles
Optimized CSS
Pre-rendered static pages
Server-side code

Test production build locally

Run the production server:

npm run start

This starts the production server on http://localhost:3000.

Always test your production build locally before deploying to catch any build-time errors.

Deployment options

Deploy to Vercel (recommended)

Vercel is the recommended platform for deploying Next.js applications:

Push to GitHub

Push your code to a GitHub repository:

git add .
git commit -m "Initial commit"
git push origin main

Connect to Vercel

Visit vercel.com/new
Import your GitHub repository
Vercel auto-detects Next.js settings
Click “Deploy”

Automatic deployments

Vercel automatically deploys:

Production - Every push to main branch
Preview - Every pull request gets a unique URL

Vercel provides free hosting for Next.js applications with automatic HTTPS, global CDN, and serverless functions.

Other deployment platforms

Animation Playground can be deployed to any platform that supports Next.js:

Netlify

Install Netlify CLI: npm install -g netlify-cli
Build: npm run build
Deploy: netlify deploy --prod

Or connect your GitHub repository through the Netlify dashboard.

Docker

Create a Dockerfile:

FROM node:20-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
CMD ["node", "server.js"]

Build and run:

docker build -t animation-playground .
docker run -p 3000:3000 animation-playground

Static export

For static hosting (GitHub Pages, S3, etc.):

Add to next.config.ts:

const nextConfig = {
  output: 'export'
}

Build: npm run build
Deploy the out folder

Some features like API routes won’t work with static export.

Troubleshooting

Installation fails with permission errors

If you encounter permission errors on macOS/Linux, avoid using sudo. Instead, configure npm to use a different directory:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

Dependencies take too long to install

Try using pnpm which uses a content-addressable store for faster installs:

npm install -g pnpm
pnpm install

Build fails with TypeScript errors

Ensure you’re using TypeScript 5:

npm list typescript
npm install typescript@latest

Development server won't start

Clear Next.js cache and try again:

rm -rf .next
npm run dev

Next steps

Now that you have Animation Playground installed:

Quickstart guide

Create your first animation in 5 minutes

Core concepts

Learn about transforms, timing functions, and animation principles

Examples

Explore real-world animation patterns and techniques

Performance

Optimize animations for smooth 60 FPS performance

Getting Started

Core Concepts

Animation Techniques

Interactive Tools

Libraries & Frameworks

Installation

Installation guide

Prerequisites

Node.js version

Package manager

Git

Installation steps

Dependencies explained

Core framework

Animation libraries

UI components

Code highlighting

Styling

TypeScript

Development server

Available scripts

Development features

Custom port

Building for production

Deployment options

Deploy to Vercel (recommended)

Other deployment platforms

Troubleshooting

Next steps

Quickstart guide

Core concepts

Examples

Performance

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Animation Techniques

Interactive Tools

Libraries & Frameworks

​Installation guide

​Prerequisites

​Node.js version

​Package manager

​Git

​Installation steps

​Dependencies explained

​Core framework

​Animation libraries

​UI components

​Code highlighting

​Styling

​TypeScript

​Development server

​Available scripts

​Development features

​Custom port

​Building for production

​Deployment options

​Deploy to Vercel (recommended)

​Other deployment platforms

​Troubleshooting

​Next steps

Quickstart guide

Core concepts

Examples

Performance

Build docs developers (and LLMs) love

Installation guide

Prerequisites

Node.js version

Package manager

Git

Installation steps

Dependencies explained

Core framework

Animation libraries

UI components

Code highlighting

Styling

TypeScript

Development server

Available scripts

Development features

Custom port

Building for production

Deployment options

Deploy to Vercel (recommended)

Other deployment platforms

Troubleshooting

Next steps