Créer des animations Webflow : Comparaison entre CSS et JavaScript

‍Résumé des points clés de l'article.

• 3 possibilités pour créer des animations sur Webflow : Javascript, CSS et GSAP
• Si vous souhaitez animer votre site et conserver des supers performances de chargement : les animations CSS et GSAP sont les options à privilégier
• La majorité des animations JavaScript - les plus fréquemment utilisés - peuvent être remplacer par des animations CSS

🎁 Webflow Tips : utiliser l'interface Webflow pour écrire rapidement et sans erreur le code CSS pour vous . Puis copié/collé le grâce à la fonctionnalité CSS preview.

_________________________

Introduction

Webflow est un outil "no-code" reconnu pour sa capacité à créer des sites internet "qui font l'effet wahou". Cette reconnaissance mondiale est en partie dûe à ses animations et la fréquente présence de site développer sur Webflow aux Awwwards.

Sur l'outil, il existe trois principales méthodes pour créer des animations :

• JavaScript, en utilisant le panneau d'interactions,
• CSS, en utilisant les différents états dans le panneau de style ou en ajoutant du code personnalisé,
• GSAP, un sujet que nous avons déjà abordé dans ce précédent article.

Cependant, bien que nous parlions souvent de Webflow et de ses performances, nous discutons rarement de l'impact des animations sur les performances d'un site web.

Alors → Quelles sont les meilleures pratiques pour concilier animations et performances sur son site internet ?

Dans cet article, nous allons donc comparer deux méthodes de créations d'animations - JavaScript et CSS - pour vous aider à faire le meilleur choix.

Animation CSS vs JavaScript : la comparaison

Performance, possibilités, difficultés.. 

C'est quoi une animation CSS ?

Une animation CSS est une transition entre deux états d'un élément HTML, contrôlée par une classe CSS. Elle est généralement utilisée pour des animations simples et légères, comme des changements de couleur ou des effets de survol.

Pour comprendre pleinement comment cibler et animer vos propriétés CSS, je vous recommande de consulter la documentation de référence des sélecteurs CSS → CSS Selector Reference.

C'est quoi une animation JavaScript ?

D'autre part, une animation JavaScript est une animation plus complexe qui peut être contrôlée par du code JavaScript. Elle est généralement utilisée pour des animations plus détaillées qui nécessitent plus de contrôle et de flexibilité.

Avantages de l'utilisation des animations CSS :

1. Légèreté et Rapidité : Les animations CSS sont généralement plus légères et plus rapides que les animations JavaScript. Cela signifie qu'elles utilisent moins de ressources et peuvent réduire le temps de chargement de la page, améliorant ainsi les performances de votre site web et l'expérience utilisateur.
2. Facilité de création et de gestion : Les animations CSS sont souvent plus faciles à créer et à gérer que les animations JavaScript. Cela peut rendre le processus de développement plus efficace et moins sujet à des erreurs.
3. Compatibilité avec Webflow : Si vous utilisez un outil comme Webflow, les animations CSS peuvent être encore plus faciles à créer. Webflow offre une interface visuelle de type "WYSIWYG" qui permet d'écrire rapidement du code HTML et CSS. Cela peut rendre le processus de création d'animations encore plus rapide et plus intuitif.

En résumé, l'utilisation des animations CSS offre de nombreux avantages en termes de performances, d'efficacité et de facilité d'utilisation.

Créer des animations CSS ou bien JavaScript avec Webflow

Webflow rend la création d'animations CSS et JavaScript incroyablement facile. Directement depuis l'interface Designer, vous pouvez utiliser soit le panneau d'interactions pour créer des animations JavaScript, ou bien le panneau de style pour créer des animations CSS.

CSS - Voici comment créer une animation CSS sur Webflow, étape par étape :

1. Sélectionnez une classe CSS : Commencez par choisir la classe CSS que vous souhaitez animer.
2. Définissez un style avec le state 'None' : Configurez le design initial de votre élément en utilisant le state 'None'. C'est l'apparence que votre élément aura avant que l'animation ne se déclenche.
3. Définissez un second comportement/design dans un autre state : Choisissez un autre state, comme 'hover', et définissez un autre design pour cet état. C'est l'apparence que votre élément aura lorsque l'animation sera déclenchée (par exemple, lorsque l'utilisateur survole l'élément avec la souris).
4. Ajoutez une transition : Si vous souhaitez que votre animation soit plus fluide, ajoutez une transition. Cela permettra à votre élément de passer progressivement de son état initial à son état animé, plutôt que de changer instantanément.

