Formation Anime.JS
| € HT / personne |
| 3 jours (21 heures) |
Présentation
Anime.js est une bibliothèque JavaScript légère dédiée à l’animation d’éléments DOM, SVG et d’objets JavaScript. Grâce à cette formation complète, vous apprendrez à concevoir des animations fluides, expressives et performantes pour enrichir vos interfaces web et offrir des expériences utilisateurs dynamiques et modernes.
Vous serez initié aux bases d’Anime.js, depuis l’installation jusqu’aux premières animations CSS, en passant par la manipulation de propriétés, d’objets JS et de formes SVG. Chaque notion est accompagnée d’exemples concrets pour vous permettre une prise en main rapide.
Vous explorerez les timelines, les keyframes, les easings personnalisés et les trajectoires complexes, afin de créer des séquences animées riches et synchronisées. Des ateliers pratiques vous aideront à structurer vos animations de manière modulaire et cohérente.
Des cas d’usage concrets vous permettront d’appliquer les compétences acquises à des projets réels, tout en respectant les bonnes pratiques de performance et d’accessibilité.
À date de la formation, nous vous présenterons la dernière version du logiciel Anime.JS
Objectifs
- Maîtriser les fondamentaux de la bibliothèque Anime.js et son fonctionnement sur le DOM, les objets JavaScript et les éléments SVG
- Créer des animations web fluides, séquentielles ou synchronisées, à l’aide des timelines, keyframes et motion paths
- Comprendre et manipuler les courbes d’animation pour renforcer l’impact visuel et l’expérience utilisateur
- Structurer des animations complexes dans un projet web interactif, en respectant les bonnes pratiques d’accessibilité et de performance
- Intégrer Anime.js dans des environnements modernes (React, Vue, Angular) et mettre en œuvre des animations modulaires et maintenables
Public visé
- Développeurs web et de jeux vidéo
- Développeurs front-end
Pré-requis
- Connaissance de base en HTML5 et JavaScript
Programme de notre formation Anime.JS
Introduction à Anime.js
- Qu’est-ce qu’Anime.js ?
- Avantages par rapport à CSS / jQuery / GSAP
- Cas d’usage courants : loader, intro de site, interactions UX
- Intégration via CDN vs npm
- Configuration d’un projet de base (HTML / JS / Anime.js)
- Premiers tests avec anime({})
Les courbes d’animation
- targets : sélecteurs CSS, tableaux, objets JS
- Manipulation dynamique
- CSS : translate, rotate, scale, opacity, etc.
- Couleurs : RGB, HEX, HSL, avec interpolation fluide
- Objets JavaScript : propriétés numériques
- Propriétés de base : duration, delay, easing, loop
- Changement de plusieurs propriétés en une animation
- Callbacks : begin, update, complete
Création et gestion des animations
- Notions de linear, easeInOutQuad, spring
- Choisir une courbe adaptée à l’effet souhaité
- Utilisation de easings.net
- Simuler différents effets avec anime.js
Les timelines
- Construction d’une timeline
- Ajout d’étapes avec .add()
- Gestion du timing relatif
- Animer plusieurs éléments ensemble
- Organisation logique d’une animation complexe
Keyframes et effets dynamiques
- Définition : tableau d’étapes intermédiaires
- Application sur une ou plusieurs propriétés
- rebond, zoom + rotation
- Découpage de texte lettre par lettre
- Animer chaque lettre séparément
Contrôle programmatique
- play(), pause(), restart(), reverse()
- Exemple de contrôle via boutons
- Analyser et manipuler les animations actives
- Réagir à une animation en cours dans l’application
Animation SVG et motion path
- Cibler les attributs SVG : d, strokeDasharray, strokeDashoffset
- Effets de tracé de trait
- Utilisation de anime.path()
- Mouvement d’un objet sur un tracé SVG
- Gestion de la rotation orientée sur le chemin
Ateliers pratiques
- Cercle SVG animé
- Texte ou logo animé
- Titre avec apparition mot à mot
- Fond avec transition fluide
- Boutons avec hover animé
- Ouverture/fermeture de menu mobile
Intégration avec d’autres frameworks
- Utilisation dans le cycle de vie
- Bonnes pratiques d’optimisation
- Exemple combiné avec WebGL
Bonnes pratiques & performances
- Minimiser le nombre d’animations actives
- Déclenchement au scroll
- Désactivation des animations pour certains utilisateurs
- Feedback utilisateur vs animation décorative
Pour aller plus loin
Formation Unity
Formation Unreal
Formation React
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Afficher tous les témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Noter la formation
| € HT / personne |
| 3 jours (21 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
