Logo Reveal Loader [Resource]

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/CustomEase.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.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

<div data-load-wrap class="loader">
  <div data-load-bg class="loader__bg">
    <div data-load-progress class="loader__bg-bar"></div>
  </div>
  <div data-load-container class="loader__container">
    <div class="loader__logo-wrap">
      <div class="loader__logo-item is--base">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 178 40" fill="none" class="loader__logo-img">
          <path d="M161.77 13.4645C161.143 14.0944 160.07 13.6483 160.07 12.7574V0H156.085V15C156.085 16.6569 154.747 18 153.097 18H138.154V22H150.863C151.75 22 152.195 23.0771 151.567 23.7071L142.722 32.5858L145.54 35.4142L154.385 26.5356C155.01 25.9075 156.079 26.3491 156.085 27.2347V40L160.07 40L160.07 25C160.07 23.3431 161.408 22 163.058 22H178.001V18H165.284C164.405 17.9936 163.965 16.9273 164.583 16.2985L164.588 16.2929L173.433 7.41421L170.615 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>
      </div>
      <div data-load-logo class="loader__logo-item is--top">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 178 40" fill="none" class="loader__logo-img">
          <path d="M161.77 13.4645C161.143 14.0944 160.07 13.6483 160.07 12.7574V0H156.085V15C156.085 16.6569 154.747 18 153.097 18H138.154V22H150.863C151.75 22 152.195 23.0771 151.567 23.7071L142.722 32.5858L145.54 35.4142L154.385 26.5356C155.01 25.9075 156.079 26.3491 156.085 27.2347V40L160.07 40L160.07 25C160.07 23.3431 161.408 22 163.058 22H178.001V18H165.284C164.405 17.9936 163.965 16.9273 164.583 16.2985L164.588 16.2929L173.433 7.41421L170.615 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>
      </div>
    </div>
    <div class="loader__text-wrap">
      <span data-load-text data-load-reset class="loader__text-el">Hold tight</span>
      <span data-load-text data-load-reset class="loader__text-el">Hi there!</span>
    </div>
  </div>
</div>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.loader {
  z-index: 100;
  color: #fff;
  width: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0% 0% auto;
}

.loader__bg {
  background-color: #0a0a0a;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.loader__container {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.loader__bg-bar {
  z-index: 1;
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: #fff;
  width: 100%;
  height: .5em;
  position: absolute;
  inset: auto 0% 0%;
  transform: scale3d(0, 1, 1);
}

.loader__logo-wrap {
  justify-content: center;
  align-items: center;
  width: 12em;
  height: 3em;
  display: flex;
  position: relative;
}

.loader__logo-item {
  width: 100%;
  position: absolute;
}

.loader__logo-item.is--base {
  opacity: .2;
}

.loader__logo-item.is--top {
  -webkit-clip-path: inset(0% 100% 0% 0%);
  clip-path: inset(0% 100% 0% 0%);
}

.loader__logo-img {
  width: 100%;
  display: block;
}

.loader__text-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 3.5em;
}

.loader__text-el {
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: -.25em;
  padding-bottom: .25em;
  font-family: Haffer Mono, Arial, sans-serif;
  position: absolute;
}

[data-load-reset]{ opacity: 0; }

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

