One-page Progress Navigation [Resource]

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

Step 1: Copy structure to Webflow

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy

<nav class="progress-nav">
  <div class="progress-nav__inner">
    <a href="#top" class="progress-nav__logo"><svg xmlns="http://www.w3.org/2000/svg" width="178" height="40" viewbox="0 0 178 40" fill="none" class="progress-nav__logo-svg"><path d="M161.77 13.4645C161.142 14.0944 160.069 13.6483 160.069 12.7574V0H156.084V15C156.084 16.6569 154.746 18 153.096 18H138.154V22H150.862C151.749 22 152.194 23.0771 151.566 23.7071L142.722 32.5858L145.539 35.4142L154.384 26.5356C155.01 25.9075 156.078 26.3491 156.084 27.2347V40L160.069 40L160.069 25C160.069 23.3431 161.407 22 163.058 22H178V18H165.284C164.404 17.9936 163.964 16.9273 164.582 16.2985L164.587 16.2929L173.432 7.41421L170.614 4.58582L161.77 13.4645Z" fill="currentColor"></path><path d="M16.084 37.178C6.27782 37.178 0 29.956 0 20.066C0 10.176 6.27782 3 16.084 3C25.8903 3 32.1681 10.176 32.1681 20.066C32.1681 29.956 25.8903 37.178 16.084 37.178ZM5.2697 20.066C5.2697 26.828 8.33987 32.808 16.084 32.808C23.8282 32.808 26.8984 26.828 26.8984 20.066C26.8984 13.304 23.8282 7.37 16.084 7.37C8.33987 7.37 5.2697 13.304 5.2697 20.066Z" fill="currentColor"></path><path d="M45.478 37.178C38.3754 37.178 34.847 33.498 34.7095 28.714H39.246C39.4293 31.428 41.0789 33.544 45.4322 33.544C49.373 33.544 50.4269 31.796 50.4269 30.094C50.4269 27.15 47.3109 26.828 44.2866 26.184C40.2083 25.218 35.5343 24.022 35.5343 19.146C35.5343 15.098 38.7878 12.384 44.4241 12.384C50.8393 12.384 53.9095 15.834 54.2303 19.882H49.6938C49.373 18.088 48.4107 16.018 44.5157 16.018C41.4914 16.018 40.2083 17.214 40.2083 18.962C40.2083 21.4 42.8202 21.63 46.1195 22.366C50.4269 23.378 55.1009 24.62 55.1009 29.864C55.1009 34.418 51.6183 37.178 45.478 37.178Z" fill="currentColor"></path><path d="M72.6642 21.492C72.6642 18.364 72.0227 16.248 68.5859 16.248C65.2408 16.248 63.1329 18.594 63.1329 22.136V36.534H58.6422V13.074H63.1329V16.018H63.2246C64.4618 14.224 66.6155 12.384 70.1439 12.384C73.3974 12.384 75.4136 13.856 76.3301 16.478H76.4217C78.1172 14.224 80.5 12.384 84.0742 12.384C88.7941 12.384 91.1769 15.236 91.1769 20.25V36.534H86.6862V21.492C86.6862 18.364 86.0447 16.248 82.6079 16.248C79.2628 16.248 77.1549 18.594 77.1549 22.136V36.534H72.6642V21.492Z" fill="currentColor"></path><path d="M106.545 37.224C99.2594 37.224 94.8603 32.164 94.8603 24.804C94.8603 17.49 99.2594 12.338 106.591 12.338C113.831 12.338 118.23 17.444 118.23 24.758C118.23 32.118 113.831 37.224 106.545 37.224ZM99.5343 24.804C99.5343 29.68 101.734 33.498 106.591 33.498C111.357 33.498 113.556 29.68 113.556 24.804C113.556 19.882 111.357 16.11 106.591 16.11C101.734 16.11 99.5343 19.882 99.5343 24.804Z" fill="currentColor"></path></svg></a>
    <div class="progress-nav__wrapper">
      <div data-progress-nav-list="" class="progress-nav__list">
        <div class="progress-nav__indicator"></div>
        <div data-progress-nav-target="#top" class="progress-nav__btn is--before"></div>
        <a data-progress-nav-target="#introduction" href="#introduction" class="progress-nav__btn"><span class="progress-nav__btn-text">1. Intro</span><span class="progress-nav__btn-text is--duplicate">1. Intro</span></a>
        <a data-progress-nav-target="#concept" href="#concept" class="progress-nav__btn"><span class="progress-nav__btn-text">2. Concept</span><span class="progress-nav__btn-text is--duplicate">2. Concept</span></a>
        <a data-progress-nav-target="#product" href="#product" class="progress-nav__btn"><span class="progress-nav__btn-text">3. Product</span><span class="progress-nav__btn-text is--duplicate">3. Product</span></a>
        <a data-progress-nav-target="#result" href="#result" class="progress-nav__btn"><span class="progress-nav__btn-text">4. Result</span><span class="progress-nav__btn-text is--duplicate">4. Result</span></a>
        <div data-progress-nav-target="#bottom" class="progress-nav__btn is--after"></div>
      </div>
    </div>
    <a href="#bottom" class="progress-nav__contact-btn"><span class="progress-nav__btn-text">Get in touch</span><span class="progress-nav__btn-text is--duplicate">Get in touch</span></a>
  </div>
