Ali Boukeroui 2 min read

How To Draw On Scroll Using Javascript

 How To Draw On Scroll Using Javascript

According to Jake Archibald's excellent technique where an SVG path is animated to look like it’s drawing itself. He has a very good blog post on how to work.

It's a clever trick to use dash lines, but the gap in the dash is too long to cover it all the way. Then you can move it in such a way that it covers the whole path again, making it look like it is drawing itself.

Using a little bit of JavaScript, we can draw the shape until it's finished as the page scrolls down.

This Is a Simple Scroll Drawing Demo

5 Steps To Draw On Scroll Using Javascript

  • Step 1 : Get the SVG Path

The SVG It has to be a not or it won’t work. Then Give the path an ID if it doesn't have one.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.6 107.6" id="star-svg"> <path id="frontendor-path" fill="none" stroke="white" stroke-width="2" d=" ... " /> </svg>
  • Step 2 : Find The Length Of The SVG Path

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

// Get length of path... ~577px in this demo
var pathLength = path.getTotalLength();
  • Step 3 : Hide The SVG Shape By Offsetting Dash

// 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;
  • Step 4 : When The Page Scrolls, Offset Dash Same Amount As % Scrolled

// When the page scrolls...
window.addEventListener("scroll", function(e) {
 
  // What % down is it? 
  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;
  
});
  • Step 5 : Remove Dashing After Scrolling To Bottom

  // ... at bottom of scrolling function
  // When complete, remove the dash array, otherwise shape isn't quite sharp
  if (scrollPercentage >= 0.99) {
    path.style.strokeDasharray = "none";
  } else {
    path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }

Awesome! This is all you need to draw any SVG shape using these 5 simple steps.

MORE USEFUL ARTICLES:


Create Beautiful Websites By Copy-Paste.

Save 200+ hours-worth of designing and coding. 100+ UI Blocks & 6+ Templates With Online Copy-Paste Tool.

screenshot of 100+ UI blocks for websites

© 2020-2021 Frontendor. All Rights Reserved.