Animation in html,css,js

Question

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

score 1 · Answer 1 · answered Jan 28 '21 at 05:12

In your scroll listener, you should check if the element is scrolled into view, if not, wait to run the animation until the element is in view on the page.

You can use this function to determine if an element is in view:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

(from https://stackoverflow.com/a/488073/14981680)

Animation in html,css,js

1 Answers1

Linked

Related