I have a div element with a nested SVG div where I’m trying to animate the svg. I’ve done this before with scrolling from the top of the page, but this seems to be animating earlier than expected or not at all. I have debug statements in the code as well.
I want it to start drawing the SVG only once the user has scrolled into the team-svg-line div. When that div appears at the bottom of the viewport there should be a slight delay and then the line should draw, but something is happening where it looks like it should and I just don’t see it happening.
let svgPathDrawn = false;
function drawSVGPath() {
if (!svgPathDrawn) {
console.log("Drawing the SVG path...");
var path = document.querySelector("#teamPath");
var pathLength = path.getTotalLength();
// Set initial styles for the SVG path
path.style.strokeDasharray = pathLength + " " + pathLength;
path.style.strokeDashoffset = pathLength;
// Animate the SVG path
path.style.transition = "stroke-dashoffset 4s ease"; // Adjust the duration (2s) and easing (ease) as needed
path.style.strokeDashoffset = 0;
path.style.strokeDasharray = "none"; // Reset stroke dash array after animation completes
svgPathDrawn = true; // Set the flag to true after drawing the SVG path
}
}
// Define the scroll event handler
// Define the scroll event handler
// Define the scroll event handler
function scrollHandler() {
var elementTarget = document.getElementById("team-svg-line");
var elementTop = elementTarget.getBoundingClientRect().top - 100; // Adjust the offset as needed
var elementHeight = elementTarget.offsetHeight;
var scrollPosition = window.scrollY;
var windowHeight = window.innerHeight;
// Calculate if the target div is in the viewport
var isInViewport = (elementTop <= windowHeight && elementTop + elementHeight >= 0);
if (isInViewport) {
drawSVGPath();
window.removeEventListener("scroll", scrollHandler); // Remove the scroll event listener after drawing the SVG path
}
}
// Add the scroll event listener only if the SVG path hasn't been drawn yet
if (!svgPathDrawn) {
window.addEventListener("scroll", scrollHandler);
}
// Add the scroll event listener only if the SVG path hasn't been drawn yet
if (!svgPathDrawn) {
window.addEventListener("scroll", scrollHandler);
}<div style="height: 110vh;">
</div>
<div id="team-svg-line">
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 693.08 2238.36"
>
<defs>
<style>
.teamclssss1 {
fill: none;
stroke: rgb(55, 157, 80);
stroke-miterlimit: 10;
stroke-width: 50px;
}
</style>
</defs>
<polyline
id="teamPath"
class="teamclssss1"
points="342.83 1.82 344.13 19.65 347.34 37.48 345.89 55.3 343.33 73.13 343.85 90.96 345.03 108.79 347.09 126.62 344.45 144.44 346.41 162.27 343.96 180.1 343.2 197.93 345.92 215.76 345.9 233.59 343.27 251.42 344.04 269.25 344.72 287.07 342.87 304.9 345.91 322.73 346.47 340.56 343.31 358.39 342.84 376.22 346.05 394.05 347.09 411.88 344.31 429.72 344.18 447.55 345.36 465.39 346.38 483.23 349.02 501.39 356.64 517.96 365.48 534.55 382.07 543.39 398.47 551.62 416.8 555.01 434.47 553.01 452.14 555.47 469.81 555.28 487.48 554.78 505.15 557.22 522.82 553.21 540.49 556.4 558.17 553.08 575.84 554.72 593.52 555.81 612.38 556.55 629.48 564.64 643.34 577.11 654.07 591.98 664.41 607.94 664.85 626.93 667.68 644.21 664.2 661.5 665.75 678.79 665.8 696.09 663.49 713.38 664.57 732.42 655.48 749.15 643.69 763.55 629.93 776.44 611.8 781.61 593.52 783.13 575.22 786.3 556.93 786.81 538.63 782.92 520.33 785.01 502.04 787.05 483.74 784.69 465.44 786.81 447.14 787.1 428.85 786.72 410.55 787.47 392.25 784.29 373.95 786.59 355.65 783.57 337.35 786.04 319.06 785.03 300.76 783.54 282.46 783.19 264.16 786.56 245.86 784.34 227.56 784.26 209.26 782.96 190.96 783.35 172.66 787.45 154.36 785.96 136.06 783.88 117.75 784.03 99.44 786.87 80.85 787.7 63.01 793.98 49.09 806.73 35.65 820.25 30.65 838.65 29.43 857.08 27.11 874.39 26.95 891.71 25.24 909.02 28.55 926.33 27.89 943.65 27.72 960.96 26.32 978.28 29.84 995.6 30.23 1014.15 37.55 1031.34 48.64 1046.4 63.54 1057.79 80.56 1066.06 99.44 1068.51 117.74 1065.99 136.03 1066.93 154.33 1065.5 172.63 1069.57 190.92 1067.69 209.22 1065.98 227.52 1066.37 245.82 1069.58 264.12 1068.85 282.41 1066.61 300.71 1069.11 319.01 1069.69 337.31 1068.27 355.61 1069.21 373.91 1069.95 392.2 1068.24 410.5 1066.38 428.8 1065.83 447.1 1068.21 465.4 1067.81 483.7 1066.48 502 1068.88 520.3 1068.24 538.6 1068.14 556.91 1067.8 575.21 1068.07 593.52 1067.28 612.32 1069.13 629.3 1077.33 645.19 1087.63 657.66 1102.27 664.46 1120.3 664.54 1139.31 666.07 1157.02 667.74 1174.73 663.62 1192.44 664.23 1210.15 664.43 1227.86 663.14 1245.57 663.1 1263.29 663.75 1281.01 663.05 1269.06 661.36 1287.24 655.03 1304.57 643.3 1318.84 629.79 1331.89 611.73 1337.01 593.52 1342.99 575.22 1341.37 556.93 1340.28 538.63 1339.25 520.33 1339.98 502.04 1339.63 483.74 1341.2 465.44 1340.65 447.14 1339.87 428.85 1340.01 410.55 1342.64 392.25 1342.85 373.95 1339.37 355.65 1339.09 337.35 1341.39 319.06 1342.93 300.76 1339.27 282.46 1341.18 264.16 1339.37 245.86 1341.75 227.56 1343.29 209.26 1340.01 190.96 1339.28 172.66 1339.59 154.36 1340.43 136.06 1340.49 117.75 1341.34 99.44 1342.78 80.37 1341.59 64.61 1352.42 48.44 1361.76 36.69 1376.53 27.92 1393.6 27.81 1412.76 28.66 1430.08 28.39 1447.39 29.04 1464.7 30.08 1482.01 28.82 1499.33 26.9 1516.65 27.3 1533.97 29.25 1551.29 30.16 1569.85 38.69 1586.36 48.58 1602.15 63.94 1612.78 81.09 1619.79 99.44 1624.46 117.74 1622.41 136.03 1624.35 154.33 1622.35 172.63 1621.07 190.92 1622.43 209.22 1622.22 227.52 1621.34 245.82 1624.94 264.12 1621.38 282.41 1621.26 300.71 1623.57 319.01 1624.87 337.31 1622.66 355.61 1621.3 373.91 1624.89 392.2 1623.12 410.5 1624.83 428.8 1621.17 447.1 1623.41 465.4 1621.13 483.7 1624.28 502 1621.57 520.3 1622.05 538.6 1623.85 556.91 1625.18 575.21 1621.05 593.52 1625.61 612.67 1623.52 629.43 1632.79 644.87 1643.64 656.05 1658.89 664.25 1676.03 666.28 1694.99 664.26 1713.76 667.09 1732.53 667.51 1751.3 667.34 1770.08 667.78 1788.86 666.68 1807.64 665 1826.42 661.72 1844.69 655.85 1862.4 645.12 1878.02 628.63 1887.24 612.11 1895.79 593.52 1900.16 575.47 1896.99 557.41 1897.26 539.36 1899.4 521.3 1900.72 503.25 1898.66 485.19 1897.02 467.13 1899.93 449.08 1896.12 431.02 1897.31 412.96 1898.19 394.9 1899.14 376.83 1898.57 361.29 1901.24 352.82 1914.31 348.55 1928.17 345.58 1946.37 347.77 1964.57 345.12 1982.77 348.85 2000.97 346.85 2019.17 349.25 2037.36 345.49 2055.56 345.1 2073.76 346.27 2091.96 345.28 2110.16 347.12 2128.36 347.47 2146.56 346.2 2164.76 345.49 2182.97 346.36 2201.17 345.75 2219.38 346.31 2237.59"
></polyline>
</svg>
</div>Fiddle: https://jsfiddle.net/5unmbLzv/7/