Créer une barre "scroll progress" sur site Webflow

Découvrez dans ce tutoriel comment créer un indicateur de progression horizontale (barre de remplissage) qui évolue au fur et à mesure que les visiteurs de votre site Webflow font défiler la page.

Le tutoriel en vidéo

Le tutoriel en 4 étapes

1. Créer et designer la barre

Créer un div block "wrapper"
Lui donner un nom (Ex : scroll-progresss_wrapper)
Définir une position "Fixed ou sticky" à ce div block et lui ajouter une valeur z-index suffisamment élevé pour qu'il se trouve toujours au premier plan.
Créer deux divs blocs enfants au div block scroll-progresss_wrapper
Donner leurs un nom et une couleur différente
Ajouter une position absolute à ces deux divs afin qu'ils se superposent
Donner à ces deux divs une largeur (widht) de 100% et la hauteur que vous souhaitez (3rem dans le tutoriel vidéo)

2. Ajouter le déclencheur de l'animation

Sélectionner l'élément "body" de votre page et ajouter un trigger ⚡️ sur cet élément. Dans le menu " Page Trigger " du panneau Interactions, choisissez une animation de type "While page is scrolling".

Animation Webflow "while page is scrolling"

3. Créer l'animation "au scroll"

Donnez-lui un nom (par exemple, "scroll_progress_indicator").
Assurez-vous que votre élément (barre de remplissage) soit sélectionné, puis cliquez sur le signe + à 0 % et choisissez "Scale" dans la liste déroulante des options d'animations.
Une fois scale sélectionné, modifiez la position de l'axe des x à 0. ( ⚠️ Attention à ne modifier que la valeur de l'axe des X)
Cliquez sur votre élément à 100 % et, toujours sur Scale, changez la valeur de l'axe des x à 1.

Animation Webflow Scale d'un élément de 0 à 100%

4. Modifier l'origine de votre barre de progression horizontale

Si votre animation part du centre vers les extérieurs, pas de panique, c'est "normal" ! Pour le modifier, il faut définir une origine qui donnera une direction à votre barre de progression.

Pour ça, c'est très simple :

Sélectionner votre div 'scroll-progress"
Faites défiler le panneau de style vers le bas jusqu'à Effets.
Cliquez sur l'icône Plus d'options (...) à côté de Transformations 2D et 3D.
Définissez l'origine vers la gauche (si vous souhaitez que la barre de progression, progresse de gauche à droite)