Un guide visuel pour simplifier les fonctions dans Webflow

July 2, 2026

· 5 min

Dans cet article, nous examinerons rapidement l'historique des fonctions d'assouplissement et aborderons en profondeur le fonctionnement de chaque fonction.

Ce projet de fonctions d'accélération/décélération traînait dans notre compte depuis un certain temps. Nous l'utilisions comme un bon guide visuel lorsque nous débutions avec Webflow. En tombant dessus l'autre jour, il nous a semblé judicieux de l'étoffer un peu et de le partager comme guide visuel des fonctions d'accélération/décélération par défaut de Webflow. Vous trouverez ci-dessous un guide visuel, ainsi qu'un lien vers un cloneable plus complet, et une liste des fonctions d'accélération/décélération disponibles avec une description de ce qu'elles font. Mais commençons par un peu d'histoire des fonctions d'accélération/décélération.

Les racines mathématiques

Au cœur des fonctions d'accélération/décélération se trouve une riche base mathématique. Le concept d'accélération/décélération remonte à l'étude de la physique et du calcul différentiel et intégral, où les principes d'accélération et de décélération régissent le mouvement des objets dans le monde réel. Les mathématiciens et les physiciens ont développé des formules pour décrire ces mouvements naturels, jetant les bases de ce qui serait finalement appliqué à l'animation numérique. Les fonctions quadratiques, cubiques, quartiques et quintiques, 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

La transition 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, ont appliqué intuitivement les principes d'accélération/décélération pour donner vie à leurs créations, bien avant que le terme ne soit officiellement inventé. Ils ont observé le mouvement du monde réel, en capturant son essence image par image, pour créer des animations qui coulaient naturellement et transmettaient émotion et caractère. Cette attention méticuleuse à la dynamique du mouvement a jeté les bases des fonctions d'accélération/décélération, bien que tout cela ait été fait manuellement à l'époque.

La révolution numérique

Avec l'avènement de l'infographie et de l'animation numérique, les principes d'accélération/décélération ont trouvé un nouveau terrain pour s'épanouir. L'ère numérique a permis le contrôle précis et la manipulation des courbes de mouvement, permettant aux animateurs et aux designers d'implémenter des fonctions mathématiques complexes avec facilité (le jeu de mots est intentionnel). Les logiciels ont commencé à intégrer ces fonctions d'accélération/décélération, offrant aux utilisateurs des options prédéfinies telles que « ease-in », « ease-out » et « elastic » pour animer des objets de manière visuellement attrayante.

Les fonctions d'accélération/décélération dans la conception d'interfaces utilisateur

L'application des fonctions d'accélération/décélération s'est étendue au-delà de l'animation traditionnelle, trouvant un rôle crucial dans la conception d'interfaces utilisateur (UI) et d'expérience utilisateur (UX). À mesure que les interfaces numériques devenaient plus interactives, les designers ont reconnu l'importance des fonctions d'accélération/décélération pour rendre les transitions plus naturelles et intuitives. L'expansion fluide d'un menu, le rebond d'une notification ou l'apparition progressive d'une boîte de dialogue — toutes ces interactions ont bénéficié des fonctions d'accélération/décélération, améliorant 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'accélération/décélération sont un outil indispensable dans la boîte à outils du designer numérique, intégrées de manière transparente dans les plateformes de conception web comme Webflow, les bibliothèques d'animation et les logiciels de conception d'interface utilisateur. Elles permettent aux designers de créer des expériences numériques immersives et captivantes qui captivent 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'accélération/décélération ont traversé le temps, évoluant et s'adaptant, mais leur mission principale reste la même : donner vie au monde numérique, le rendant aussi riche et dynamique que le monde extérieur à nos fenêtres.

Mise à jour — il existe maintenant une version GSAP de ce guide

Le guide visuel ci-dessous présente les fonctions d'accélération/décélération par défaut de Webflow (IX2 classique) telles qu'elles étaient au moment de la rédaction. Depuis, Webflow a acquis GreenSock et GSAP est maintenant gratuit et intégré aux nouvelles interactions de Webflow — nous avons donc créé un guide complémentaire : Un guide visuel de l'accélération/décélération GSAP ↗

