Revealing SVG on section scroll

Question

I'm using the function in this JSFiddle to fetch the percentage of an element seen within the viewport on scroll (capped at 100 once user scrolls beyond it):

// Track percentage of section seen within viewport
// Assign target section to var
const element = document.getElementById('section--example');

// Calculate percentage of section in viewport
const percentageSeen = () => {
    
    // Get the relevant measurements and positions
    const viewportHeight = window.innerHeight;
    const scrollTop = window.scrollY;
    const elementOffsetTop = element.offsetTop;
    const elementHeight = element.offsetHeight;
    
    // Calculate percentage of the element that's been seen
    const distance = (scrollTop + viewportHeight) - elementOffsetTop;
    const percentage = Math.round(distance / ((viewportHeight + elementHeight) / 100));
    
    // Restrict range between 0 — 100
    return Math.min(100, Math.max(0, percentage));

}

Then, I'm attempting to use that percentageSeen value in the following function to animate an SVG path into view on scroll:

// Get a reference to the 
var path = document.querySelector('#path--example');

// Get length of SVG path
var pathLength = path.getTotalLength();

// Create dashes to match the length of the SVG path
path.style.strokeDasharray = pathLength + ' ' + pathLength;

// Initially offset dashes to hide SVG entirely
path.style.strokeDashoffset = pathLength;

path.getBoundingClientRect();

// Animate SVG on section scroll
window.addEventListener('scroll', function(e) {
 
    // Fetch percentage seen 
    var scrollPercentage = percentageSeen;

    // Length to offset the dashes
    var drawLength = pathLength * scrollPercentage;

    // Draw in reverse
    path.style.strokeDashoffset = pathLength - drawLength;
  
});

I've created a JSFiddle here with my progress — I can log the visible percentage to the console without issue, but that value doesn't seem to be accepted when used in the above scroll function. I can also reveal the SVG based on page height (commented out in the JSFiddle), but not the section height. Can anyone help point me in the right direction that'll allow the use of the percentageSeen var in the scroll function?

vqf · Accepted Answer

The main problem is that percentageSeen is a percentage. When you multiply pathLength by percentageSeen you get a value that is 100 times larger than the value you want.
Also, you were calling the function without parentheses, which meant that scrollPercentage did not store the result, but the function itself.
I think you want the element to appear as the user scrolls. In that case, it is simpler to set strokeDasharray to 0 pathLength and then drawLength (pathLength-drawLenght).
You are capping percentageSeen at 100, which means that the last capping procedure is not necessary (also, you set the cap at 0.99 and you should have set it to 99).

I have forked the fiddle with a working example. As you can see, percentageSeen is never lower than 38 or larger than 61. You may want to fix the calculation.

// Animation — Stitch [Scroll]
// Reference: https://css-tricks.com/scroll-drawing/
// --------------------------------------------------

// Track percentage of animation container (section) in viewport
// Assign target section to var
const element = document.getElementById('section--example');

// Log percentage to console
const logPercentageSeen = () => {
    //console.log(percentageSeen());
}

// Re-run 'logPercentageSeen' on scroll
window.addEventListener('scroll', logPercentageSeen);

// Calculate percentage of section in viewport
const percentageSeen = () => {
    // Get the relevant measurements and positions
    const viewportHeight = window.innerHeight;
    const scrollTop = window.scrollY;
  const elementOffsetTop = element.offsetTop;
  const elementHeight = element.offsetHeight;
    // Calculate percentage of the element that's been seen
  const distance = (scrollTop + viewportHeight) - elementOffsetTop;
  const percentage = Math.round(distance / ((viewportHeight + elementHeight) / 100));
    // Restrict the range to between 0 and 100
  return Math.min(100, Math.max(0, percentage));
}

// Log the initial value before any scrolling has happened
logPercentageSeen();




// Get a reference to the 
var path = document.querySelector('#path--example');

// Get length of path
var pathLength = path.getTotalLength();

// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = '0 ' + pathLength;

// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = 0;

// 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? 
    var scrollPercentage = percentageSeen();
    
    // This runs, but is tied to the page height, NOT the section height
    // var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    // Length to offset the dashes
    var drawLength = pathLength * scrollPercentage / 100;
    

    // Draw in reverse
    var rest = pathLength - drawLength;
    path.style.strokeDasharray = drawLength + ' ' + rest;

    // When complete, remove the dash array, otherwise shape isn't quite sharp
    // Accounts for fuzzy math
    
  
});


  
  Section heading
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  
  

  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Revealing SVG on section scroll

Answers (1)

Related Questions