Fonctions d’easing dans Webflow : guide visuel de chaque courbe

March 1, 2024

· 10 min

Un guide visuel des fonctions d’easing de Webflow : brève histoire de l’easing, effet de chaque courbe, comment choisir la bonne courbe d’easing et équivalents GSAP.

Ce projet sur les fonctions d’easing dormait depuis un moment dans notre compte. Il nous a servi de guide visuel quand nous débutions avec Webflow. En le retrouvant l’autre jour, il nous a semblé judicieux de l’étoffer et de le partager comme guide visuel des fonctions d’easing par défaut de Webflow. Vous trouverez ci-dessous un guide visuel, un lien vers un projet clonable plus complet, ainsi que la liste des fonctions d’easing disponibles avec une description de leur effet. Mais commençons par un petit retour sur l’histoire des fonctions d’easing.

Les racines mathématiques

Les fonctions d’easing reposent sur de riches fondations mathématiques. Le concept d’easing remonte à l’étude de la physique et du calcul infinitésimal, où les principes d’accélération et de décélération régissent le mouvement des objets dans le monde réel. Mathématiciens et physiciens ont mis au point des formules pour décrire ces mouvements naturels, posant les bases de ce qui serait un jour appliqué à l’animation numérique. Les fonctions quadratique, cubique, quartique et quintique, entre autres, offrent une base mathématique pour simuler les subtilités du mouvement et de la vitesse, permettant aux animations de dépasser les limites de la progression linéaire.

L’évolution dans l’animation

Le passage des mathématiques à l’animation a commencé avec les techniques traditionnelles dessinées à la main. Les premiers animateurs, comme ceux des débuts de Disney, appliquaient intuitivement les principes de l’easing pour donner vie à leurs créations, bien avant que le terme « easing » ne soit formellement inventé. Ils observaient le mouvement du monde réel et en capturaient l’essence image par image, pour créer des animations fluides qui transmettaient émotion et caractère. Cette attention méticuleuse à la dynamique du mouvement a posé les bases des fonctions d’easing, même si tout se faisait alors à la main.

La révolution numérique

Avec l’arrivée de l’infographie et de l’animation numérique, les principes de l’easing ont trouvé un nouveau terrain pour s’épanouir. L’ère numérique a permis un contrôle précis des courbes de mouvement, donnant aux animateurs et aux designers la possibilité d’appliquer des fonctions mathématiques complexes avec aisance (jeu de mots voulu, « ease » signifiant « aisance »). Les logiciels ont commencé à intégrer ces fonctions d’easing, en proposant des options prédéfinies comme « ease-in », « ease-out » et « elastic » pour animer des objets de façon visuellement agréable.

Les fonctions d’easing dans la conception d’interfaces

L’usage des fonctions d’easing a dépassé l’animation traditionnelle pour jouer un rôle important dans la conception d’interfaces (UI) et d’expérience utilisateur (UX). À mesure que les interfaces numériques devenaient plus interactives, les designers ont compris l’importance de l’easing pour rendre les transitions plus naturelles et intuitives. L’ouverture en douceur d’un menu, le rebond d’une notification, l’apparition en fondu d’une boîte de dialogue. Toutes ces interactions ont profité des fonctions d’easing, qui enrichissent l’expérience de l’utilisateur en imitant la fluidité du monde naturel.

La toile numérique d’aujourd’hui

Aujourd’hui, les fonctions d’easing sont un outil indispensable dans la boîte à outils du designer numérique, intégrées aux plateformes de conception web comme Webflow, aux bibliothèques d’animation et aux logiciels de conception d’interfaces. Elles aident les designers à créer des expériences numériques immersives et captivantes, qui stimulent l’imagination de l’utilisateur et retiennent son attention. Des équations mathématiques du passé aux pages web interactives d’aujourd’hui, les fonctions d’easing ont traversé le temps, évoluant et s’adaptant, sans que leur mission fondamentale change : donner vie au monde numérique et le rendre aussi riche et dynamique que le monde qui s’étend derrière nos fenêtres.

Mise à jour : il existe désormais une version GSAP de ce guide

Le guide visuel ci-dessous présente les fonctions d’easing par défaut de Webflow (l’ancien IX2) telles qu’elles étaient au moment de la rédaction. Depuis, Webflow a racheté GreenSock et GSAP est désormais gratuit et intégré aux nouvelles interactions de Webflow, nous avons donc conçu un guide complémentaire : A Visual Guide to GSAP Easing ↗

Il couvre tout le vocabulaire d’easing de GSAP, avec des lecteurs jouables en direct pour chaque courbe : l’échelle des puissances (power0 à power4) associée aux noms de Penner que vous connaissez déjà, les courbes douces (Sine, Expo, Circ), les courbes à personnalité (Back, Elastic, Bounce) et les extras propres à GSAP que l’easing traditionnel n’a jamais eus (RoughEase, SlowMo, CustomEase, CustomBounce, CustomWiggle). Il propose une course d’easings côte à côte, du code à copier-coller sur chaque carte et un tableau d’équivalence complet qui associe chaque easing entre Webflow, GSAP, Penner et CSS.