</nav>
<section id="top" data-progress-nav-anchor="" class="section-resource"><h2 class="section-resource__h2">Top</h2></section>
<section id="introduction" data-progress-nav-anchor="" class="section-resource is--flipped"><h2 class="section-resource__h2">Introduction</h2></section>
<section id="concept" data-progress-nav-anchor="" class="section-resource"><h2 class="section-resource__h2">Concept</h2></section>
<section id="product" data-progress-nav-anchor="" class="section-resource is--flipped"><h2 class="section-resource__h2">Product</h2></section>
<section id="result" data-progress-nav-anchor="" class="section-resource"><h2 class="section-resource__h2">Result</h2></section>
<section id="bottom" data-progress-nav-anchor="" class="section-resource is--flipped"><h2 class="section-resource__h2">Bottom</h2></section>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.progress-nav {
  width: 100%;
  padding: 2em;
  position: fixed;
  top: 0;
  left: 0;
}

.progress-nav__inner {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.progress-nav__logo {
  color: inherit;
  text-decoration: none;
}

.progress-nav__logo-svg {
  width: 8em;
}

.progress-nav__wrapper {
  background-color: #c9cce0;
  border-radius: 50em;
  padding: .5em;
}

.progress-nav__list {
  border-radius: 50em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.progress-nav__indicator {
  z-index: 2;
  background-color: #fff;
  border-radius: 50em;
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  left: -2.5em;
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-nav__btn {
  z-index: 3;
  cursor: pointer;
  color: inherit;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  padding-left: 1em;
  padding-right: 1em;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.progress-nav__btn.is--before {
  z-index: 1;
  width: 2.5em;
  height: 2.5em;
  padding-left: 0;
  padding-right: 0;
  position: absolute;
  right: 100%;
}

.progress-nav__btn.is--after {
  z-index: 1;
  width: 2.5em;
  height: 2.5em;
  padding-left: 0;
  padding-right: 0;
  position: absolute;
  left: 100%;
}

.progress-nav__btn-text {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.125em;
  font-weight: 500;
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0%) rotate(0.001deg);
}

.progress-nav__btn-text.is--duplicate {
  position: absolute;
  top: 100%;
}

.progress-nav__btn:hover .progress-nav__btn-text,
.progress-nav__contact-btn:hover .progress-nav__btn-text{
  transform: translateY(-100%) rotate(0.001deg);
}

.progress-nav__contact-btn {
  color: #fff;
  background-color: #2d336b;
  border-radius: 50em;
  height: 3.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.section-resource {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.section-resource.is--flipped {
  color: #fff;
  background-color: #7886c7;
}

.section-resource__h2 {
  font-size: 5em;
  font-weight: 500;
  line-height: 1;
}

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

// Register GSAP Plugins
gsap.registerPlugin(ScrollTrigger);
  
function initProgressNavigation() {
  // Cache the parent container
  let navProgress = document.querySelector('[data-progress-nav-list]');

  // Create or select the moving indicator
  let indicator = navProgress.querySelector('.progress-nav__indicator');
  if (!indicator) {
    indicator = document.createElement('div');
    indicator.className = 'progress-nav__indicator';
    navProgress.appendChild(indicator);
  }
  
  // Function to update the indicator based on the active nav link
  function updateIndicator(activeLink) {
    let parentWidth = navProgress.offsetWidth;
    let parentHeight = navProgress.offsetHeight;
    
    // Get the active link's position relative to the parent
    let parentRect = navProgress.getBoundingClientRect();
    let linkRect = activeLink.getBoundingClientRect();
    let linkPos = {
      left: linkRect.left - parentRect.left,
      top: linkRect.top - parentRect.top
    };
    
    let linkWidth = activeLink.offsetWidth;
    let linkHeight = activeLink.offsetHeight;
    
    // Calculate percentage values relative to parent dimensions
    let leftPercent = (linkPos.left / parentWidth) * 100;
    let topPercent = (linkPos.top / parentHeight) * 100;
    let widthPercent = (linkWidth / parentWidth) * 100;
    let heightPercent = (linkHeight / parentHeight) * 100;
       
    // Update the indicator with a smooth CSS transition (set in your CSS)
    indicator.style.left = leftPercent + '%';
    indicator.style.top = topPercent + '%';
    indicator.style.width = widthPercent + '%';
    indicator.style.height = heightPercent + '%';
  }
  
  // Get all anchor sections
  let progressAnchors = gsap.utils.toArray('[data-progress-nav-anchor]');

  progressAnchors.forEach((progressAnchor) => {
    let anchorID = progressAnchor.getAttribute('id');
    
    ScrollTrigger.create({
      trigger: progressAnchor,
      start: '0% 50%',
      end: '100% 50%',
      onEnter: () => {
        let activeLink = navProgress.querySelector('[data-progress-nav-target="#' + anchorID + '"]');
        activeLink.classList.add('is--active');
        // Remove 'is--active' class from sibling links
        let siblings = navProgress.querySelectorAll('[data-progress-nav-target]');
        siblings.forEach((sib) => {
          if (sib !== activeLink) {
            sib.classList.remove('is--active');
          }
        });
        updateIndicator(activeLink);
      },
      onEnterBack: () => {
        let activeLink = navProgress.querySelector('[data-progress-nav-target="#' + anchorID + '"]');
        activeLink.classList.add('is--active');
        // Remove 'is--active' class from sibling links
        let siblings = navProgress.querySelectorAll('[data-progress-nav-target]');
        siblings.forEach((sib) => {
          if (sib !== activeLink) {
            sib.classList.remove('is--active');
          }
        });
        updateIndicator(activeLink);
      }
    });
  });
}

// Initialize One Page Progress Navigation
document.addEventListener('DOMContentLoaded', () => {
  initProgressNavigation();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

.progress-nav__indicator {
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-nav__btn-text {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0%) rotate(0.001deg);
}

.progress-nav__btn:hover .progress-nav__btn-text,
.progress-nav__contact-btn:hover .progress-nav__btn-text{
  transform: translateY(-100%) rotate(0.001deg);
}

Implementation

Navigation List

A container with the [data-progress-nav-list] attribute that contains all links.

Navigation Links

Each navigation link should have a [data-progress-nav-target="#example"] attribute matching the corresponding section’s ID. Make sure to always add the #. Example below:

 <a data-progress-nav-target="#product" href="#product">3. Product</a>

Anchor Sections

Each section should have the attribute [data-progress-nav-anchor] and an ID that corresponds to the navigation link target. Example below:

<section id="product" data-progress-nav-anchor></section>

Extra sections

Often, one-page layouts include a header and footer that aren’t part of the main navigation. To ensure the navigation indicator enters and exits smoothly, you can hide the #top and #bottom elements on the far left and right sides.

Responsiveness

To keep this resource streamlined and adaptable, we did not build a tablet/mobile variant of the navigation. The script functions identically; only the styling changes.

Locked

Live preview

Resource details

Last updated
September 30, 2025
Category
Navigation
Need help?
Join Slack

Scrolltrigger

Navigation

Progress

Indicator

Anchor

Scrolling

Original source

Dennis Snellenberg

One-page Progress Navigation

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Navigation List

Navigation Links

Anchor Sections

Extra sections

Responsiveness

Scaling Hamburger Navigation

Side Navigation with Wipe Effect

Creator Credits

Need help?

Join the Osmo Slack Community

Unlock the Osmo Vault

Upgrade toLifetime

One-page Progress Navigation

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Navigation List

Navigation Links

Anchor Sections

Extra sections

Responsiveness

Related resources

Scaling Hamburger Navigation

Side Navigation with Wipe Effect

Creator Credits

Unlock the
Osmo Vault

Upgrade to
Lifetime