GSAP Animation

# GSAP Animation

## Install
```bash
npm install gsap
```

## Tween basics
```js
import gsap from 'gsap'

// to: animate FROM current state TO target
gsap.to('.box', { x: 200, rotation: 360, duration: 1, ease: 'power2.out' })

// from: animate FROM target TO current state
gsap.from('.title', { y: -50, opacity: 0, duration: 0.8 })

// fromTo: full control
gsap.fromTo('.card', { scale: 0 }, { scale: 1, duration: 0.6, ease: 'back.out(1.7)' })

// set: instant (no animation)
gsap.set('.modal', { display: 'none' })
```

## Timeline
```js
const tl = gsap.timeline({ defaults: { ease: 'power2.out', duration: 0.5 } })
tl.from('.header', { y: -30, opacity: 0 })
  .from('.subtitle', { y: 20, opacity: 0 }, '-=0.2')  // overlap 0.2s
  .from('.btn', { scale: 0 }, '<')                     // same start as prev
  .to('.bg', { backgroundColor: '#000' }, 1)           // at 1s from start
```

## Eases
`power1/2/3/4`, `sine`, `expo`, `circ`, `bounce`, `elastic`, `back`
Suffix: `.in`, `.out`, `.inOut`
Visualizer: gsap.com/ease-visualizer

## ScrollTrigger
```js
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

gsap.to('.box', {
  x: 500,
  scrollTrigger: {
    trigger: '.box',
    start: 'top 80%',    // element top hits 80% of viewport
    end: 'top 20%',
    scrub: true,         // links to scroll position
    pin: true,           // pin element during scroll
    markers: true,       // debug
  },
})

// Staggered entrance on scroll
gsap.from('.card', {
  y: 60, opacity: 0, stagger: 0.1,
  scrollTrigger: { trigger: '.grid', start: 'top 75%' },
})
```

## React integration
```tsx
import { useGSAP } from '@gsap/react'
import { useRef } from 'react'
gsap.registerPlugin(useGSAP)

function Component() {
  const container = useRef<HTMLDivElement>(null)
  useGSAP(() => {
    // Animations scoped to container -- auto cleanup on unmount
    gsap.from('.box', { x: -100, opacity: 0 })
  }, { scope: container })
  return <div ref={container}><div className="box" /></div>
}
```

## MotionPath
```js
import { MotionPathPlugin } from 'gsap/MotionPathPlugin'
gsap.registerPlugin(MotionPathPlugin)
gsap.to('.dot', {
  duration: 3,
  motionPath: { path: '#svgPath', align: '#svgPath', autoRotate: true },
})
```

## Performance tips
- Animate `transform` and `opacity` only (GPU composited).
- Avoid animating `width`, `height`, `top`, `left` (triggers layout).
- Use `will-change: transform` sparingly.
- `gsap.ticker.lagSmoothing(0)` for precise frame timing.
- Batch multiple targets: `gsap.to('.items', ...)` animates all matches.