Il couvre l'intégralité du vocabulaire d'accélération/décélération de GSAP avec des exemples interactifs et jouables pour chaque courbe : l'échelle de puissance (power0–power4) associée aux noms Penner que vous connaissez déjà, les opérateurs fluides (Sine, Expo, Circ), les accélérations/décélérations de personnalité (Back, Elastic, Bounce), et les extras spécifiques à GSAP que l'accélération/décélération traditionnelle n'a jamais eus (RoughEase, SlowMo, CustomEase, CustomBounce, CustomWiggle). Il y a une course d'accélération/décélération côte à côte, du code à copier-coller sur chaque carte, et un tableau d'équivalence complet reliant chaque accélération/décélération entre Webflow, GSAP, Penner et CSS.

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

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

Enfin, entrons dans le vif du sujet : que fait chaque fonction d'accélération ?

LINÉAIRE (AUCUN)

Origine et signification : Aussi direct qu'une autoroute dans le désert. Linéaire implique un taux de changement uniforme – pas d'accélération, pas de décélération, juste un rythme constant du début à la fin.
Ce qu'il fait : Déplace ou estompe des objets à une vitesse constante. Parfait pour ceux qui apprécient la simplicité et la prévisibilité dans leurs animations.

FLUIDITÉ

Origine et signification : Imaginez-vous vous glisser dans un bain chaud. Cela commence lentement, s'accélère, puis ralentit à nouveau, offrant une transition douce et agréable.
Ce qu'il fait : Ajoute une sensation naturelle aux animations en commençant lentement, en s'accélérant au milieu, puis en ralentissant à la fin. Ce n'est pas pour rien qu'il s'agit de l'option par défaut !

ACCÉLÉRATION

Origine et signification : Comme si l'on entrait sur la pointe des pieds dans le bain susmentionné, il s'agit de commencer en douceur.
Ce qu'il fait : Démarre l'animation lentement, puis accélère. Idéal pour attirer l'attention sur les éléments qui apparaissent à l'écran.

DÉCÉLÉRATION

Origine et signification : L'opposé de l'accélération – comme si l'on se détendait enfin complètement dans le bain.
Ce qu'il fait : Commence plus brusquement et décélère jusqu'à un arrêt en douceur. Idéal pour les éléments qui sortent de la scène.

ACCÉLÉRATION ET DÉCÉLÉRATION PROGRESSIVES

Origine et signification : Combine le meilleur des deux mondes – un début et une fin en douceur avec un peu de dynamisme au milieu.
Fonctionnement : Commence et se termine lentement, avec une accélération au milieu. Le couteau suisse des transitions qui doivent être dynamiques tout en restant fluides.

QUAD

Origine et signification : Quad vient de "quadratique", faisant référence à un polynôme du second degré. C'est comme une promenade tranquille qui accélère progressivement.
Fonctionnement : Les animations avec une fonction d'accélération QUAD commencent lentement et accélèrent en douceur à mesure qu'elles progressent, suivant une courbe quadratique. C'est plus subtil que certaines de ses homologues plus spectaculaires, parfait pour les transitions douces et les mouvements simples.

CUBIC

Origine et signification : Dérivée de "cubique", cette fonction est liée à un polynôme du troisième degré. Imaginez une voiture qui accélère en douceur à partir d'un panneau stop – elle démarre lentement mais prend de la vitesse de manière plus perceptible que QUAD.
Fonctionnement : Les animations CUBIC commencent encore plus doucement que QUAD mais accélèrent plus rapidement, créant une courbe plus prononcée. Cela les rend idéales pour attirer l'attention tout en conservant une progression fluide.

QUART

Origine et signification : Quart vient de "quartique", un polynôme du quatrième degré. C'est comme un sprinter qui explose hors des blocs, avec une montée en puissance progressive menant à une accélération rapide.
Fonctionnement : Avec une fonction d'accélération QUART, les animations commencent très lentement puis prennent rapidement de la vitesse, créant une courbe d'accélération abrupte. C'est idéal pour les mouvements dynamiques qui doivent souligner un changement ou une arrivée significative.

