Scroll Drawing
Mon Mar 08 2021 20:05:50 GMT+0000 (Coordinated Universal Time)
Saved by
@randomize_first
#javascript
// Get a reference to the <path>
var path = document.querySelector('#star-path');
// Get length of path... ~7px in this case
5
var pathLength = path.getTotalLength();
7
// 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;
// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
// When the page scrolls...
content_copyCOPY
https://codepen.io/chriscoyier/pen/YXgWam
Comments