Comment créer une animation sur Webflow

Comment créer une animation sur Webflow

Résumez cet article avec une IA
min
de lecture
Publié le
July 6, 2021
Mis à jour le
This is some text inside of a div block.
Et si on bossait ensemble ?
+ 350 projets réalisés
100% de satisfaction
Éligibles CII
Devis gratuit

Le panneau Interactions du Designer vous permet de créer des interactions complexes à l'aide de déclencheurs et d'animations. Un déclencheur, comme le fait de cliquer sur un élément ou de faire défiler la page vers le bas, peut lancer ou même animer en continu un ou plusieurs éléments de la page.

La base de l'intéraction est de choisir l'élément auquel le déclancheur (Trigger) sera attaché, que ce soit un élément précis tel qu'on container ou la page en elle-même. Pour ce faire, selectionnez l'élément en question dans votre canevas puis allez dans l'onglet Interactions du panneau de style

Ici, vous devrez choisir votre type de déclancheur (Trigger). Vous avez le choix entre Le panneau Interactions est divisé en deux sections principales :

Les déclencheurs d'éléments (element triggers)

La section supérieure du panneau Interactions nous permet d'ajouter les éléments suivantsdes déclencheurs d'éléments, qui déclenchent une animation lorsque nous interagissons avec un élément comme le survol ou le clic.

L'ajout d'un déclencheur d'élément se fait en deux étapes principales :

Sélectionnez l'élément (section, bouton, bloc div, etc.) que vous souhaitez configurer comme déclencheurAppuyez sur le signe + pour sélectionner le type de déclencheur qui vous convient

Les déclencheurs de pages (page triggers).

La section inférieure du panneau Interactions est l'endroit où nous pouvonsajouter des déclencheurs de page, qui déclenchent une animation en cas de changement d'état de la page, par example lorsque la page est chargée.

Contrairement à un déclencheur d'élément, l'ajout d'un déclencheur de page n'implique qu'une seule étape : il suffit d'appuyer sur le signe + pour sélectionner le type de déclencheur.

déclencher une animation Webflow

Configurer le déclencheur (Trigger)

Après avoir sélectionné le type de déclencheur que nous ajoutons dans le panneau Interactions, nous pouvons spécifier exactement ce que nous voulons qu'il se passe. Les optionsdont vous disposez dépendent du type de déclencheur utilisé.

Par exemple, le déclancheur Scroll into view vous laisse choisir entre une vingtaine d'animations préconçues ou bien sûr en créer une de toutes pièces.

créer une animation Webflow
Besoin d'aide ?
Contactez un expert
Ça s'agite là-bas dedans ?

Vos questions,
nos réponses !

Quelle est la différence entre les animations et les interactions Webflow ?

Animations = effets de base prêts à l'emploi. Interactions = votre terrain de jeu créatif ! Triggers, timelines, conditions... Les interactions, c'est là que la magie opère !

Les animations Webflow fonctionnent-elles sur tous les navigateurs ?

Compatible partout ! Chrome, Safari, Firefox, Edge... Webflow gère les préfixes CSS et fallbacks. Même IE11 survit (mais arrêtez de le supporter, pitié) !

Comment optimiser les performances des animations ?

Transform + opacity = GPU power ! Jamais width/height (lag garanti). Max 3-4 animations simultanées. Mobile ? Keep it simple. Will-change avec modération. Perf first !

Ma question est plus complexe ?

Réserver un call avec un expert
Contactez NocodeFactory
Assez parlé,
à vous de jouer !
🥳 Estimation gratuite !
Merci ! Votre message a bien été envoyé 🥳
😿 Une erreur est survenue. Merci de recommencer
+ 350 projets
déjà réalisés