Si vous animez avec les nouvelles interactions de Webflow basées sur GSAP, commencez par là. Le guide Webflow classique ci-dessous reste valable pour le travail sur IX2.

Si vous connaissez déjà un easing Webflow par son nom, voici son équivalent GSAP : Ease Out Quint correspond à power4.out, Ease In Out Cubic à power2.inOut, Ease Out Back à back.out(1.7), Ease Out Elastic à elastic.out(1, 0.3) et Out Bounce à bounce.out. Linear correspond à none, et l’easing par défaut de GSAP est power1.out.

Vous pouvez faire défiler l’interaction ci-dessus ou consulter le projet complet et clonable ici.

Passons enfin au cœur du sujet : que fait chaque fonction d’easing ?

Linear (none)

Origine et sens : Aussi rectiligne qu’une route dans le désert. Linear implique un rythme de changement uniforme : ni accélération ni décélération, juste une allure constante du début à la fin.
Ce que ça fait : Déplace ou fait apparaître les objets à vitesse constante. Parfait pour ceux qui apprécient la simplicité et la prévisibilité dans leurs animations. C’est aussi l’easing à utiliser pour les boucles sans fin, comme le bandeau défilant alimenté par le CMS que nous avons construit.

Ease

Origine et sens : Pensez à vous glisser dans un bain chaud. Cela démarre lentement, accélère, puis ralentit à nouveau, pour une transition douce et réconfortante.
Ce que ça fait : Donne un aspect naturel aux animations en démarrant lentement, en accélérant au milieu, puis en ralentissant à la fin. C’est le choix par défaut, et pour une bonne raison !

Ease in

Origine et sens : Comme entrer sur la pointe des pieds dans le fameux bain : tout est dans un début tout en douceur.
Ce que ça fait : Démarre l’animation lentement, puis accélère. Idéal pour les éléments qui quittent l’écran, car ils prennent de la vitesse en partant.

Ease out

Origine et sens : L’opposé de l’ease in, comme se détendre enfin complètement dans le bain.
Ce que ça fait : Démarre plus brusquement et décélère jusqu’à un arrêt en douceur. Idéal pour les éléments qui arrivent à l’écran : le départ rapide donne une impression de réactivité, et la fin lente une sensation naturelle de friction.

Ease in out

Origine et sens : Le meilleur des deux mondes : un début et une fin tout en douceur, avec un peu de peps au milieu.
Ce que ça fait : Démarre et termine lentement, avec une accélération au milieu. Le couteau suisse des transitions qui doivent paraître dynamiques tout en restant fluides.

Quad

Origine et sens : Quad vient de « quadratique », qui désigne un polynôme du second degré. C’est comme une promenade tranquille qui prend peu à peu de la vitesse.
Ce que ça fait : Les animations dotées d’un easing Quad démarrent lentement et accélèrent en douceur au fil de leur progression, selon une courbe quadratique. C’est plus subtil que certains de ses cousins plus spectaculaires, parfait pour les transitions discrètes et les mouvements simples.

Cubic

Origine et sens : Issue de « cubique », cette fonction correspond à un polynôme du troisième degré. Imaginez une voiture qui accélère en douceur après un stop. Elle démarre lentement, mais prend de la vitesse de façon plus marquée que Quad.
Ce que ça fait : Les animations Cubic commencent encore plus doucement que Quad, mais accélèrent plus vite, ce qui crée une courbe plus prononcée. Elles sont donc idéales pour attirer l’attention tout en gardant une progression fluide.

Quart

Origine et sens : Quart vient de « quartique », un polynôme du quatrième degré. C’est comme un sprinteur qui jaillit des starting-blocks, avec une montée en puissance progressive suivie d’une accélération fulgurante.
Ce que ça fait : Avec un easing Quart, les animations démarrent très lentement puis prennent rapidement de la vitesse, ce qui crée une courbe d’accélération abrupte. Idéal pour les mouvements dynamiques qui doivent souligner un changement ou une arrivée importants.

Quint

Origine et sens : Quint dérive de « quintique », un polynôme du cinquième degré. Imaginez le lancement d’une fusée : un bref instant d’immobilité sur le pas de tir avant une ascension puissante.
Ce que ça fait : Les animations Quint ont le démarrage le plus lent de ce groupe, puis accélèrent de façon spectaculaire, avec une courbe très marquée. Cette fonction convient parfaitement aux entrées dramatiques ou quand vous voulez créer un fort impact visuel.

Sine

