A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/lcdsantos/jquery-drawsvg below:

lcdsantos/jquery-drawsvg: Lightweight, simple to use jQuery plugin to animate SVG paths

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.

Include jQuery DrawSVG after jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.drawsvg.js"></script>

Initialize the plugin on the element you want to animate and store in a variable

var mySVG = $('#my_svg_element').drawsvg();

Run the animation

mySVG.drawsvg('animate');

Look at the demos for more advanced usages.

Option Type Default Description duration Integer 1000 The time to complete the animation of each path. stagger Integer 200 Delay to start animating each individual path. easing String swing Which easing function each path will use to transition.
Use jQuery Easing Plugin for different easing functions. reverse Boolean false Direction that the line will be drawn. callback Function function() {} A function to call once the animation has been completed.

Simple usage

Draw on scroll

Callback example

Animate mask path


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4