# Quick Start Guide - GSAP Skill

This is a **modular GSAP skill** designed for AI assistants (Claude, ChatGPT, Gemini, Cursor, etc.).

## 🚀 Getting Started

### Option 1: Install via npm

```bash
npm install gsap-animation-helper-skill
```

Then point your AI assistant to the `SKILL.md` file in `node_modules/gsap-animation-helper-skill/`.

### Option 2: Clone from GitHub

```bash
git clone https://github.com/kxwxn/gsap-animation-helper-skill.git
```

### Option 3: Use with Claude Projects / ChatGPT GPTs
1. Download the files from npm or GitHub
2. Upload to your Claude Project or custom GPT
3. The AI will use these docs to answer GSAP questions

---

## 📁 Structure Overview

```
gsap-skill/
├── SKILL.md                    # START HERE - Entry point with decision tree
├── plugins/                    # 11 plugin documentation files
│   ├── scroll-trigger.md       # Most popular plugin
│   ├── split-text.md
│   ├── flip.md
│   ├── draggable.md
│   └── ...
├── frameworks/                 # Framework-specific guides
│   ├── react.md               # React + useGSAP hook
│   ├── nextjs.md              # Next.js SSR handling
│   └── vanilla.md             # Vanilla JS patterns
├── reference/                  # Core API reference
│   ├── core-methods.md        # gsap.to, timeline, etc.
│   ├── utilities.md           # gsap.utils
│   └── easing.md              # All easing functions
└── examples/                   # Working code examples
```

---

## ❓ Example Questions for Claude

**Basic:**
- "How do I animate an element with GSAP?"
- "What's the difference between gsap.to, gsap.from, and gsap.fromTo?"

**Scroll:**
- "How do I trigger animations on scroll?"
- "Can you show me parallax scrolling with ScrollTrigger?"

**React:**
- "How do I use GSAP in React with the useGSAP hook?"
- "What's the best way to animate in Next.js?"

**Advanced:**
- "Show me how to use Timeline for complex sequences"
- "How do I animate text character by character?"

---

## 🎯 Quick Navigation

| Need | Read | Time |
|------|------|------|
| Basic animation | `reference/core-methods.md` | 10min |
| Scroll animation | `plugins/scroll-trigger.md` | 15min |
| React setup | `frameworks/react.md` | 10min |
| All easing options | `reference/easing.md` | 5min |
| Utility functions | `reference/utilities.md` | 10min |

---

## 💡 Example Queries & Expected Files

### User: "How do I fade in elements on scroll?"
**Claude reads:**
1. `SKILL.md` (decision tree)
2. `plugins/scroll-trigger.md` (scroll mechanics)
3. Combines knowledge for answer

### User: "React에서 텍스트 애니메이션 하려면?"
**Claude reads:**
1. `SKILL.md` (decision tree)
2. `plugins/split-text.md` (text animation)
3. `frameworks/react.md` (React patterns)
4. Provides React + SplitText example

### User: "Next.js에서 ScrollTrigger 어떻게?"
**Claude reads:**
1. `SKILL.md` (decision tree)
2. `plugins/scroll-trigger.md`
3. `frameworks/nextjs.md` (SSR considerations)
4. Gives Next.js-safe implementation

---

## 📚 Documentation Files

### Core
- **SKILL.md** - Main entry point (229 lines)
  - When to use this skill
  - Decision tree for routing queries
  - Core GSAP concepts
  - Common patterns

### Plugins (11 files)
- `scroll-trigger.md` - Scroll-based animations
- `scroll-smoother.md` - Smooth scrolling
- `split-text.md` - Text character animation
- `flip.md` - Layout animations
- `draggable.md` - Drag and drop
- `observer.md` - Input event handling
- `draw-svg.md` - SVG stroke drawing
- `morph-svg.md` - SVG shape morphing
- `motion-path.md` - Path animations
- `text-plugins.md` - Text content changes
- `physics.md` - Physics-based animation

### Frameworks (3 files)
- `react.md` - React + useGSAP hook
- `nextjs.md` - Next.js + SSR
- `vanilla.md` - Vanilla JS patterns

### Reference (3 files)
- `core-methods.md` - gsap.to/from, timeline, set, etc.
- `utilities.md` - gsap.utils helpers
- `easing.md` - All easing functions

---

## 🔗 Resources

- **GSAP Official**: https://gsap.com/docs/v3/
- **Cheatsheet**: https://gsap.com/cheatsheet
- **Easing Visualizer**: https://gsap.com/docs/v3/Eases/
- **Community**: https://gsap.com/community/

---

## ✅ Installation (for GSAP itself)

```bash
npm install gsap
```

For plugins requiring Club GSAP membership, see: https://gsap.com/pricing/

---

## 🤝 Contributing

See `CONTRIBUTING.md` for guidelines on:
- Adding new plugin documentation
- Improving existing docs
- Creating examples
- Reporting issues

---

## 📄 License

MIT License - See `LICENSE.txt`

---

**Ready to animate? Ask Claude anything about GSAP!** ✨