Here is the code snippet that I have been working with:
document.addEventListener("DOMContentLoaded", function(event) {
// Get a reference to the <path>
var path = document.querySelector('#star-path');
// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();
// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;
// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;
// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
// When the page scrolls...
window.addEventListener("scroll", function(e) {
// What % down is it?
// https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
// Had to try three or four differnet methods here. Kind of a cross-browser nightmare.
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var drawLength = pathLength * scrollPercentage;
// Draw in reverse
path.style.strokeDashoffset = pathLength - drawLength;
// When complete, remove the dash array, otherwise shape isn't quite sharp
// Accounts for fuzzy math
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = "none";
path.style.fill = "#47AF9A";
} else {
path.style.fill = "none";
path.style.strokeDasharray = pathLength + ' ' + pathLength;
}
});
});body {
/* feel free to change height */
height: 5000px;
background: linear-gradient(
to bottom,
orange,
darkblue
);
}
h1 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
color: white;
text-transform: uppercase;
text-align: center;
font-size: 22px;
letter-spacing: 5px;
font-weight: 100;
padding: 25px 15px;
text-shadow: 1px 1px 1px #333;
}
#star-svg {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
Resources<header>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</header>
<body>
<h1>Scroll-to-draw</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg">
<path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg>
</body>The above code works fine here, but unfortunately, when I tried running it on the IDE I am using, the animation did not render as expected. Instead of drawing lines upon scrolling, only the overall output of the letter H was displayed. If you could spare a moment to review the code on this platform: https://repl.it/join/xfuwhnru-hussainomer, it would be greatly appreciated.
P.S. It is possible that there might be a missing reference in my code when used in that particular IDE. The functionality seems to work here due to Stack Overflow's unique setup where it creates a reference automatically, which may not be replicated in every other IDE. Any insights or suggestions on how to tackle this issue?