Maitriser Framer Motion : Guide Complet pour des Animations Epoustouflantes

Bienvenue dans ce guide professionnel sur la maitrise de Framer Motion pour creer des animations epoustouflantes dans les applications React. Que vous soyez debutant ou que vous ayez deja une certaine experience avec Framer Motion, ce tutoriel couvrira les bases et vous permettra de creer des animations impressionnantes avec facilite.

Introduction

Framer Motion est un outil puissant qui simplifie le processus de creation d'animations dans les applications React. Il fournit une API declarative, facilitant la creation et la gestion des animations sans code complexe.

Pour Commencer

Pour commencer, vous devrez installer Framer Motion dans votre projet React :

npm install framer-motion
# ou
yarn add framer-motion

Ensuite, importez Framer Motion dans vos composants React :

import { motion } from 'framer-motion';

Concepts Cles

1. Prop Animation

La prop animate vous permet de definir l'etat final de vos animations.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    animate={{ opacity: 1 }}
    initial={{ opacity: 0 }}
    transition={{ duration: 1 }}
  >
    Bonjour le Monde !
  </motion.div>
);

2. Keyframes

Les keyframes vous permettent de definir plusieurs etats intermediaires pour une animation.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    animate={{ x: [0, 100, 0] }}
    transition={{ duration: 2, ease: 'easeInOut' }}
  />
);

3. Variants

Les variants sont des etats predefinis qui peuvent etre appliques aux composants.

import { motion } from 'framer-motion';
 
const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: '-100%' },
};
 
export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <motion.div
      animate={isOpen ? 'open' : 'closed'}
      variants={variants}
    >
      <button onClick={() => setIsOpen(!isOpen)}>
        Basculer
      </button>
    </motion.div>
  );
};

4. Animations de Gestes

Framer Motion offre des animations de gestes comme whileHover, whileTap, etc., pour creer des composants interactifs.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    whileHover={{ scale: 1.1 }}
    whileTap={{ scale: 0.9 }}
  >
    Survolez et cliquez-moi
  </motion.div>
);

5. Drag

Rendez n'importe quel composant deplacable avec la prop drag.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div drag />
);

6. Motion Values

Les motion values fournissent un moyen de piloter dynamiquement les animations basees sur une entree.

7. Animations Declenchees par le Scroll

Declenchez des animations lorsqu'un composant devient visible avec la prop whileInView.

import { motion } from 'framer-motion';
 
export const MyComponent = () => (
  <motion.div
    whileInView={{ opacity: 1 }}
    initial={{ opacity: 0 }}
  />
);

Sujets Avances

Framer Motion englobe des sujets plus avances tels que les animations de sortie, les animations de layout et l'integration avec des bibliotheques tierces.

Animations de Sortie

Les animations de sortie vous permettent d'animer les composants hors du DOM avec AnimatePresence.

Animations de Layout

Animez automatiquement le layout d'un composant lorsque sa taille ou sa position change en utilisant la prop layout.

Conclusion

Felicitations ! Vous avez acquis une comprehension fondamentale de Framer Motion et de ses fonctionnalites cles. Experimentez avec ces concepts et creez des animations epoustouflantes et interactives dans vos applications React.

Pour plus de lecture et d'exemples, consultez la documentation officielle de Framer Motion. Bonne animation !

References

• Documentation Framer Motion par Framer B.V.