# Concept Guides

This section contains educational content explaining the core concepts and architecture of the `@wix/interact` package.

## Guide Overview

### 🚀 [Getting Started](./getting-started.md)

Your first interaction in under 5 minutes. Learn the basic concepts and create a simple hover effect.

### ⚡ [Understanding Triggers](./understanding-triggers.md)

Complete guide to all 6 trigger types: `hover`, `click`, `viewEnter`, `animationEnd`, `viewProgress`, and `pointerMove`.

### 🎬 [Effects and Animations](./effects-and-animations.md)

How to create stunning animations using the integration with `@wix/motion`.

### ⚙️ [Configuration Structure](./configuration-structure.md)

Understanding the nested configuration object and how to organize complex interactions.

### 🔧 [Custom Elements](./custom-elements.md)

Deep dive into how `<interact-element>` works and how to use it effectively.

### 📊 [State Management](./state-management.md)

CSS custom states vs data attributes - when to use each approach.

### 📱 [Conditions and Media Queries](./conditions-and-media-queries.md)

Creating responsive interactions that adapt to different screen sizes and conditions.

### 📋 [Lists and Dynamic Content](./lists-and-dynamic-content.md)

Working with dynamic lists, list containers, staggered animations, and automatic mutation tracking.

### 🎼 [Sequences & Staggering](./sequences.md)

Coordinate multiple effects with staggered timing using easing-driven delay offsets. Covers inline and reusable sequences, cross-element orchestration, `listContainer` integration, dynamic add/remove, and conditional sequences.

### 🔌 [Plugins](./plugins.md)

Extend Interact with external code via `Interact.use()` and `$`-prefixed config fields. Covers the generic bridge, the plugin contract and cleanup lifecycle, type-safe config, and using `@wix/splittext` to split text for staggered reveals.

## Learning Path

If you're new to `@wix/interact`, we recommend following the guides in this order:

1. **Getting Started** - Understand the basics
2. **Custom Elements** - Learn the foundation
3. **Understanding Triggers** - Master user interactions
4. **Effects and Animations** - Create beautiful animations
5. **Configuration Structure** - Organize complex interactions
6. **Lists and Dynamic Content** - Work with repeating elements
7. **State Management** - Advanced state handling
8. **Conditions and Media Queries** - Responsive design
9. **Sequences & Staggering** - Coordinated multi-effect timing

## Prerequisites

- Basic knowledge of HTML, CSS, and JavaScript
- Familiarity with TypeScript (helpful but not required)
- Understanding of CSS animations and transitions
- Basic React knowledge (for JSX examples)