function initLogoRevealLoader(){
  gsap.registerPlugin(CustomEase, SplitText);
  CustomEase.create("loader", "0.65, 0.01, 0.05, 0.99");

  const wrap = document.querySelector("[data-load-wrap]");
  if (!wrap) return;

  const container = wrap.querySelector("[data-load-container]");
  const bg = wrap.querySelector("[data-load-bg]");
  const progressBar = wrap.querySelector("[data-load-progress]");
  const logo = wrap.querySelector("[data-load-logo]");
  const textElements = Array.from(wrap.querySelectorAll("[data-load-text]"));

  // Reset targets that are * not * split text targets
  const resetTargets = Array.from(
    wrap.querySelectorAll('[data-load-reset]:not([data-load-text])')
  );
  
  // Main loader timeline
  const loadTimeline = gsap.timeline({ 
    defaults: { 
      ease: "loader",
      duration: 3
    }
  })
  .set(wrap,{ display: "block" })
  .to(progressBar, { scaleX: 1 })
  .to(logo, { clipPath:"inset(0% 0% 0% 0%)" }, "<")
  .to(container,{ autoAlpha: 0, duration: 0.5 })
  .to(progressBar,{ scaleX: 0, transformOrigin: "right center", duration: 0.5},"<")
  .add("hideContent", "<")
  .to(bg, { yPercent: -101, duration: 1 },"hideContent")
  .set(wrap,{ display: "none" });
  
  
  // If there are items to hide FOUC for, reset them at the start
  if (resetTargets.length) {
    loadTimeline.set(resetTargets, { autoAlpha: 1 }, 0);
  }
  
  // If there's text items, split them, and add to load timeline
  if (textElements.length >= 2) {
    const firstWord = new SplitText(textElements[0], { type: "lines,chars", mask: "lines" });
    const secondWord = new SplitText(textElements[1], { type: "lines,chars", mask: "lines" });
    
    // Set initial states of the text elements and letters
    gsap.set([firstWord.chars, secondWord.chars], { autoAlpha: 0, yPercent: 125 });
    gsap.set(textElements, { autoAlpha: 1 });

    // first text in
    loadTimeline.to(firstWord.chars, {
      autoAlpha: 1,
      yPercent: 0,
      duration: 0.6,
      stagger: { each: 0.02 }
    }, 0);

    // first text out while second text in
    loadTimeline.to(firstWord.chars, {
      autoAlpha: 0,
      yPercent: -125,
      duration: 0.4,
      stagger: { each: 0.02 }
    }, ">+=0.4");

    loadTimeline.to(secondWord.chars, {
      autoAlpha: 1,
      yPercent: 0,
      duration: 0.6,
      stagger: { each: 0.02 }
    }, "<");

    // second text out
    loadTimeline.to(secondWord.chars, {
      autoAlpha: 0,
      yPercent: -125,
      duration: 0.4,
      stagger: { each: 0.02 }
    }, "hideContent-=0.5");
  }
}

// Initialize Logo Reveal Loader
document.addEventListener("DOMContentLoaded", () => {
  initLogoRevealLoader();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

.wf-design-mode .loader{ display: none; }

[data-load-reset]{ opacity: 0; }

Implementation

Duration

The overall timeline length is dynamic. It’s simply the sum of all animations inside it. The main drivers are the [data-load-progress] and [data-load-logo] reveals, which take 3s by default. That value comes from the defaults object in the GSAP timeline, so if you want to adjust how long the loader runs, that’s the first place to tweak.

Change logo

To make this as easy as possible to implement, we use a clip-path to reveal the 'full opacity' version of our logo. Make sure the div that has this clip-path applied, also has an attribute of [data-load-logo].

Change logo fill direction

By default, we make the logo fill from left-to-right. This is because of: clip-path: inset(0% 100% 0% 0%) on our [data-load-logo] div. For example, if you want your logo to fill from bottom-to-top, make sure to set it to inset(100% 0% 0% 0%) in CSS.

Progress bar

This is a simple div marked with [data-load-progress]. It has its transform-origin set to the left, so that if we scale it from 0 → 1 on the x-axis, it fills from left-to-tight.

Text elements

If you want text animations in your loader, wrap each text block in an element marked with [data-load-text]. The loader is designed to work with two text blocks, which it splits into characters and animates in-and-out in sequence.

Don't worry about the warning GSAP might give you about calling SplitText before fonts are loaded. We use very short text blocks, so there's no text that could wrap in an awkward way.

Prevent FOUC (Flash Of Unstyled Content)

When your page first loads, the browser renders HTML and CSS immediately, but your JavaScript takes a moment to kick in. If you plan to animate elements from a hidden state (like opacity: 0), they may briefly appear on screen before GSAP applies its 'from' values. That quick flicker is called a FOUC; Flash of Unstyled Content.

To prevent this, you can add a [data-load-reset] attribute to any element that shouldn’t be visible right away. In your CSS, set [data-load-reset] { opacity: 0; }. Then, as the very first step in your GSAP timeline, set those elements back to visible. By the time the timeline starts animating, GSAP has already applied all the correct initial states, so the flicker never happens.

Locked

Live preview

Resource details

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

Logos

Reveal

GSAP

Timeline

Animation

Original source

Ilja van Eck

Logo Reveal Loader

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Duration

Change logo

Change logo fill direction

Progress bar

Text elements

Prevent FOUC (Flash Of Unstyled Content)

Willem Loading Animation

Number Loader in 3 Steps

Creator Credits

Need help?

Join the Osmo Slack Community

Unlock the Osmo Vault

Upgrade toLifetime

Logo Reveal Loader

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Duration

Change logo

Change logo fill direction

Progress bar

Text elements

Prevent FOUC (Flash Of Unstyled Content)

Related resources

Willem Loading Animation

Number Loader in 3 Steps

Creator Credits

Unlock the
Osmo Vault

Upgrade to
Lifetime