VIDEO
HIGHLIGHT
Log InSign up
Scroll Progress Indicator - Webflow interactions and animations tutorial
SummaryTranscriptChat

Scroll Progress Indicator - Webflow interactions and animations tutorial

Building a Scroll Indicator: Step-by-Step Guide

Designing the Progress Bar

  • In this lesson, the focus is on creating a scroll indicator to visualize page scrolling progress through four main steps.
  • A div block will be used for the progress bar, styled with a background color, 100% width, and a height of 10 pixels. It will be fixed at the top-left of the viewport with a high z-index to ensure visibility above other content.
  • The div block will receive a specific class name for easier animation management later in the process.

Setting Up Scroll Trigger and Animation

  • A page trigger based on scrolling movement will be added in the Interactions panel to initiate actions as users scroll down.
  • The scroll animation named "Scroll Progress" is created to scale the div block horizontally along the x-axis from 0% at the top of the page to 100% at the bottom.

Adjusting Transform Origin

  • Initially, scaling using transform does not yield expected results; adjustments are necessary for proper functionality.
Video description

We'll create a horizontal progress indicator which scales as we scroll down the page. This lesson starts by covering the design of the div block used as the indicator, then moves into creating the scroll trigger, configuring the animation, and finally, adjusting the transform origin. Steps in the video: 00:00 - Introduction 00:20 - Design 00:58 - Trigger 01:10 - Animation 01: 56 - Origin Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content. ---------- Get started with Webflow: https://university.webflow.com/courses/webflow-101-crash-course http://webflow.com http://twitter.com/webflow http://facebook.com/webflow