SVG Animated Stroke Dash
How do I make an svg animated stroke dash?
Using GSAP to animate a stroke dash offset of an SVG. Controls allow it to go infinitely in either direction fast or slow.. What is a svg animated stroke dash? How do you make a svg animated stroke dash? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.
SVG Animated Stroke Dash - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animated Stroke Dash</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>SVG Animated Stroke Dash</h1>
<h2>Animate with SVG baby!</h2>
<p>Simple proof of concept to demonstate animating the stroke infinitely and dynamically change its speed and direction with GSAP.</p>
<div class="container"> <button id="button1" type="button">Speed up!</button> <button id="button2" type="button">Slow down!</button> <button id="button3" type="button">Reverse!</button> <button id="button4" type="button">Forwards!</button> <button id="button5" type="button">Normal!</button> <div class="svg-container"> <svg viewBox="0 0 210 210"> <filter id="dropshadow" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur --> <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset --> <feMerge> <feMergeNode/> <!-- this contains the offset blurred image --> <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to --> </feMerge>
</filter> <rect id="rectangle" x="5" y="5" width="200" height="200" style="filter:url(#dropshadow)"> </svg> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SVG Animated Stroke Dash - Script Codes CSS Codes
#rectangle { fill: transparent; stroke: orange; stroke-width: 5px; stroke-dasharray: 10;
}
.svg-container { max-width: 300px; margin: 1em auto;
}
button { border: 2px solid orange; background: transparent; color: orange; border-radius: 0.25em; -webkit-transition: all 250ms; transition: all 250ms; outline: none;
}
button:hover { background: orange; color: white;
}
/* Make things perty */
html { height: 100%;
}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;
}
h1,
h2 { margin: 0; text-transform: uppercase; text-shadow: 0 0 0.5em black;
}
h2 { font-weight: 300;
}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;
}
a { color: orange; text-decoration: none; -webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;
}
a:hover { color: yellow;
}
.container { display: block; margin: 2em 0;
}
p { max-width: 40em; margin: 1em auto;
}
SVG Animated Stroke Dash - Script Codes JS Codes
jQuery(document).ready(function(){ var tween = TweenMax.to($('#rectangle'), 5,
{ strokeDashoffset: 100, ease: 'linear', onComplete: function(){ tween.restart(); }, onReverseComplete: function(){ tween.reverse(0); }} ); $('#button1').on('click', function(){ tween.timeScale( 5 ); }); $('#button2').on('click', function(){ tween.timeScale( 0.5 ); }); $('#button3').on('click', function(){ tween.reverse(); }); $('#button4').on('click', function(){ tween.play(); }); $('#button5').on('click', function(){ tween.play(); tween.timeScale(1); });
});
Developer | Jon Christensen |
Username | JMChristensen |
Uploaded | August 03, 2022 |
Rating | 4 |
Size | 3,623 Kb |
Views | 74,888 |
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!
Name | Size |
Animated gradient text | 3,791 Kb |
Graphs and Snap.svg | 2,870 Kb |
Basic Snap.svg JS Animation | 5,622 Kb |
SVG Circle Progress | 3,368 Kb |
CSS Transition End Sequence | 4,980 Kb |
SVG Image Blur | 3,893 Kb |
Image Cover | 3,914 Kb |
Google Button Ripple | 3,524 Kb |
SVG Animated Stroke Dash | 3,623 Kb |
Vue JS Filtering | 9,746 Kb |
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!
Name | Username | Size |
BabyStore | Pablo-Ai | 3,807 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Transition | Shayhowe | 1,632 Kb |
Welcome | Nakome | 6,076 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!