Lottie & SVG Animation

# Lottie & SVG Animation

## Lottie (After Effects -> Web)
Export AE animations as JSON with Bodymovin plugin. Play with lottie-web.

```bash
npm install lottie-web
# React:
npm install lottie-react
```

```tsx
import Lottie from 'lottie-react'
import animationData from './animation.json'

<Lottie
  animationData={animationData}
  loop={true}
  autoplay={true}
  style={{ width: 200, height: 200 }}
/>

// Control via ref
import { LottieRefCurrentProps } from 'lottie-react'
const ref = useRef<LottieRefCurrentProps>(null)
ref.current?.play()
ref.current?.pause()
ref.current?.setSpeed(2)
ref.current?.goToAndPlay(30, true) // frame 30
```

## SVG animation with CSS
```css
/* Draw-on effect */
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Morph between paths (same point count!) */
@keyframes morph {
  from { d: path("M10,10 L90,10 L50,90 Z"); }
  to   { d: path("M50,10 L90,90 L10,90 Z"); }
}
```

## GSAP + SVG
```js
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'
gsap.registerPlugin(DrawSVGPlugin, MorphSVGPlugin)

// Draw SVG path
gsap.from('#path', { drawSVG: '0%', duration: 2, ease: 'power2.inOut' })

// Morph shapes
gsap.to('#circle', { morphSVG: '#star', duration: 1 })

// Animate along path
gsap.to('.dot', {
  motionPath: { path: '#track', align: '#track', autoRotate: true },
  duration: 3, repeat: -1, ease: 'none',
})
```

## SVG filters for visual effects
```svg
<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="blur"/>
  <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<circle filter="url(#glow)" cx="50" cy="50" r="20" fill="#00ff88"/>
```

## Tools
- LottieFiles.com -- free animation library
- SVGator.com -- SVG animation editor
- Rive (rive.app) -- interactive animation with state machines