Lottie Animations

# Lottie Starter Template

Complete React + Vite starter template with Lottie examples.

## Features

- React 18+ with TypeScript support
- Vite for fast development
- DotLottie React integration
- Example animations with controls
- Responsive design
- Production-ready configuration

## Installation

```bash
# Install dependencies
npm install

# Development
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## Project Structure

```
starter_lottie/
├── package.json
├── vite.config.js
├── index.html
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   ├── App.css
│   └── components/
│       ├── BasicAnimation.jsx
│       └── InteractiveAnimation.jsx
├── public/
│   └── animations/
│       └── example.lottie
└── README.md
```

## Usage Examples

### Basic Animation

```jsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

<DotLottieReact
  src="/animations/example.lottie"
  loop
  autoplay
  style={{ height: 400 }}
/>
```

### Interactive Animation

```jsx
const [dotLottie, setDotLottie] = useState(null);

<DotLottieReact
  src="/animations/example.lottie"
  loop
  autoplay={false}
  dotLottieRefCallback={setDotLottie}
/>

<button onClick={() => dotLottie?.play()}>Play</button>
```

## Configuration

### vite.config.js

Optimized for production builds with:
- Code splitting
- Asset optimization
- Gzip compression support

### package.json

Includes essential dependencies:
- `@lottiefiles/dotlottie-react`
- `react` and `react-dom`
- Development tools

## Deployment

Build optimized bundle:

```bash
npm run build
```

Output in `dist/` folder ready for deployment to:
- Vercel
- Netlify
- AWS S3 + CloudFront
- Any static hosting

## License

MIT


# After Effects to Lottie Export Guide

Complete guide for exporting Lottie animations from After Effects using the Bodymovin plugin.

## Prerequisites

1. **Adobe After Effects** (CC 2015 or later)
2. **Bodymovin Plugin** - Install from:
   - **Recommended:** AEsc scripts panel (Extension Manager)
   - Manual: https://aescripts.com/bodymovin/
   - LottieFiles plugin: https://lottiefiles.com/plugins/after-effects

## Installation

### Method 1: ZXP Installer (Recommended)

1. Download ZXP Installer: https://aescripts.com/learn/zxp-installer/
2. Download Bodymovin ZXP file
3. Drag ZXP file to ZXP Installer
4. Restart After Effects
5. Open Window → Extensions → Bodymovin

### Method 2: Manual Installation

1. Download Bodymovin
2. Extract to:
   - **Mac:** `/Applications/Adobe After Effects [version]/Scripts/ScriptUI Panels/`
   - **Windows:** `C:\Program Files\Adobe\Adobe After Effects [version]\Support Files\Scripts\ScriptUI Panels\`
3. Restart After Effects

## Export Settings

### Basic Export

1. Open Window → Extensions → Bodymovin
2. Select composition(s) to export
3. Click "Settings" icon (gear)
4. Configure options (see below)
5. Choose destination folder
6. Click "Render"

### Recommended Settings for Web

**Essential:**
- ✅ **Glyphs** - Convert text to shapes (reduces file size)
- ✅ **Hidden** - Skip hidden layers
- ✅ **Skip images that aren't used**
- ✅ **Compress JSON** - Minify output (smaller file)
- ⬜ **Export Mode: Demo** (uncheck for production)

**Advanced:**
- **Export Format:** JSON or dotLottie (.lottie)
- **dotLottie:** Recommended for production (90% smaller)
- **Segments:** Export specific frame ranges
- **Image Quality:** 80% (balance size vs quality)

### File Size Optimization Settings

```
✅ Glyphs (text as shapes)
✅ Compress JSON
✅ Skip images that aren't used
✅ Merge Paths (when possible)
⬜ Pretty Print JSON (development only)
⬜ Include in JSON (embed images - increases size)
```

**Expected File Sizes:**
- Simple icon animation: 5-20 KB
- Complex character animation: 50-150 KB
- Heavy illustration animation: 150-500 KB
- **If >500 KB:** Optimize composition (see below)

## Supported Features

### ✅ Fully Supported

**Shapes:**
- Shape layers (rect, ellipse, polygon, star)
- Paths and bezier curves
- Strok