Pour : des développeurs Javascript qui ne se sont pas encore bien appropriés les animations avec React.

L’approche traditionnelle des animations en Javascript

Approche standard

Si vous êtes familiers avec le développement web, vous avez déjà manipulé le style des éléments du DOM. Avec le Javascript, on peut modifier les propriétés de style d’un élément HTML directement, mais la technique la plus courante (et la plus performante) est d’ajouter des classes à l’élément et d’utiliser le CSS pour opérer les changements de style.

Si on souhaite ajouter une animation, il suffira dans ce cas de s’appuyer sur la propriété de style transition (ou animation).

Par exemple :

Jusqu’ici, rien de sorcier ni de bien original ! On reprendra cette approche pour React, à la différence qu’on ajoutera un state pour le toggle et on appliquera le changement de classe sur un élément JSX.

Par exemple :

Séquence de plusieurs animations

Quand on doit enchainer plusieurs animations, cela requiert d’être un peu plus subtil. Jquery gère par exemple directement cet enjeu en ajoutant des animations dans la queue d’effets (via la méthode animate), mais ce n’est pas le cas avec React. Alors comment procéder ? En réalité, il existe plusieurs solutions :

• Utiliser des délais. Par exemple :



Ici la couleur du background changera en 0.5s, après quoi l’opacité changera en 1s. Cette technique est rapide d’utilisation mais elle ne permet pas d’enchainer des animations de même nature. D’autre part, elle n’est pas toujours très lisible.

• Utiliser la propriété CSS animation. Par exemple :



Elle est plus adaptée pour des animations complexes et on pourra décrire leur déroulement d’une façon plus claire et plus précise.

NB : Avec animation, on aura également des possibilités supplémentaires comme alterner l’animation ou multiplier ses itérations (y compris en boucle).

Problème : ces animations ne tiennent pas compte des spécificités de React, à commencer par le montage/démontage du composant.

Spécificités des animations en React

Montage et démontage des composants

Le cycle de vie d’un composant React commence par un montage et se termine par un démontage. Sans rentrer dans les détails, le principe c’est que les composants soient mobilisés seulement lorsqu’ils sont utiles. Lorsqu’on opère un fondu entrant/sortant pour faire apparaitre/disparaitre un élément HTML, il est recommandé de monter/démonter le composant concerné.

La bibliothèque React Transition Group répond à ce problème : elle offre plusieurs composants qui ont les props mountOnEnter et unmountOnExit qui gèrent automatiquement le montage et le démontage.

Fonctionnement de React Transition Group

D’autre part, les composants de RTG suivent l’état d’évolution du composant enfant : On assigne le déclenchement de l’animation via la prop in et on définit une durée de l’animation avec la prop timeout. Le composant se charge seulement d’ajouter des classes d’état sur l’élément HTML (e.g appear-active, appear-done, enter-active, enter-done, exit-active, exit-done,) à partir de ces props.

La démarche est donc la même que celle décrite auparavant : on applique du CSS à partir des classes pour provoquer les animations que l’on souhaite. Par exemple :

On pourra également gérer une liste de composants avec le composant TransitionGroup ou SwitchTransition. L’animation d’entrée/sortie de chaque composant sera alors prise en charge par TransitionGroup à partir de la prop key (remplace la prop in ici).

NB : les animations sont simultanées pour TransitionGroup et séquentielles pour SwitchTransition.

Par exemple :

Une animation déclenchée et rendue dans deux composants différents

Avec React, on rencontre un problème supplémentaire : comment faire lorsque l’animation est déclenchée dans un composant mais qu’on souhaite qu’elle soit rendue dans un autre ?

C’est un problème courant avec React qui requiert de déplacer le state relatif à l’animation dans un composant supérieur. Si les deux composants ne sont pas enfant/parent l’un de l’autre, on procédera comme suit :

On place le state dans le premier composant parent des deux composants, puis on descend en props les infos utiles : le booléen d’activation pour le composant de rendu de l’animation, et la fonction de l’événement dans le composant du bouton.

Par exemple :

Animation entre deux routes

Avec React, une route est montée/démontée quand l’utilisateur arrive/quitte une page. Comment alors animer le passage de l’une à l’autre ?

NB : nous prendrons l’exemple de la bibliothèque React Router. Pour un tuto équivalent pour NextJS, suivez ce lien.

Cas 1 : on souhaite une animation visible sur l’une et/ou l’autre page. On peut alors utiliser TransitionGroup : l’animation est déclenchée à chaque changement de route. On ajoute Switch avec la prop location pour conserver l’ancienne route dans la mémoire du Router, et on ajoute les propriétés CSS et le tour est joué !

Par exemple :

Cas 2 : on souhaite une animation spécifique, par exemple un panneau qui passe par-dessus les pages. Dans ce cas, le rendu de l’animation doit être intégrée en-dehors des routes mais quand même à l’intérieur du router pour accéder aux événements de changement de routes.

Par exemple :

Ici, on constate que l’animation est bien autonome du routing : elle n’est pas interrompue par le changement de route.

Pour aller plus loin

React Sprint

Dans cet article, nous nous sommes principalement appuyés sur les animations CSS et sur React Transition Group parce que cette approche couvre efficacement la plupart des besoins.

Néanmoins, si vous souhaitez des animations plus naturelles, vous pouvez vous tourner vers une bibliothèque avec moteur physique comme React Spring. La notion d’animation y a été complètement repensée. L’inconvénient c’est que le style est moins segmenté, l’animation étant décrite en JS, cela s’avère un peu lourd en termes de lisibilité. Il faut donc bien penser à créer des composants.

Animations riches

Pour faire des animations riches, on s’adressera plutôt à un motion designer. Dans ce cas, on peut s’aider de Lottie pour importer les animations After Effects au format JSON. Autre intérêt de Lottie : la communauté a produit de nombreuses animations en accès libre sur le site https://lottiefiles.com/. A vous de voir !