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 %}
diff --git a/fr/animation-resources/react-spring.md b/fr/animation-resources/react-spring.md
@@ -0,0 +1,103 @@
+---
+chapter: 26
+pageNumber: 255
+description: Utilisation de React Spring pour les animations dans les applications React.
+---
+
+## Utilisation de React Spring pour les animations
+
+React Spring est une bibliothèque d’animation basée sur la physique des ressorts pour React qui facilite la création d’animations.
+
+**Installation**
+
+Vous pouvez inclure React Spring dans votre projet à l’aide de npm:
+
+```bash
+npm install react-spring
+```
+
+**Animation de base**
+
+Voici un exemple simple d’utilisation de React Spring pour animer un composant:
+
+```javascript
+import React from 'react';
+import { useSpring, animated } from 'react-spring';
+
+const AnimatedComponent = () => {
+    const props = useSpring({ opacity: 1, from: { opacity: 0 } });
+
+    return <animated.div style={props}>Je vais m’effacer</animated.div>;
+};
+
+export default AnimatedComponent;
+```
+
+**Animation avancée**
+
+React Spring fournit diverses fonctionnalités pour les animations avancées, telles que les transitions, les traînées et les images clés.
+
+
+- **Transitions**
+Les transitions vous permettent d’animer les composants lors de leur montage et de leur démontage. Voici un exemple:
+
+```javascript
+import React, { useState } from 'react';
+import { useTransition, animated } from 'react-spring';
+
+const TransitionComponent = () => {
+    const [items, setItems] = useState([]);
+    const transitions = useTransition(items, item => item.key, {
+        from: { transform: 'translate3d(0,-40px,0)' },
+        enter: { transform: 'translate3d(0,0px,0)' },
+        leave: { transform: 'translate3d(0,-40px,0)' },
+    });
+
+    return (
+        <div>
+            <button onClick={() => setItems([...items, { key: items.length }])}>
+                Add Item
+            </button>
+            {transitions.map(({ item, props, key }) => (
+                <animated.div key={key} style={props}>{item.key}</animated.div>
+            ))}
+        </div>
+    );
+};
+
+export default TransitionComponent;
+```
+
+
+- **Sentiers**
+Les traînées vous permettent d’animer une liste de composants en séquence. Voici un exemple:
+
+```javascript
+import React from 'react';
+import { useTrail, animated } from 'react-spring';
+
+const items = [1, 2, 3];
+
+const TrailComponent = () => {
+    const trail = useTrail(items.length, {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+    });
+
+    return (
+        <div>
+            {trail.map((props, index) => (
+                <animated.div key={index} style={props}>
+                    {items[index]}
+                </animated.div>
+            ))}
+        </div>
+    );
+};
+
+export default TrailComponent;
+```
+
+{% hint style="info" %}
+Pour plus de détails et d’exemples, consultez la documentation de React Spring.
+{% endhint %}
diff --git a/fr/animation-resources/threejs.md b/fr/animation-resources/threejs.md
@@ -0,0 +1,102 @@
+---
+chapter: 26
+pageNumber: 253
+description: Création d’animations 3D avec Three.js, une bibliothèque JavaScript pour les graphiques 3D.
+---
+
+##  Animations 3D avec Three.js
+
+Three.js s’agit d’une bibliothèque JavaScript qui facilite la création de graphiques 3D sur le web. Il est largement utilisé pour créer des expériences 3D immersives.
+
+**Installation**
+
+Vous pouvez inclure Three.js dans votre projet à l’aide de npm:
+
+```bash
+npm install three
+```
+
+Vous pouvez également utiliser un CDN:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+```
+
+**Animation de base**
+
+Voici un exemple simple d’utilisation de Three.js pour créer un cube rotatif:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animation Three.js</title>
+    <style>
+        body { margin: 0; }
+        canvas { display: block; }
+    </style>
+</head>
+<body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+
+        const geometry = new THREE.BoxGeometry();
+        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+        const cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+
+        camera.position.z = 5;
+
+        function animate() {
+            requestAnimationFrame(animate);
+
+            cube.rotation.x += 0.01;
+            cube.rotation.y += 0.01;
+
+            renderer.render(scene, camera);
+        }
+
+        animate();
+    </script>
+</body>
+</html>
+```
+
+**Animation avancée**
+
+Three.js fournit diverses fonctionnalités pour des animations avancées, telles que l’éclairage, les textures et la physique.
+
+- **Éclairage**
+L’ajout d’éclairage à votre scène peut la rendre plus réaliste. Voici un exemple:
+
+```javascript
+const light = new THREE.PointLight(0xffffff);
+light.position.set(10, 10, 10);
+scene.add(light);
+```
+
+
+- **Textures**
+L’application de textures à vos objets peut les rendre plus détaillés. Voici un exemple:
+
+```javascript
+const texture = new THREE.TextureLoader().load('path/to/texture.jpg');
+const material = new THREE.MeshBasicMaterial({ map: texture });
+const cube = new THREE.Mesh(geometry, material);
+```
+
+
+- **Physique**
+L’intégration de la physique peut rendre votre monde 3D plus dynamique. Un moteur physique populaire qui fonctionne avec Three.js est Cannon.js.
+
+{% hint style="info" %}
+Pour plus de détails et d’exemples, consultez la documentation Three.js.
+{% endhint %}
diff --git a/fr/animation-resources/velocityjs.md b/fr/animation-resources/velocityjs.md
@@ -0,0 +1,81 @@
+---
+chapter: 26
+pageNumber: 254
+description: Création d’animations rapides avec Velocity.js, un moteur d’animation performant.
+---
+
+## Animations rapides avec Velocity.js
+
+Velocity.js s’agit d’un moteur d’animation haute performance qui est facile à utiliser et qui fonctionne avec et sans jQuery.
+
+**Installation**
+
+Vous pouvez inclure Velocity.js dans votre projet à l’aide de npm:
+
+```bash
+npm install velocity-animate
+```
+
+Vous pouvez également utiliser un CDN:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>
+```
+
+**Animation de base**
+Voici un exemple simple d’utilisation de Velocity.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 Velocity.js</title>
+</head>
+<body>
+    <div id="box" style="width:100px; height:100px; background-color:red;"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>
+    <script>
+        Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000 });
+    </script>
+</body>
+</html>
+```
+
+**Animation avancée**
+
+Velocity.js fournit diverses fonctionnalités pour les animations avancées, telles que les séquences, l’accélération et les animations SVG.
+
+- **Séquences**
+
+Les séquences vous permettent d’enchaîner les animations. Voici un exemple:
+
+```javascript
+Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000 })
+    .then(() => {
+        return Velocity(document.getElementById('box'), { top: "100px" }, { duration: 1000 });
+    });
+```
+
+
+- **Assouplissement**
+
+Velocity.js offre une variété d’options d’accélération pour rendre les animations plus naturelles. Voici un exemple:
+
+```javascript
+Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000, easing: "spring" });
+```
+
+
+- **Animations SVG**
+
+Velocity.js pouvez également animer des éléments SVG. Voici un exemple:
+
+```javascript
+Velocity(document.querySelector('svg'), { strokeDashoffset: 0 }, { duration: 1000 });
+```
+
+{% hint style="info" %}
+Pour plus de détails et d’exemples, consultez la documentation Velocity.js.
+{% endhint %}