Faire tourner un élément à l'infini

outils :

Vidéo

Dans cet épisode, Sacha, cofondateur de l'agence Webflow Gemeos vous montre comment faire tourner un élément à l'infini dans Webflow

1. Sélectionnez l’élément qui va déclencher l’animation

  1. Sélectionnez l’élément que vous souhaitez faire tourner (ex : circle)
  2. Cliquez dans le panneau d’interaction et choisissez le trigger “Scroll into view”

2. Créez l’animation

1. Sélectionnez l’animation “Rotate”

2. Attribuez une position par défaut à l’élément : 0 DEG et 0s Duration

3. Ajoutez une transition pour modifier la position de l’élément et indiquez la durée de l’animation : 360 DEG en 15 sec (par exemple)

4. Ajoutez une transition pour que l’élément reprenne sa position par défaut une fois la rotation terminée : 0 DEG et 0s Duration

3. Appliquez la caractéristique Loop à l’animation

Cochez “Loop” au niveau du trigger pour que l’animation se fasse en boucle

Photo de l'auteur
Sacha D.
Mis à jour le
8/10/2024
Product Designer, la tête créative du duo. Il dirige les projets du début à la fin, assure la direction créative de Gemeos et s'assure que tous les projets atteignent les résultats souhaités.
Vous êtes bridé avec votre site actuel ?
On en discute ?
Accueil
>
Gemeos Académie
>
Faire tourner un élément à l'infini
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail