Yogesh Chauhan's Blog

How to draw an SVG path on scroll using JavaScript?

in JavaScript on March 12, 2021

This is our end goal:

We just saw examples of scrolling the content of an element as well as scroll contents of HTML body using scrollTop property.

The scrollTop property comes really handy when you want to change style or play with the HTML elements (add elementsanimate elements) on scroll, the scrollTop property comes handy. We can scroll the content inside a div or the whole body using scrollTop property.

Let’s add the SVG path first without fill color.

Let’s change the dimensions of it and make the position of the SVG element fixed.

The main part is played by JavaScript here as we need to track the scrolling movement.

Let’s get the total length of the SVG element first. To do so, we can use SVGPathElement.getTotalLength() method.

The next task is to get the starting point of the drawing. We can use stroke-dasharray attribute to do so.

We need to hide the SVG element by offsetting dash. We will remove the line to show the SVG element before scroll drawing it.

Our goal is to draw the SVG element on scroll so we need to find the percentage of scroll. To make it work in all different browsers, we can use cross-browser properties to do so. At the end, we can offset dash the same percentage scrolled. While scrolling upwards, we need to reverse the drawing. For that we can just minus the drawn part from the total length.

Let’s create a function and call it using addEventListener.

This is how it will look like and work at the end:

NOTE: The best way to view the final result is in a smaller height screens. Open the example in a new window and make it smaller or just open it in a JSFiddle to view it.

Credit for this post goes to w3school’s triangle example.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPHow to make HTML form interactive and using CSS?CSSHow to add multiple components in React app?ReactEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgresUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptHow to get query string values in JavaScript? (URL Manipulation using URLSearchParams)JavaScript