JavaScript - Voici comment créer une animation JavaScript sur Webflow, étape par étape :

1. Sélectionnez un élément, une section ou une classe CSS : Commencez par choisir l'élément, la section ou la classe CSS que vous souhaitez animer. Les animations JavaScript peuvent être appliquées à une grande variété d'éléments.
2. Choisissez un trigger : Les triggers sont des événements qui déclenchent l'animation. Webflow offre une variété de triggers, y compris les interactions de la souris, le scroll, le chargement de la page, et plus encore.
3. Définissez les animations : Une fois que vous avez choisi un trigger, vous pouvez commencer à définir vos animations. Vous pouvez choisir parmi une variété d'animations, y compris les mouvements, les rotations, les opacités, et plus encore. Vous pouvez également définir la durée de l'animation, les retards, et d'autres paramètres.
4. Ajoutez des étapes d'animation : Pour des animations plus complexes, vous pouvez ajouter plusieurs étapes d'animation. Chaque étape peut avoir ses propres animations et paramètres.
5. Testez votre animation : Une fois que vous avez défini votre animation, assurez-vous de la tester pour vous assurer qu'elle fonctionne comme prévu. Vous pouvez ajuster les paramètres de l'animation et les triggers au besoin.

‍Mais alors... Js ou CSS pour les animations Webflow ?

De manière générale, même si cela nécessite parfois d'écrire et d'injecter du code personnalisé dans votre projet Webflow, je recommande vivement de privilégier les animations CSS. Après, faîte le de façon intelligente 🤓.

Utilisez l'interface visuelle de Webflow, comme un outil pour faciliter et accélérer l'implémentation des animations CSS. Voici quelques conseils à suivre 👇

Pro tips : utiliser webflow comme assistant de codage avec CSS Preview

Un des grands avantages de Webflow est sa capacité à générer du code CSS pour vous. Cela peut vous faire gagner beaucoup de temps et vous éviter des erreurs.

Prenons l'exemple d'une flèche qui doit se déplacer lorsque l'utilisateur passe la souris dessus (événement "hover"). Avec Webflow, vous pouvez utiliser le panneau de style pour définir l'état initial et l'état final de la flèche, puis utiliser CSS Preview pour récupérer le code CSS généré.

Voici comment procéder :

1. Définir l'état final de la flèche : Dans le panneau de style, attribuez à la flèche sa classe et définissez son état lorsqu'elle est survolée. C'est ici que vous définissez comment la flèche doit se déplacer.
2. Utiliser CSS Preview pour récupérer le code : Une fois que vous avez défini l'état initial et final de la flèche, vous pouvez utiliser CSS Preview pour voir le code CSS que Webflow a généré pour cet état. Copiez ce code.
3. Intégrer le code dans Custom CSS : Ensuite, allez dans Custom CSS et collez le code que vous avez copié. En ajoutant cet état de destination avec l'effet hover à un élément parent, comme le bouton qui contient la flèche, vous permettez à l'animation de se dérouler exactement comme vous l'avez défini.

Exemple de réalisation et injections d'animations CSS - embed code Webflow - par Harshit de Finsweet

En utilisant cette méthode, vous pouvez rapidement et efficacement créer des animations CSS (ou remplacer des animations JavaScript) sur votre site Webflow, et conserver des performances optimales pour votre site.

Conclusion

Webflow offre de nombreuses possibilités pour créer des animations, que ce soit en JavaScript, CSS ou même GSAP. Certaines peuvent être réalisées en "no-code", tandis que d'autres nécessitent une certaine familiarité avec le code.

Il est important de noter que l'utilisation de CSS ou de GSAP pour vos animations peut améliorer la légèreté du script et donc les performances de chargement de votre site web. Comme c'est souvent le cas, les approches qui semblent plus complexes au premier abord peuvent conduire à des résultats supérieurs.

L'avantage à ne pas oublier, c'est que vous pouvez utiliser CSS Preview pour créer et écrire le code d'une animation CSS rapidement et sans erreur avec Webflow. C'est toujours sympa d'utiliser les outils pour vous rendre la tâche plus facile.