QUINT

Origine et signification : Quint est dérivé de « quintique », se rapportant à un polynôme du cinquième degré. Imaginez le lancement d'une fusée : une pause momentanée sur la rampe de lancement avant une ascension puissante.
Ce qu'elle fait : Les animations QUINT ont le démarrage le plus lent de ce groupe, mais accélèrent ensuite de manière spectaculaire, offrant une courbe très prononcée. Cette fonction est parfaite pour les entrées dramatiques ou lorsque vous souhaitez créer un fort impact visuel.

SINE

Origine et signification : Le sinus est basé sur l'onde sinusoïdale mathématique, connue pour sa nature douce et oscillante. C'est comme le doux flux et reflux des vagues sur une plage.
Ce qu'elle fait : L'accélération SINE offre une oscillation douce et harmonique de la vitesse de l'animation. Cela crée un mouvement naturel et organique, apaisant et agréable à l'œil, idéal pour les transitions subtiles.

EXPO

Origine et signification : Expo est l'abréviation d'« exponentiel », indiquant une croissance à un rythme de plus en plus rapide. Imaginez la courbe d'accélération d'un grand huit qui dévale.
Ce qu'elle fait : Les animations EXPO commencent presque imperceptiblement puis explosent en mouvement, offrant une courbe d'accélération extrêmement abrupte. Cette fonction est idéale pour les transitions rapides et énergiques qui doivent capter l'attention rapidement.

CIRC

Origine et signification : Circ se rapporte à « circulaire », incarnant le mouvement d'entrée ou de sortie le long d'une trajectoire circulaire. Pensez à l'arc fluide d'une balle lancée en l'air.
Ce qu'elle fait : Les animations d'accélération CIRC se déplacent avec la fluidité et la précision d'un arc circulaire, commençant lentement et accélérant d'une manière qui semble à la fois naturelle et élégante. C'est parfait pour les éléments qui doivent se déplacer ou transiter avec grâce et fluidité.

BACK

Origine et signification : Back implique un mouvement qui dépasse le point de départ ou d'arrivée, puis revient, comme tendre un lance-pierre avant de le relâcher.
Ce qu'il fait : L'accélération BACK fait en sorte que les animations dépassent leur cible avant de se stabiliser, créant un effet de rebond ludique. Il ajoute une qualité vive et élastique aux transitions, les rendant plus dynamiques et attrayantes.

ELASTIC

Origine et signification : Elastic, comme son nom l'indique, incarne le comportement d'un élastique qui s'étire et se rétracte. C'est la diva des fonctions d'accélération, offrant un mouvement spectaculaire et exagéré.
Ce qu'il 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 des animations accrocheuses et vibrantes qui ajoutent une touche de fantaisie et de plaisir.

BOUNCE, BOUNCE PAST

Origine et signification : Tout comme une balle qui rebondit, ces interactions imitent la physique d'un rebond contre une surface, avec Bounce Past qui ajoute un léger dépassement pour plus d'effet.
Ce qu'il fait : Crée un effet ludique et attrayant où les éléments rebondissent avant de se stabiliser. Il apporte vie et énergie à la page.

SWING FROM TO, SWING FROM, SWING TO

Origine et Signification : Imaginez un pendule ou une balançoire – ces interactions capturent l'essence du mouvement de balancement, soit d'un côté à l'autre, commençant ou se terminant par un balancement.
Ce qu'il fait : Ajoute un mouvement de balancement élégant aux éléments, créant un sentiment de rythme et de fluidité. Idéal pour attirer l'attention de manière subtile et sophistiquée.

Voilà pour l'essentiel, l'histoire des fonctions d'accélération est une saga fascinante d'innovation, un entrelacement d'art et de science, reflétant la quête incessante de l'humanité pour reproduire la beauté et la complexité du mouvement dans nos créations.