Lightweight jQuery SVG Line Animation Plugin - DrawSVG
File Size: | 57.8 KB |
---|---|
Views Total: | 3928 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
DrawSVG is a really simple jQuery plugin that creates a custom SVG line drawing animation using jQuery animate()
method to make your SVG path draw itself progressively.
See also:
- SVG Path Animation Plugin with jQuery - Lazy Line Painter
- SVG Path Animation On Scroll Using jQuery - SVG Scroll
- jQuery Plugin For SVG Path Animation - SVG Path Painter
How to use it:
1. Include jQuery library and the jQuery DrawSVG plugin on the web page.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="/path/to/jquery.drawsvg.min.js"></script>
2. Include the jQuery easing plugin for additional easing functions.
<script src="/path/to/jquery.easing.1.3.min.js"></script>
3. Embed a SVG into your web page.
<svg viewBox="0 0 175 256" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="175" height="256"> <g stroke="#FFF" stroke-width="2" fill="none"> <path d="M157.068 33H165c4.77 0 9 4.464 9 9.706v202.758c0 5.243-4.288 9.536-9.524 9.536H10.524C5.288 255 1 250.707 1 245.464V42.707C1 37.464 5.06 33 10.017 33h9.203" /> <path d="M67 33V22.35c0-11.286 8.974-20.56 20.353-20.56 5.688 0 10.91 2.327 14.574 6.08C105.69 11.547 108 16.66 108 22.35V33" /> <path d="M103.302 33H157v45H19V33h52.72" /> <path d="M95.068 25.237c0 4.293-3.474 7.785-7.76 7.785-4.284 0-7.758-3.492-7.758-7.785 0-4.302 3.474-7.785 7.757-7.785 4.287 0 7.76 3.482 7.76 7.785z" /> <path d="M18.696 103h137.896v.17" /> <path d="M18.738 127h42.64v.308" /> <path d="M18.738 155h137.854v.068" /> <path d="M18.738 178h137.854v-.006" /> <path d="M18.696 227h137.868v-.21" /> </g> </svg>
4. Animate the SVG paths.
var $svg = $('svg').drawsvg(); $svg.drawsvg('animate');
5. Default plugin options.
// The time to complete the animation of each path. duration: 1000, // Delay to start animating each individual path. stagger: 200, // easing effect easing: 'swing', // Direction that the line will be drawn. reverse: false, // A function to call once the animation has been completed. callback: $.noop
Change log:
2016-10-06
- added UMD support.
2015-11-06
- fixed Safari (possible iOS) Problem
This awesome jQuery plugin is developed by lcdsantos. For more Advanced Usages, please check the demo page or visit the official website.