I’m working in Webflow and have a screen loader that has a 4 second duration on first homepage visit and a 2 second duration on subsequent visits. I want my text to animate once that loader screen is complete but I’m not sure how to have the delay know to do 4 or 2 seconds.
I tried adding a delay to each animation but that just applies to the animation itself each time it appears on the screen since they’re set to automatically reset when out of the viewport. I think the question I’m trying to ask is, is there a way to listen for when the loader takes 4s vs 2s and let the text animate accordingly?
Here’s the text animation JS:
<script>
window.addEventListener("DOMContentLoaded", (event) => {
// Split text into spans
let typeSplit = new SplitType("[text-split]", {
types: "words, chars",
tagName: "span"
});
// Link timelines to scroll position
function createScrollTrigger(triggerElement, timeline) {
// Reset tl when scroll out of view past bottom of screen
ScrollTrigger.create({
trigger: triggerElement,
start: "top bottom",
onLeaveBack: () => {
timeline.progress(0);
timeline.pause();
}
});
// Play tl when scrolled into view (60% from top of screen)
ScrollTrigger.create({
trigger: triggerElement,
start: "top 60%",
onEnter: () => timeline.play()
});
}
$("[words-slide-up]").each(function (index) {
let tl = gsap.timeline({ paused: true });
tl.from($(this).find(".word"), { opacity: 0, yPercent: 100, duration: 0.5, ease: "back.out(2)", stagger: { amount: 0.5 } });
createScrollTrigger($(this), tl);
});
$("[words-rotate-in]").each(function (index) {
let tl = gsap.timeline({ paused: true });
tl.set($(this).find(".word"), { transformPerspective: 1000 });
tl.from($(this).find(".word"), { rotationX: -90, duration: 0.6, ease: "power2.out", stagger: { amount: 0.6 } });
createScrollTrigger($(this), tl);
});
$("[words-slide-from-right]").each(function (index) {
let tl = gsap.timeline({ paused: true });
tl.from($(this).find(".word"), { opacity: 0, x: "1em", duration: 0.6, ease: "power2.out", stagger: { amount: 0.2 } });
createScrollTrigger($(this), tl);
});
$("[letters-slide-up]").each(function (index) {
let tl = gsap.timeline({ paused: true });
tl.from($(this).find(".char"), { yPercent: 100, duration: 0.2, ease: "power1.out", stagger: { amount: 0.6 } });
createScrollTrigger($(this), tl);
});
$("[letters-slide-down]").each(function (index) {
let tl = gsap.timeline({ paused: true });
tl.from($(this).find(".char"), { yPercent: -120, duration: 0.3, ease: "power1.out", stagger: { amount: 0.7 } });
createScrollTrigger($(this), tl);
});
$("[letters-fade-in]").each(function (index) {
let tl = gsap.timeline({ paused: true });
tl.from($(this).find(".char"), { opacity: 0, duration: 0.2, ease: "power1.out", stagger: { amount: 0.8 } });
createScrollTrigger($(this), tl);
});
$("[letters-fade-in-random]").each(function (index) {
let tl = gsap.timeline({ paused: true });
tl.from($(this).find(".char"), { opacity: 0, duration: 0.05, ease: "power1.out", stagger: { amount: 0.4, from: "random" } });
createScrollTrigger($(this), tl);
});
$("[scrub-each-word]").each(function (index) {
let tl = gsap.timeline({
scrollTrigger: {
trigger: $(this),
start: "top 90%",
end: "top center",
scrub: true
}
});
tl.from($(this).find(".word"), { opacity: 0.2, duration: 0.2, ease: "power1.out", stagger: { each: 0.4 } });
});
// Avoid flash of unstyled content
gsap.set("[text-split]", { opacity: 1 });
});
</script>
And here’s the page loader script:
<script>
// variables
let customEase =
"M0,0,C0,0,0.13,0.34,0.238,0.442,0.305,0.506,0.322,0.514,0.396,0.54,0.478,0.568,0.468,0.56,0.522,0.584,0.572,0.606,0.61,0.719,0.714,0.826,0.798,0.912,1,1,1,1";
let counter = {
value: 0
};
let loaderDuration = 4;
// If not a first time visit in this tab
if (sessionStorage.getItem("visited") !== null) {
loaderDuration = 2;
counter = {
value: 75
};
}
sessionStorage.setItem("visited", "true");
function updateLoaderText() {
let progress = Math.round(counter.value);
$(".loader_number").text(progress);
}
function endLoaderAnimation() {
$(".trigger").click();
}
let tl = gsap.timeline({
onComplete: endLoaderAnimation
});
tl.to(counter, {
value: 100,
onUpdate: updateLoaderText,
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
});
tl.to(".loader_progress", {
width: "100%",
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
}, 0);
</script>
