Faire tourner un élément à l'infini

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

‍