scroll-progress-rail

Summary

A 4px wide fixed rail pinned to the right edge of the viewport, full-height, in solid black. Inside it, a .mil-progress accent-orange bar grows from 0% to 100% height as the user scrolls, scrubbed by ScrollTrigger. Hidden below 992px viewport.

HTML structure (minimal)

<div class="mil-progress-track">
  <div class="mil-progress"></div>
</div>

Key SCSS tokens

.mil-progress-track {
  position: fixed; z-index: 10;
  top: 0; right: 0;
  width: 4px; height: 100%;
  background-color: $dark;

  & .mil-progress {
    width: 4px; height: 0;
    background-color: $accent;
  }

  @media screen and (max-width: 992px) { display: none; }
}

Animation logic

gsap.to('.mil-progress', {
  height: '100%',
  ease: 'sine',
  scrollTrigger: { scrub: 0.3 },
});

// reset on Swup transitions:
gsap.to('.mil-progress', {
  height: 0,
  ease: 'sine',
  onComplete: () => ScrollTrigger.refresh(),
});

Notable details

• A scrub value of 0.3 (instead of true) gives the rail a bit of inertia — it visibly catches up after fast scrolls rather than perfectly tracking the wheel.
• On Swup navigation the rail is reset to height 0 then ScrollTrigger.refresh() is called — important pattern for any scroll-driven decoration in an SPA-style site.
• 4px width is just thick enough to read as part of the design rather than a system scrollbar; the dark background contrasts with light page sections too, keeping it visible.
• Native scrollbars are hidden via ::-webkit-scrollbar { display: none; } — this rail is the only scroll indicator.

Use when

• Long-form editorial pages where a progress indicator rewards committed reading.
• Sites that hide the native scrollbar and need a custom indicator that doesn't compete with content.
• Templates already using ScrollTrigger; the cost is one extra tween.

Caveats

• Hides below 992px width — verify content has its own pacing on tablet/mobile (no progress feedback there).
• Combined with smooth-scroll.js, the inertia can feel laggy on trackpad-heavy machines; consider raising scrub to true for tighter coupling on touch laptops.
• Hiding native scrollbars via ::-webkit-scrollbar only works in Chromium/Webkit; Firefox shows the system scrollbar alongside this rail.