# 🎭 Module d'Animation Orphic Motion

> 🌟 Ce module permet d'ajouter des animations déclenchées au scroll sur n'importe quel élément HTML.

## 🎯 OrphicMotionAnimation

> 🧩 Actuellement implémenté comme un bloc Gutenberg qui encapsule le module d'animation.

OrphicMotionAnimation est la première implémentation de ce module sous forme de bloc Gutenberg. Il permet de :

- 🎁 Wrapper n'importe quel bloc Gutenberg avec des animations
- 🎨 Configurer les animations via une interface visuelle dans le panneau latéral
- 🔄 Prévisualiser les animations directement dans l'éditeur
- 📱 S'adapter automatiquement à tous les types de blocs

## 📝 TODO

> 🚀 Prochaines étapes pour le développement du module

- [ ] 🔓 Extraire le module d'animation du bloc pour le rendre indépendant
- [ ] 📚 Créer une API publique pour permettre l'utilisation dans d'autres contextes
- [ ] 🎨 Permettre l'intégration native dans n'importe quel bloc natif

## 🚀 Installation

```html
<script type="module">
	import {
		animate,
		scroll,
		inView,
	} from "https://cdn.jsdelivr.net/npm/motion@latest/+esm";
</script>
```

## 🎮 Data Attributes

Pour configurer une animation, ajoutez ces data-attributes à votre élément :

| Attribute                 | Type   | Default        | Description                                                                              |
| ------------------------- | ------ | -------------- | ---------------------------------------------------------------------------------------- |
| `data-animation-type`     | string | 'fadeIn'       | 🎯 Type d'animation ('fadeIn', 'fadeInTop', 'fadeInBottom', 'fadeInLeft', 'fadeInRight') |
| `data-animation-distance` | number | 50             | 📏 Distance en pixels pour les animations avec translation                               |
| `data-animation-duration` | number | 1000           | ⏱️ Durée de l'animation en millisecondes                                                 |
| `data-animation-delay`    | number | 0              | ⏰ Délai avant le début de l'animation en millisecondes                                  |
| `data-animation-trigger`  | number | 50             | 🎯 Point de déclenchement en pourcentage de la fenêtre                                   |
| `data-scroll-behavior`    | string | 'followScroll' | 🔄 Mode d'animation ('followScroll' ou 'playOnView')                                     |

## 🎨 Modes d'Animation

### 📜 Follow Scroll

> L'animation suit la progression du scroll. L'élément s'anime progressivement en fonction de sa position dans la fenêtre.

```html
<div
	class="orphic-motion-animation"
	data-animation-type="fadeInTop"
	data-scroll-behavior="followScroll"
>
	<!-- Contenu -->
</div>
```

### 🎯 Play on View

> L'animation se joue entièrement une fois que l'élément atteint le point de déclenchement.

```html
<div
	class="orphic-motion-animation"
	data-animation-type="fadeInLeft"
	data-scroll-behavior="playOnView"
>
	<!-- Contenu -->
</div>
```

## 🎪 Types d'Animation

- `fadeIn` ➡️ ✨ Simple fondu à l'apparition
- `fadeInTop` ➡️ ⬇️ Fondu + translation depuis le haut
- `fadeInBottom` ➡️ ⬆️ Fondu + translation depuis le bas
- `fadeInLeft` ➡️ ➡️ Fondu + translation depuis la gauche
- `fadeInRight` ➡️ ⬅️ Fondu + translation depuis la droite

## 🌈 Exemple Complet

```html
<div
	class="orphic-motion-animation"
	data-animation-type="fadeInTop"
	data-animation-distance="100"
	data-animation-duration="1000"
	data-animation-delay="200"
	data-animation-trigger="50"
	data-scroll-behavior="playOnView"
>
	<!-- Votre contenu ici -->
</div>
```

## 🔧 Notes Techniques

- 📚 Les animations utilisent la librairie [Motion](https://motion.dev/)
- 🚀 Les transformations utilisent `transform: translate` pour de meilleures performances
- 🔄 Le module initialise automatiquement les animations au chargement de la page
- 🎯 Les animations "Play on View" ne se jouent qu'une seule fois

---

<div align="center">

### 🎨 Créé avec ❤️ par Orphic UI

</div>