Origine et sens : Sine repose sur la sinusoïde mathématique, connue pour sa nature douce et oscillante. C’est comme le doux va-et-vient des vagues sur une plage.
Ce que ça fait : L’easing Sine suit la courbe douce d’une sinusoïde : la vitesse change donc de façon progressive et harmonieuse. Il en résulte un mouvement naturel et organique, apaisant et agréable à l’œil, idéal pour les transitions subtiles.

Expo

Origine et sens : Expo est l’abréviation d’« exponentiel », une croissance de plus en plus rapide. Imaginez la courbe d’accélération d’un grand huit lancé dans la descente.
Ce que ça fait : Les animations Expo démarrent de façon presque imperceptible, puis explosent en mouvement, avec une courbe d’accélération extrêmement raide. Cette fonction est idéale pour les transitions rapides et pleines d’énergie qui doivent capter l’attention tout de suite.

Circ

Origine et sens : Circ renvoie à « circulaire » et incarne le mouvement le long d’une trajectoire circulaire, vers l’intérieur ou vers l’extérieur. Pensez à l’arc régulier d’une balle lancée en l’air.
Ce que ça fait : Les animations Circ se déplacent avec la douceur et la précision d’un arc de cercle, en démarrant lentement puis en accélérant d’une manière à la fois naturelle et élégante. Parfait pour les éléments qui doivent bouger ou changer avec grâce et fluidité.

Back

Origine et sens : Back évoque un mouvement qui dépasse le point de départ ou d’arrivée avant de revenir, comme on tire en arrière un lance-pierre avant de le relâcher.
Ce que ça fait : L’easing Back fait dépasser leur cible aux animations avant qu’elles ne se stabilisent, ce qui crée un effet de rebond espiègle. Il apporte une qualité vivante et élastique aux transitions, les rendant plus dynamiques et plus engageantes.

Elastic

Origine et sens : Elastic, comme son nom l’indique, incarne le comportement d’un élastique qui s’étire puis claque en retour. C’est la diva des fonctions d’easing, avec un mouvement spectaculaire et exagéré.
Ce que ça fait : Les animations Elastic s’étirent et rebondissent avec une élasticité vive et exagérée, donnant l’impression que les éléments se déplacent avec l’énergie et la souplesse d’un élastique. Cette fonction est parfaite pour les animations accrocheuses et pleines de vie, qui ajoutent une touche de fantaisie et de fun.

Bounce, bounce past

Origine et sens : Comme une balle qui rebondit, ces interactions imitent la physique du rebond contre une surface, Bounce Past ajoutant un léger dépassement pour le côté dramatique.
Ce que ça fait : Crée un effet ludique et engageant où les éléments rebondissent avant de se stabiliser. Il donne de la vie et de l’énergie à la page.

Swing from to, swing from, swing to

Origine et sens : Pensez à un pendule ou à une balançoire. Ces interactions capturent l’essence du mouvement de balancier, d’un côté à l’autre, en commençant ou en finissant par un balancement.
Ce que ça fait : Ajoute aux éléments un mouvement de balancier élégant, qui crée une impression de rythme et de fluidité. Idéal pour attirer l’attention de façon subtile et sophistiquée.

Et voilà, l’essentiel est dit. L’histoire des fonctions d’easing est une fascinante saga d’innovation, un entrelacement d’art et de science, qui reflète la quête incessante de l’humanité pour reproduire dans ses créations la beauté et la complexité du mouvement.

Prêt à mettre ces courbes d’easing au travail ? Notre article sur la maîtrise des animations dynamiques dans Webflow montre ce qu’elles apportent à toute une page, et les commandes de slider dance of the dots sont un bon exemple d’easing à copier. D’autres projets à cloner et à adapter se trouvent dans nos cloneables Webflow.

Foire aux questions

Qu’est-ce qu’une fonction d’easing ?

Une fonction d’easing contrôle la façon dont la vitesse d’une animation évolue entre son début et sa fin. Au lieu de se déplacer à allure constante, un élément peut démarrer lentement, accélérer, dépasser sa cible ou rebondir, ce qui rend le mouvement plus naturel.

Comment choisir la bonne courbe d’easing pour les animations Webflow ?

Commencez par ease out pour la plupart des transitions d’interface, car le départ rapide paraît réactif et la fin lente semble naturelle. Utilisez ease in pour les éléments qui partent, ease in out pour un mouvement qui traverse l’écran, et linear pour les boucles ou tout ce qui doit garder une vitesse constante. Réservez back, elastic et bounce aux moments où vous voulez de la personnalité.

Ces fonctions d’easing fonctionnent-elles toujours dans les interactions Webflow basées sur GSAP ?

Oui, les mêmes noms de style Penner correspondent aux easings GSAP. Quad, Cubic, Quart et Quint deviennent power1 à power4, et Sine, Expo, Circ, Back, Elastic et Bounce gardent leur nom. Le guide complémentaire GSAP ci-dessus contient le tableau d’équivalence complet.