preloader

Summary

A full-screen splash with the DAVIES wordmark and eight vertical bars. Each pair of bars fills to a random width, snaps to 100%, then the next pair starts. When all bars are full, a CSS clip-path wipes the splash off-screen and runAnimations() boots every other GSAP scene on the page.

HTML structure (minimal)

<div class="preloader overflow-hidden">
  <div class="site-name"><span>DAVIES</span></div>
  <div class="preloader-gutters">
    <div class="bar"><div class="inner-bar"></div></div>
    <!-- repeat 8 times -->
  </div>
</div>

Key SCSS tokens

.preloader {
  --preloader-clip: 0%;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  clip-path: inset(0 0 var(--preloader-clip) 0);

  .preloader-gutters {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    height: 100%;
  }

  .bar {
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
  }

  .inner-bar {
    background: var(--primary);
    height: 100%;
    width: 0;
  }
}

Animation logic

// assets/js/gsapAnimation.js — loader()
function animateBars() {
  for (var i = 0; i < 2; i++) {
    var randomWidth = Math.floor(Math.random() * 101);
    gsap.to(innerBars[i + increment], { width: randomWidth + '%', duration: 0.3, ease: 'none' });
  }
  gsap.delayedCall(0.3, function () {
    for (var i = 0; i < 2; i++) {
      gsap.to(innerBars[i + increment], { width: '100%', duration: 0.3, ease: 'none' });
    }
    increment += 2;
    if (increment < innerBars.length) animateBars();
    else gsap.timeline({ onComplete: () => { $('.preloader').remove(); runAnimations(); } })
              .to('.preloader', { '--preloader-clip': '100%', duration: 0.3, ease: 'none' });
  });
}
$(window).on('load', animateBars);

Notable details

• Recursive pair-by-pair fill instead of a linear progress bar — feels organic and unpredictable.
• Animates a CSS custom property (--preloader-clip) inside a clip-path: inset(...) for the wipe-off, so the bars stay visually intact while the splash retracts.
• runAnimations() is intentionally only called from the loader's onComplete (or the else branch when no preloader exists) — this is the single boot gate for every scroll-trigger on the page.

Use when

• You want a deterministic hand-off from "page assets ready" to "scroll-trigger setup" and you want every entrance animation to wait for it.
• A loader that visualises asset progress without exposing actual percent values.

Caveats

• The component is hidden after first paint, so the screenshot pipeline will fall back to a palette gradient placeholder.
• Removing the preloader requires moving runAnimations() into a $(window).on('load') fallback — gsapAnimation.js already does this in the else branch.
• If you ship the bare HTML without GSAP loaded, the splash never closes.