0

I included a SVG on scroll animation that looks like this:

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
  );
}


#star-svg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
  <script src="script.js"></script>
</head>
<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>
</html>

The problem I am facing is that since my website has a lot of content, I want to start this animation at a certain point/position because this animation works if you scroll and since I have a lot of content in my website, whenever I scroll, the animation is happening in the background and when I reach to it, it gets over. How would I modify my js code to make the animation work only at a certain time? Any suggestions?

For example:

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
  );
}


#star-svg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
  <script src="script.js"></script>
</head>
<body>

 <h1>Scroll-to-draw</h1>

<section>
text goes here
</section>

<section>
text goes here
</section>

<section>
text goes here
</section>

<section>
text goes here
</section>

<section>
text goes here
</section>

<section>
text goes here
</section>

<section>
text goes here
</section>

<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>
<section>
text goes here
</section>




<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>
</html>

How would I make the animation work after the last text goes here line and make it start from there? Any suggestions? Right now it does not work like that, and I would like it to work after the text.

isherwood
  • 46,000
  • 15
  • 100
  • 132
HussainOmer
  • 288
  • 1
  • 16

0 Answers0