Javascript start and end on certain % of scroll page

Question

I am looking for help.

I have this codepen applied to my page - http://codepen.io/chriscoyier/pen/YXgWam, but i want to start drawing from certain % (lets say 60% of page) and and it /have 100% of svg file drawn) at another % of scroll (lets say 80% of page)

// Get a reference to the <path>
var path = document.querySelector('#path');
var path2 = document.querySelector('#path2');
var path3 = document.querySelector('#path3');
// Get length of path...
var pathLength = path.getTotalLength();
var path2Length = path2.getTotalLength();
var path3Length = path3.getTotalLength();
// Will make very long dashes (the length of the paths itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;
path2.style.strokeDasharray = path2Length + ' ' + path2Length;
path3.style.strokeDasharray = path3Length + ' ' + path3Length;
// Set offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;;
path2.style.strokeDashoffset = path2Length;
path3.style.strokeDashoffset = path3Length;
// Because Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
path2.getBoundingClientRect();
path3.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
var scrollPercentage = (document.documentElement.scrollTop
document.body.scrollTop) / (document.documentElement.scrollHeight
document.documentElement.clientHeight - 0.5);
}
  // Length to offset the dashes
if {
var drawLength = pathLength * scrollPercentage;
var drawLength2 = path2Length * scrollPercentage;
var drawLength3 = path3Length * scrollPercentage;
}
  // Draw logo in reverse
  path.style.strokeDashoffset = pathLength - drawLength;
path2.style.strokeDashoffset = path2Length - drawLength2;
path3.style.strokeDashoffset = path3Length - drawLength3;
// When complete, remove the dash array, otherwise shapes aren't quite sharp
// Accounts for fuzzy math
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = "none";
} else {
path.style.strokeDasharray = pathLength + ' ' + pathLength;
}
  if (scrollPercentage >= 0.99) {
path2.style.strokeDasharray = "none";
  } else {
path2.style.strokeDasharray = path2Length + ' ' + path2Length;
  }
  if (scrollPercentage >= 0.99) {
path3.style.strokeDasharray = "none";
  } else {
path3.style.strokeDasharray = path3Length + ' ' + path3Length;
  }
  // Add  fill to the paths
  if (scrollPercentage > 0.99) {
path.setAttribute("fill", "#672A7A");
  } else {
path.setAttribute("fill", "none");
  }
  if (scrollPercentage > 0.99) {
path2.setAttribute("fill", "#672A7A");
  } else {
path2.setAttribute("fill", "none");
  }
  } else {
path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }
  if (scrollPercentage >= 0.99) {
path2.style.strokeDasharray = "none";
} else {
path2.style.strokeDasharray = path2Length + ' ' + path2Length;
  }
  if (scrollPercentage >= 0.99) {
path3.style.strokeDasharray = "none";
  } else {
path3.style.strokeDasharray = path3Length + ' ' + path3Length;
 }

Thank you, Martin

score 1 · Accepted Answer · answered Sep 27 '15 at 15:32

This is just a case of setting the drawLength appropriately.

If it's below 0.6 (60%) you want it to be 0,
if it's above 0.8 you want it to be the pathLength
in between it needs to vary linearly between 0 and the pathLength.

Something like this...

  var drawLength = 0;
  if (scrollPercentage >= 0.8) {
    drawLength = pathLength;
  } else if (scrollPercentage >= 0.6) {
    drawLength = pathLength * (scrollPercentage - 0.6) * 5;
  }

Note that 5 = 1 / (0.8 - 0.6)

Thank you sir! I know its basic stuff but sometimes one just not focus enough :) — Martin Richards, Sep 28 '15 at 22:08

Javascript start and end on certain % of scroll page

1 Answers1