Matt Perry de Framer et moi jetons un œil à la bibliothèque d'animation React Framer Motion.
Tout d'abord, nous examinons la simplicité de l'API. Vous contrôlez tout de manière très déclarative via des accessoires sur les éléments de votre JSX. Le contrôle de l'animation au niveau de cette couche est très intuitif et connecté à l'interface utilisateur et à l'état de manière significative.
Chaque exemple que nous examinons est plus réel et implique plus de fonctionnalités de ce dont Framer Motion est capable. Les développeurs React adoreront la syntaxe de tout cela, et tous les autres adoreront les résultats incroyablement performants et fluides.
Nous finissons par regarder Framer lui-même, qui utilise cette bibliothèque exacte en interne pour faire tout l'animation que Framer fait. Intrigué par Framer? Téléchargez Framer X.
Démo 1: Syntaxe de base
Démo 2: Variantes
Démo 3: AnimatePresence et layoutTransition
Bonus: consultez la fonctionnalité «faire défiler pour ignorer» dans la fenêtre contextuelle de l'image.