sumn2u · sumn2u · Dec 6, 2024 · Dec 5, 2024
diff --git a/fr/animation-resources/README.md b/fr/animation-resources/README.md
@@ -0,0 +1,49 @@
+---
+layout: editorial
+chapter: 26
+pageNumber: 252
+description: "Ressources pour les animations en JavaScript, y compris des bibliothèques, des tutoriels, des articles et des cadres pour créer des animations engageantes.
+---
+
+# Chapitre 26
+# Ressources d’animation
+
+Les animations en JavaScript sont un moyen puissant de créer des expériences utilisateur attrayantes sur le Web. Ce chapitre couvrira diverses ressources, notamment des bibliothèques, des tutoriels, des articles et des frameworks, qui aident les développeurs à créer des animations à l’aide de JavaScript.
+
+## Introduction aux animations JavaScript
+
+Les animations JavaScript permettent aux développeurs de créer du contenu Web dynamique et visuellement attrayant. Les animations peuvent être utilisées à diverses fins, telles que l’amélioration des interfaces utilisateur, la fourniture de commentaires et la création de contenu plus attrayant.
+
+### Bibliothèques
+
+Les bibliothèques d’animation JavaScript facilitent la création d’animations complexes. Voici quelques bibliothèques populaires:
+
+1. **[GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/)**: Une bibliothèque puissante pour créer des animations hautes performances.
+2. **[Anime.js](https://animejs.com/)**: Une bibliothèque légère pour la gestion des animations.
+3. **[Three.js](https://threejs.org/)**: Une bibliothèque pour créer des animations 3D.
+4. **[Velocity.js](http://velocityjs.org/)**: Un moteur d’animation rapide.
+
+### Tutoriels
+Pour commencer à utiliser les animations JavaScript, consultez ces tutoriels:
+
+1. **[MDN Web Docs: Utilisation des animations CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**: Un guide complet sur les animations CSS.
+2. **[JavaScript.info: JavaScript Animations](https://javascript.info/js-animation/)**: Une introduction aux animations JavaScript.
+3. **[GreenSock Learning Resources](https://greensock.com/learning/)**: Tutoriels et ressources pour l’apprentissage du GSAP.
+
+### Cadres
+
+Les frameworks offrent une approche structurée de la création d’animations. Parmi les frameworks populaires, citons:
+
+1. **[React Spring](https://react-spring.io/)**: Une bibliothèque d’animation basée sur la physique des ressorts pour React.
+2. **[Framer Motion](https://www.framer.com/motion/)**: Une bibliothèque de mouvements prête pour la production pour React.
+
+Dans ce chapitre, nous allons explorer en détail les sujets suivants:
+
+* [Premiers pas avec GSAP](./gsap.md)
+* [Création d’animations avec Anime.js](./animejs.md)
+* [Animations 3D avec Three.js](./threejs.md)
+* [Animations rapides avec Velocity.js](./velocityjs.md)
+* [Utilisation de React Spring pour les animations](./react-spring.md)
+* [Animation à l’aide de Framer Motion](./framer-motion.md)
+
+Plongeons dans chaque sujet pour comprendre comment utiliser efficacement ces ressources.
diff --git a/fr/animation-resources/animejs.md b/fr/animation-resources/animejs.md
@@ -0,0 +1,106 @@
+---
+chapter: 26
+pageNumber: 254
+description: Création d’animations avec Anime.js, une bibliothèque d’animations JavaScript légère.
+---
+
+## Création d’animations avec Anime.js
+
+Anime.js s’agit d’une bibliothèque d’animation JavaScript légère dotée d’une API simple mais puissante.
+
+**Installation**
+
+Vous pouvez inclure Anime.js dans votre projet à l’aide de npm :
+
+```bash
+npm install animejs
+```
+
+Vous pouvez également utiliser un CDN :
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+```
+
+**Animation de base**
+
+Voici un exemple simple d’utilisation de Anime.js pour animer un élément :
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animation Anime.js</title>
+</head>
+<body>
+    <div id="box" style="width:100px; height:100px; background-color:red;"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+    <script>
+        anime({
+            targets: '#box',
+            translateX: 250,
+            duration: 1000
+        });
+    </script>
+</body>
+</html>
+```
+
+**Animation avancée**
+
+Anime.js fournit diverses fonctionnalités pour les animations avancées, telles que les images clés, la chronologie et l’accélération.
+
+
+- **Images clés:**
+Les images clés vous permettent de définir plusieurs étapes d’une animation. Voici un exemple:
+
+```javascript
+anime({
+    targets: '#box',
+    keyframes: [
+        {translateX: 100},
+        {translateY: 100},
+        {translateX: 0},
+        {translateY: 0}
+    ],
+    duration: 4000
+});
+```
+
+
+- **Chronologie:**
+Les chronologies vous permettent de séquencer des animations. Voici un exemple:
+
+```javascript
+var tl = anime.timeline({
+    easing: 'easeOutExpo',
+    duration: 750
+});
+
+tl.add({
+    targets: '#box',
+    translateX: 250
+}).add({
+    targets: '#box',
+    translateY: 250
+}, '-=500'); // Démarre 500 ms avant la fin de l’animation précédente
+```
+
+
+- **Assouplissement:**
+Anime.js offre une variété d’options d’accélération pour rendre les animations plus naturelles. Voici un exemple:
+
+```javascript
+anime({
+    targets: '#box',
+    translateX: 250,
+    duration: 1000,
+    easing: 'easeInOutQuad'
+});
+```
+
+{% hint style="info" %}
+Pour plus de détails et d’exemples, consultez la documentation Anime.js.
+{% endhint %}
diff --git a/fr/animation-resources/framer-motion.md b/fr/animation-resources/framer-motion.md
@@ -0,0 +1,109 @@
+---
+chapter: 26
+pageNumber: 255
+description: Utilisation de Framer Motion pour les animations dans les applications React.
+---
+
+## Animation à l’aide de Framer Motion
+
+Framer Motion est une bibliothèque de mouvements prête pour la production pour React. Il facilite la création d’animations complexes.
+
+**Installation**
+
+Vous pouvez inclure Framer Motion dans votre projet à l’aide de npm:
+
+```bash
+npm install framer-motion
+```
+
+**Animation de base**
+
+Voici un exemple simple d’utilisation de Framer Motion pour animer un composant:
+
+```javascript
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const AnimatedComponent = () => {
+    return (
+        <motion.div animate={{ x: 100 }} transition={{ duration: 1 }}>
+            Je vais me déplacer vers la droite
+        </motion.div>
+    );
+};
+
+export default AnimatedComponent;
+```
+
+**Animation avancée**
+
+Framer Motion fournit diverses fonctionnalités pour les animations avancées, telles que les images clés, les mouvements et les animations de mise en page.
+
+
+- **Images clés:**
+Les images clés vous permettent de définir plusieurs étapes d’une animation. Voici un exemple :
+
+```javascript
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const KeyframeComponent = () => {
+    return (
+        <motion.div
+            animate={{ x: [0, 100, 0] }}
+            transition={{ duration: 2, ease: 'easeInOut' }}
+        >
+            Je vais faire des allers-retours
+        </motion.div>
+    );
+};
+
+export default KeyframeComponent;
+```
+
+
+- **Gestes**
+Framer Motion vous permet de créer des animations basées sur les gestes de l’utilisateur. Voici un exemple:
+
+```javascript
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const GestureComponent = () => {
+    return (
+        <motion.div
+            drag
+            dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
+        >
+            Traîne-moi partout
+        </motion.div>
+    );
+};
+
+export default GestureComponent;
+```
+
+
+- **Animations de mise en page**
+Framer Motion facilite l’animation des modifications de mise en page. Voici un exemple:
+
+```javascript
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+const LayoutAnimationComponent = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <motion.div layout onClick={() => setIsOpen(!isOpen)} style={{ background: 'lightblue', padding: '10px' }}>
+            {isOpen ? 'Click to collapse' : 'Click to expand'}
+        </motion.div>
+    );
+};
+
+export default LayoutAnimationComponent;
+```
+
+{% hint style="info" %}
+Pour plus de détails et d’exemples, consultez la documentation de Framer Motion.
+{% endhint %}
diff --git a/fr/animation-resources/gsap.md b/fr/animation-resources/gsap.md
@@ -0,0 +1,80 @@
+---
+chapter: 26
+pageNumber: 291
+description: Premiers pas avec GSAP, une bibliothèque puissante pour créer des animations hautes performances.
+---
+
+## Premiers pas avec GSAP
+
+GSAP (GreenSock Animation Platform) est une bibliothèque puissante pour la création d’animations hautes performances. Il est largement utilisé en raison de sa robustesse et de sa flexibilité.
+
+**Installation**
+
+Vous pouvez inclure GSAP dans votre projet à l’aide de npm: 
+
+
+```bash
+npm install gsap
+```
+
+Vous pouvez également utiliser un CDN:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
+```
+
+**Animation de base**
+
+Voici un exemple simple d’utilisation de GSAP pour animer un élément:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animation GSAP</title>
+</head>
+<body>
+    <div id="box" style="width:100px; height:100px; background-color:red;"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
+    <script>
+        gsap.to("#box", {x: 100, duration: 1});
+    </script>
+</body>
+</html>
+```
+
+**Animation avancée**
+
+GSAP fournit diverses fonctionnalités pour les animations avancées, telles que les chronologies, l’échelonnement et l’assouplissement.
+
+
+- **Chronologie:**
+Les chronologies vous permettent de séquencer des animations. Voici un exemple:
+
+```javascript
+const name = "John";
+const greeting = `Hello, ${name}!`;
+console.log(greeting); // Output: Hello, John!
+```
+
+
+- **Tituber:**
+Tituber vous permet d’animer plusieurs éléments avec un délai entre chacun. Voici un exemple: 
+
+```javascript
+gsap.to(".box", {x: 100, duration: 1, stagger: 0.2});
+```
+
+
+- **Assouplissement:**
+GSAP offre une variété d’options d’accélération pour rendre les animations plus naturelles. Voici un exemple:
+
+```javascript
+gsap.to("#box", {x: 100, duration: 1, ease: "bounce"});
+```
+
+{% hint style="info" %}
+Pour plus de détails et d’exemples, consultez la documentation GSAP.
+{% endhint %}