Scrollable svg Animations

Developer
Size
2,980 Kb
Views
18,216

How do I make an scrollable svg animations?

What is a scrollable svg animations? How do you make a scrollable svg animations? This script and codes were developed by Lisa Macken on 01 October 2022, Saturday.

Scrollable svg Animations Previews

Scrollable svg Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scrollable svg Animations </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
</head>
<body>
<h2>Scroll down this window to draw a triangle.</h2>
<p>Scroll back up to reverse the drawing.</p> <svg id="mySVG"> <path fill="none" stroke="black" stroke-width="3" id="triangle" d="M27,722.1c0,1.9,1.9,3.8,3.8,3.8h550.8c1.9,0,3.8-1.9,3.8-3.8V246.4H27V722.1z M591.9,232.3	c1.9,0,3.8,0.9,4.7,1.9c0.9,0.9,1.9,2.8,1.9,4.7v482.3c0,9.4-7.5,16.9-16.9,16.9H30.7c-9.4,0-16.9-7.5-16.9-16.9V238.9 c0-1.9,0.9-3.8,1.9-4.7c0.9-0.9,2.8-1.9,4.7-1.9H591.9z M463.3,73.7c-3.8,3.8-5.6,9.4-5.6,16v63.8c0,6.6,2.8,12.2,5.6,16c3.8,3.8,8.4,6.6,14.1,6.6s10.3-1.9,14.1-6.6 c3.8-3.8,5.6-10.3,5.6-16V89.7c0-6.6-2.8-12.2-5.6-16c-3.8-3.8-8.4-6.6-14.1-6.6S467.1,69,463.3,73.7 M444.6,153.5V89.7 c0-19.7,14.1-35.7,32.8-35.7s32.8,16.9,32.8,35.7v63.8c0,19.7-14.1,35.7-32.8,35.7S444.6,172.2,444.6,153.5 M121.8,73.7c-3.8,3.8-5.6,9.4-5.6,16v63.8c0,6.6,2.8,12.2,5.6,16c3.8,3.8,8.4,6.6,14.1,6.6 c5.6,0,10.3-2.8,14.1-6.6c3.8-3.8,5.6-9.4,5.6-16V89.7c0-6.6-2.8-12.2-5.6-16c-2.8-3.8-8.4-6.6-14.1-6.6 C130.2,67.1,125.5,69,121.8,73.7 M102.1,153.5V89.7c0-19.7,14.1-35.7,32.8-35.7s32.8,16.9,32.8,35.7v63.8 c0,19.7-14.1,35.7-32.8,35.7S102.1,172.2,102.1,153.5 M162.1,115c-3.8,0-6.6-2.8-6.6-6.6c0-3.8,2.8-6.6,6.6-6.6h289c3.8,0,6.6,2.8,6.6,6.6c0,3.8-2.8,6.6-6.6,6.6	H162.1z M20.4,246.4c-1.9,0-3.8-0.9-4.7-1.9c-0.9-0.9-1.9-2.8-1.9-4.7v-121c0-9.4,7.5-16.9,16.9-16.9h77.9	c3.8,0,6.6,2.8,6.6,6.6c0,3.8-2.8,6.6-6.6,6.6H30.7c-1.9,0-3.8,1.9-3.8,3.8v114.5h558.3V118.7c0-1.9-1.9-3.8-3.8-3.8h-77.9	c-3.8,0-6.6-2.8-6.6-6.6c0-3.8,2.8-6.6,6.6-6.6h77.9c9.4,0,16.9,7.5,16.9,16.9v121c0,1.9-0.9,3.8-1.9,4.7s-2.8,1.9-4.7,1.9H20.4zM210,334.6v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,3.8-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C211.8,329.9,210,331.8,210,334.6 M213.7,413.4c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H213.7z M333.8,334.6v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C335.7,329.9,333.8,331.8,333.8,334.6 M337.6,413.4c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H337.6z M457.7,334.6v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C459.6,329.9,457.7,331.8,457.7,334.6 M461.4,413.4c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H461.4z M210,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,3.8-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C211.8,449,210,450.9,210,453.7 M213.7,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H213.7z M457.7,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C459.6,449,457.7,450.9,457.7,453.7 M461.4,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H461.4z M333.8,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C335.7,449,333.8,450.9,333.8,453.7 M337.6,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H337.6z M210,572.9v61c0,1.9,1.9,3.8,4.7,4.7h61c1.9,0,3.8-1.9,4.7-4.7v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C211.8,568.2,210,570.1,210,572.9 M213.7,651.7c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H213.7z M333.8,572.9v61c0,1.9,1.9,3.8,4.7,3.8h61c1.9,0,4.7-1.9,4.7-3.8v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C335.7,568.2,333.8,570.1,333.8,572.9 M337.6,651.7c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H337.6z M85.2,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C88,449,85.2,450.9,85.2,453.7 M89.9,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61c9.4,0,17.8,7.5,17.8,17.8	v61c0,9.4-7.5,17.8-17.8,17.8H89.9z M85.2,572.9v61c0,1.9,1.9,3.8,4.7,3.8h61c1.9,0,4.7-1.9,4.7-3.8v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C88,568.2,85.2,570.1,85.2,572.9 M89.9,651.7c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H89.9z"/> Sorry, your browser does not support inline SVG.
</svg> </body> <script src="js/index.js"></script>
</body>
</html>

Scrollable svg Animations - Script Codes CSS Codes

body { height: 1000px; background: #f1f1f1;
}
#mySVG { position: initial; top: 15%; width: 600px; height: 800px; margin-left:50px;
}

Scrollable svg Animations - Script Codes JS Codes

// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); var draw = length * scrollpercent; // Reverse the drawing (when scrolling upwards) triangle.style.strokeDashoffset = length - draw;
}
Scrollable svg Animations - Script Codes
Scrollable svg Animations - Script Codes
Home Page Home
Developer Lisa Macken
Username lmack90
Uploaded October 01, 2022
Rating 3
Size 2,980 Kb
Views 18,216
Do you need developer help for Scrollable svg Animations?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lisa Macken (lmack90) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!