Loading
Logos
Reveal
GSAP
Timeline
Animation
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
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 structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
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
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
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");
}
}
document.addEventListener("DOMContentLoaded", () => {
initLogoRevealLoader();
})Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
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.
Search
K
Original source
Ilja van EckCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.