I’m currently developing my company’s website and I’ve been following a tutorial to implement a loading animation. However, I’m facing an issue with disabling scrolling during the animation. I’ve tried a few methods found online, but they seem to interfere with my website’s CSS styling. You can check out my site at clickrabbit.co
Any advice would be greatly appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clickrabbit Preloader</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
.cr-loading-overlay {
position: fixed; /* Full screen background */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000; /* Ensure it stays on top */
}
.cr-loading-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
justify-content: center;
}
#cr-svg {
height: 150px;
width: 150px;
stroke: #fff;
fill-opacity: 0;
stroke-width: 4px;
stroke-dasharray: 4500;
animation: draw 2.5s ease forwards;
}
@keyframes draw {
0% {
stroke-dashoffset: 4500;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div class="cr-loading-overlay">
<div class="cr-loading-content">
<svg id="cr-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 871.46 1002.61" width="100%" height="100%">
<path class="cls-1" d="m423.38,181.65c44.25,24.03,51.68,16.29,139.13,49.05,39.1,14.65,75.72,28.36,119.33,52.17,70.67,38.58,101.95,72.14,107.07,66.91,6.3-6.44-35.83-62.89-85.55-107.63-23.14-20.82-43.66-35.28-58.89-45.93-34.08-23.84-63.46-40.26-99.27-58.97-135.97-71.05-141.78-58.69-225.52-107.94-32.58-19.16-53.3-33.74-58.95-28.08-8.98,8.99,27.37,61.87,59.59,97.57,16.17,17.92,48.71,53.35,103.05,82.86h.01Z"/>
<path class="cls-1" d="m857.36,510.15c-15.19-45.64-40.07-78-57.99-97.62-52.16-57.23-124.72-94.39-250.07-130.1-182.2-51.91-204.8-23.49-365.16-74.39C72.4,172.59,11.94,136.12,1.5,151.82c-12.41,18.68,54.25,98.32,129.02,148.08,7.91,6.14,17.22,12.98,28.05,20.07,10.76,7.09,23.05,14.43,36.72,21.65,11.33,5.89,33.68,17.54,61.66,26.4,12.03,3.86,62.11,18.99,127.88,14.31,46.28-3.36,68.18-14.18,111.74-6.2,16.33,2.98,31.78,7.91,34.31,8.67,28.43,9.18,50.39,21.15,65.33,30.51-12.53-1.27-31.84-2.53-55.27-1.27-132.19,7.28-263.62,88.44-302.11,182.83-20.77,50.9-22.03,104.96-22.03,104.96-.32,12.72.19,25.39,1.58,37.73,13.17,125.86,106.55,228.23,228.35,252.47,34.44,6.84,69.51,10.32,141.37,10.57,109.14.44,248.29-12.22,251.4-42.23.25-2.22-6.77-10.95-20.83-28.43-26.72-33.11-34.25-38.74-43.37-41.34-10.76-3.17-19.69-.95-29.12,1.2-20.39,4.62-49.51,10.26-88.69,15.26,17.28-14.69,31.46-32.86,41.53-53.43,8.04-16.4,12.22-31.91,14.37-44.38,4.75-27.22,1.65-49.95-1.33-63.69v-.06c-8.99-41.53-72.43-120.98-76.1-132.69,3.73-.06,9.05-.06,15.38.7,26.08,3.17,41.02,17.41,76.92,44.13,38.87,28.87,46.34,31.08,53.69,31.97,24.25,2.79,44-9.94,49.7-13.86,19.63-13.8,27.03-32.92,31.4-44.57,18.11-48.68,2.6-96.1-5.7-121.05v.02Z"/>
<circle class="cls-1" cx="178.8" cy="869.52" r="48.71" transform="translate(-137.01 39.88) rotate(-9.22)"/>
</svg>
</div>
</div>
<script>
// Change stroke color to black after SVG animation completes
setTimeout(function() {
document.getElementById("cr-svg").style.stroke = "#000";
}, 2500); // Duration of the SVG animation
// Fade out the overlay after the SVG animation and stroke color change
gsap.fromTo(
".cr-loading-overlay",
{opacity: 1},
{
opacity: 0,
duration: 1.5,
delay: 2.5,
onComplete: function() {
document.querySelector(".cr-loading-overlay").style.display = "none";
}
}
);
</script>
</body>
</html>
I tried multiple solutions such as this but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clickrabbit Preloader</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
body.no-scroll {
overflow: hidden;
}
.cr-loading-overlay {
position: fixed; /* Full screen background */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000; /* Ensure it stays on top */
}
.cr-loading-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
justify-content: center;
}
#cr-svg {
height: 150px;
width: 150px;
stroke: #fff;
fill-opacity: 0;
stroke-width: 4px;
stroke-dasharray: 4500;
animation: draw 3.5s ease;
}
@keyframes draw {
0% {
stroke-dashoffset: 4500;
}
100% {
stroke-dashoffset: 0;
}
}
.content {
opacity: 0; /* Hide content initially */
}
</style>
</head>
<body class="no-scroll">
<div class="cr-loading-overlay">
<div class="cr-loading-content">
<svg id="cr-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 871.46 1002.61" width="100%" height="100%">
<path class="cls-1" d="m423.38,181.65c44.25,24.03,51.68,16.29,139.13,49.05,39.1,14.65,75.72,28.36,119.33,52.17,70.67,38.58,101.95,72.14,107.07,66.91,6.3-6.44-35.83-62.89-85.55-107.63-23.14-20.82-43.66-35.28-58.89-45.93-34.08-23.84-63.46-40.26-99.27-58.97-135.97-71.05-141.78-58.69-225.52-107.94-32.58-19.16-53.3-33.74-58.95-28.08-8.98,8.99,27.37,61.87,59.59,97.57,16.17,17.92,48.71,53.35,103.05,82.86h.01Z"/>
<path class="cls-1" d="m857.36,510.15c-15.19-45.64-40.07-78-57.99-97.62-52.16-57.23-124.72-94.39-250.07-130.1-182.2-51.91-204.8-23.49-365.16-74.39C72.4,172.59,11.94,136.12,1.5,151.82c-12.41,18.68,54.25,98.32,129.02,148.08,7.91,6.14,17.22,12.98,28.05,20.07,10.76,7.09,23.05,14.43,36.72,21.65,11.33,5.89,33.68,17.54,61.66,26.4,12.03,3.86,62.11,18.99,127.88,14.31,46.28-3.36,68.18-14.18,111.74-6.2,16.33,2.98,31.78,7.91,34.31,8.67,28.43,9.18,50.39,21.15,65.33,30.51-12.53-1.27-31.84-2.53-55.27-1.27-132.19,7.28-263.62,88.44-302.11,182.83-20.77,50.9-22.03,104.96-22.03,104.96-.32,12.72.19,25.39,1.58,37.73,13.17,125.86,106.55,228.23,228.35,252.47,34.44,6.84,69.51,10.32,141.37,10.57,109.14.44,248.29-12.22,251.4-42.23.25-2.22-6.77-10.95-20.83-28.43-26.72-33.11-34.25-38.74-43.37-41.34-10.76-3.17-19.69-.95-29.12,1.2-20.39,4.62-49.51,10.26-88.69,15.26,17.28-14.69,31.46-32.86,41.53-53.43,8.04-16.4,12.22-31.91,14.37-44.38,4.75-27.22,1.65-49.95-1.33-63.69v-.06c-8.99-41.53-72.43-120.98-76.1-132.69,3.73-.06,9.05-.06,15.38.7,26.08,3.17,41.02,17.41,76.92,44.13,38.87,28.87,46.34,31.08,53.69,31.97,24.25,2.79,44-9.94,49.7-13.86,19.63-13.8,27.03-32.92,31.4-44.57,18.11-48.68,2.6-96.1-5.7-121.05v.02Z"/>
<circle class="cls-1" cx="178.8" cy="869.52" r="48.71" transform="translate(-137.01 39.88) rotate(-9.22)"/>
</svg>
</div>
</div>
<div class="content">
<!-- Your page content goes here -->
<h1>Welcome to Clickrabbit</h1>
<p>This is the main content of the page.</p>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
gsap.fromTo(
".cr-loading-overlay",
{opacity: 1},
{
opacity: 0,
duration: 1.5,
delay: 2.5,
onComplete: function() {
document.querySelector(".cr-loading-overlay").style.display = "none";
document.body.classList.remove("no-scroll");
document.querySelector(".content").style.opacity = 1;
}
}
);
});
</script>
</body>
</html>
document.body.style.overflow = "hidden";to make it so the user can't scroll, so a class on thebodyelement that setsoverflow: hiddenshould do the same thing.overflow:hiddenworking, addheight:100dvhon you body and it will work