Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw on scroll using JavaScript and SVG?
Drawing on scroll using JavaScript and SVG creates an engaging animation effect where an SVG path gradually appears as the user scrolls down the page. This technique uses stroke-dasharray and stroke-dashoffset properties to control path visibility.
How It Works
The technique uses SVG's stroke-dasharray and stroke-dashoffset properties to hide the path initially, then gradually reveals it based on scroll position. The path length is calculated and used to synchronize the drawing with scroll progress.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
height: 2000px;
background: #f1f1f1;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
svg {
position: fixed;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 210px;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 50px;
}
</style>
</head>
<body>
<h1>Draw on Scroll - SVG Animation</h1>
<p>Scroll down to see the SVG path draw itself progressively!</p>
<svg>
<path
fill="none"
stroke="purple"
stroke-width="5"
id="animatedPath"
d="M 50 100 Q 100 50 150 100 Q 200 150 250 100 Q 300 50 350 100"
/>
</svg>
<script>
const path = document.getElementById('animatedPath');
const pathLength = path.getTotalLength();
// Initially hide the path
path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;
// Add scroll event listener
window.addEventListener('scroll', animatePathOnScroll);
function animatePathOnScroll() {
// Calculate scroll percentage
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercent = scrollTop / scrollHeight;
// Calculate how much of the path to draw
const drawLength = pathLength * scrollPercent;
// Update the stroke-dashoffset to reveal the path
path.style.strokeDashoffset = pathLength - drawLength;
}
</script>
</body>
</html>
Key Properties Explained
| Property | Purpose | Value |
|---|---|---|
getTotalLength() |
Gets the total length of the SVG path | Number (pixels) |
stroke-dasharray |
Creates dashed line pattern | Path length (creates one long dash) |
stroke-dashoffset |
Shifts the dash pattern position | 0 to path length |
How the Animation Works
The animation follows these steps:
-
Initialize: Set
stroke-dasharrayto path length andstroke-dashoffsetto path length (path hidden) - Listen: Add scroll event listener to track scroll position
- Calculate: Convert scroll position to percentage (0-100%)
-
Animate: Reduce
stroke-dashoffsetbased on scroll percentage to reveal the path
Customization Options
You can enhance this effect by:
- Path Design: Create complex SVG paths using tools like Illustrator or online SVG editors
- Multiple Paths: Animate multiple paths with different timing offsets
- Easing: Add CSS transitions for smoother animation
- Color Changes: Modify stroke color based on scroll position
Browser Compatibility
This technique works in all modern browsers that support SVG and the getTotalLength() method. For older browsers, consider adding polyfills or fallback animations.
Conclusion
Drawing on scroll with SVG creates impressive visual effects by combining scroll events with SVG stroke properties. This technique is perfect for storytelling websites, progress indicators, and interactive animations that engage users as they navigate through content.
599 Views
