Lightweight, simple to use jQuery plugin to animate SVG paths

Related tags

Animations svg jquery jquery-plugin animation svg-animations
Overview

jQuery DrawSVG

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.

  • Weighs less than 2KB minified and 800 bytes gzipped.
  • Easy to use.
  • Easing and stagger support.
  • Free!

Usage

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.

Options

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.

Demos

Simple usage

Draw on scroll

Callback example

Animate mask path

Comments
  • Question - Is it possible to draw dashed lines?

    Question - Is it possible to draw dashed lines?

    Hi! Thanks for the plugin!

    Is it possible to draw dashed lines? I exported a dashed line from Sketch but when I use the plugin to draw the line it removes the dashed.

    Cheers!

    opened by ghost 2
  • Add npm install

    Add npm install

    As ES2016 becomes more and more popular, it would be awesome, if you would add an install method for node, so that we could use your awesome library by simply importing the drawsvg module. This would also make it a breeze to update the code without re-downloading your source files.

    opened by SamThilmany 1
  • 'SVGElement.offsetHeight' is deprecated

    'SVGElement.offsetHeight' is deprecated

    Chrome Canary reports "'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details". Obviously not too pressing yet but I thought I'd mention it.

    opened by johnslipper 1
  • Safari (possible iOS) Problem

    Safari (possible iOS) Problem

    In Safari, 'use strict'; is throwing a syntax error...

    SyntaxError: Cannot declare a parameter named 'progress' as it shadows the name of a strict mode function. (anonymous function)jquery.drawsvg.js:53

    opened by JayVerb 0
  • Callback on multiple drawsvg elements

    Callback on multiple drawsvg elements

    I'm running .drawsvg within a .each loop to draw all the SVGs on my page, however when I try and use $(this) or any variable scoped within the .each, it does not work - my variables are not passing to the callback. Or rather, the LAST variable defined in the each (so my last item) is the variable that gets passed to ALL the callbacks.

    For example, I have the letters: R E N - and every callback returns N in the console.log - instead of each returning the correctly scoped variable letter.

    I've tried passing the variable through like callback: function(letter) - but this has no effect.

    Help?

    $('.logo-letter').each(function(){
var letter 	= 	$(this),
	thisSvg = 	$(this).find('svg'),
	mySvg 	= 	thisSvg.drawsvg({
			callback: function() {
						console.log($(this));
						letter.addClass('loaded');
					}
				});
	mySvg.drawsvg('animate');
});
    opened by danielucas 4
  • TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined)

    TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined)

    Here's the stack error.

    [Error] TypeError: $({ len: 0 }).animate is not a function. (In '$({ len: 0 }).animate', '$({ len: 0 }).animate' is undefined) animate (jquery.drawsvg.js:101) (anonymous function) (jquery.drawsvg.js:129) each (jquery-3.1.1.slim.min.js:2:3036) (anonymous function) (index.html:873) dispatch (jquery-3.1.1.slim.min.js:3:10565) trigger (jquery-3.1.1.slim.min.js:3:30395) (anonymous function) (jquery-3.1.1.slim.min.js:3:30907) each (jquery-3.1.1.slim.min.js:2:3036) h (bootstrap.min.js:7:1953) _transitionComplete (bootstrap.min.js:7:2910) l (bootstrap.min.js:7:2299) _activate (bootstrap.min.js:7:2369) show (bootstrap.min.js:7:1974) (anonymous function) (bootstrap.min.js:7:3117) each (jquery-3.1.1.slim.min.js:2:3036) _jQueryInterface (bootstrap.min.js:7:2961) (anonymous function) (bootstrap.min.js:7:3289) dispatch (jquery-3.1.1.slim.min.js:3:10565)

    opened by CSFlorin 2
  • Animation of a SVG graph does not work

    Animation of a SVG graph does not work

    Dear Leonardo and users of jQuery DrawSVG,

    first of all many thanks to Leonardo for providing this plugin! I would like to apply it to animate an SVG graph attached to this post (as SVG file in the folder GerIPI.zip). In my attempts to bring it to work, I added the code directly in the html document and tried the simplest code: var $svg = $('svg').drawsvg(); $svg.drawsvg('animate'); However, this did not work. Maybe there is some problem with the SVG file (which I unfortunately cannot find) since an attempt with some simple manually entered SVG code was successful.

    I would be very grateful if someone could give me any hint what could possibly go wrong while trying to animate my SVG graph. Many thanks in advance for your help!

    GerIPI.zip

    opened by marmarczak 0
  • Doesnt work?

    Doesnt work?

    Hi i have a problem with the following svg. Could you please help me?

    <svg id="3a48f74e-9e7c-4e03-a044-8ba0ff6767d9" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1928 589.63"> <defs> <style> .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d, .\33 574d1ea-ea26-4368-861a-c621e7a22e4b, .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82, .\36 54927d5-6c4b-4569-b4a9-835e32d551de, .ab532fbc-993f-4371-9fb0-504681daa114, .bb93fe99-5498-4272-8c33-3acaf7dd2c1c, .bf718539-5a3a-4784-8756-0b3107cf9dc1, .e473867e-952b-4d84-9e9a-b9f1b1214905, .fc333939-3a0a-4b35-9590-309d95aa77e8 { fill: none; } .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d { stroke: #68c6e0; } .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d, .\33 574d1ea-ea26-4368-861a-c621e7a22e4b, .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82, .ab532fbc-993f-4371-9fb0-504681daa114, .bb93fe99-5498-4272-8c33-3acaf7dd2c1c, .bf718539-5a3a-4784-8756-0b3107cf9dc1, .fc333939-3a0a-4b35-9590-309d95aa77e8 { stroke-linecap: round; stroke-width: 8px; } .\31 2daa57f-725e-42c0-84c5-e1670cf1ed6d, .\33 03b154c-1561-49ef-b7bc-7a8ee2f68408, .\33 574d1ea-ea26-4368-861a-c621e7a22e4b, .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82, .\36 54927d5-6c4b-4569-b4a9-835e32d551de, .ab532fbc-993f-4371-9fb0-504681daa114, .bb93fe99-5498-4272-8c33-3acaf7dd2c1c, .bf718539-5a3a-4784-8756-0b3107cf9dc1, .e473867e-952b-4d84-9e9a-b9f1b1214905, .edffdee3-8d93-4425-8276-e050fc9a1ad6, .fc333939-3a0a-4b35-9590-309d95aa77e8 { stroke-miterlimit: 10; } .bf718539-5a3a-4784-8756-0b3107cf9dc1 { stroke: url(#b59b411d-93a9-45ab-854f-99ff759dd406); } .fc333939-3a0a-4b35-9590-309d95aa77e8 { stroke: #406d76; } .bb93fe99-5498-4272-8c33-3acaf7dd2c1c { stroke: #003d48; } .ab532fbc-993f-4371-9fb0-504681daa114 { stroke: url(#9d0856c7-09e7-46fd-81e7-a70b65c018e6); } .\33 574d1ea-ea26-4368-861a-c621e7a22e4b { stroke: url(#16abb108-c869-4531-9dfe-d0111b19fe5b); } .\33 59d65b9-4f8b-4a97-b95c-71bb4e050c82 { stroke: url(#c51dd902-474d-4f1c-8bc8-c52955b0b665); } .\32 b7efd01-1675-46a5-8255-cdd88ed222a6 { fill: url(#95d6e285-e783-4df5-bc5e-aab40f48b5a9); } .\31 ce0d2b4-af1f-4a4d-950c-45a9f3e88db7, .\33 03b154c-1561-49ef-b7bc-7a8ee2f68408, .edffdee3-8d93-4425-8276-e050fc9a1ad6 { fill: #fff; } .a82f478d-939b-4dff-bcff-ff4e56487ea7 { fill: url(#ecedf608-7f1b-4b07-a07e-109ca9370224); } .\36 54927d5-6c4b-4569-b4a9-835e32d551de { stroke: #fff; stroke-width: 1.33px; } .c18e6e86-e703-4aee-a4aa-ff2554f372ba { fill: url(#6ca99cff-da8a-4e1f-be1d-6ed5909b4e8d); } .\36 fd08600-4390-4cbd-8b2c-8c173408944b { fill: url(#770aa32b-0dbe-4939-bfc6-712325be20ba); } .c712a589-6dea-47cd-b186-020daf4cc9ef { fill: url(#eb09081a-6a6e-47be-8984-df1ccd04b32b); } .\33 03b154c-1561-49ef-b7bc-7a8ee2f68408 { stroke-width: 3.86px; stroke: url(#eb4760b8-3c56-4e66-b3e0-7a0afc3d4a73); } .f3cb12af-65d6-4e2a-b4ce-5dad7f5f94cb { fill: url(#1287529a-3aa9-4cee-b604-6c786d35a551); } .\39 54881f4-32ba-4ff8-ba1f-e7f562cd5dc7 { fill: url(#8e1ca799-e9f1-475c-956b-3e9a3f761b89); } .\31 d30ed1b-fdd2-4afd-9191-b90b4fe58f6f { fill: url(#60916754-3be7-422c-8891-0ab7c7ffc955); } .e473867e-952b-4d84-9e9a-b9f1b1214905, .edffdee3-8d93-4425-8276-e050fc9a1ad6 { stroke-width: 3.26px; } .edffdee3-8d93-4425-8276-e050fc9a1ad6 { stroke: url(#99300956-f02f-4c8a-92dd-4ecf915210a9); } .\39 240911c-d1e9-40a2-88ec-62ad59367ac4 { fill: url(#12af0959-8be6-4f88-87fa-387d8ddee9a9); } .e473867e-952b-4d84-9e9a-b9f1b1214905 { stroke: url(#32e39175-1846-4e20-911d-ebab691a2442); } </style> <linearGradient id="b59b411d-93a9-45ab-854f-99ff759dd406" x1="897.1" y1="-154.5" x2="897.1" y2="292.6" gradientTransform="translate(4 179)" gradientUnits="userSpaceOnUse"> <stop offset="0.24" stop-color="#809ea4" /> <stop offset="0.37" stop-color="#7e9ca3" /> <stop offset="0.43" stop-color="#77979d" /> <stop offset="0.47" stop-color="#6b8e95" /> <stop offset="0.5" stop-color="#598188" /> <stop offset="0.53" stop-color="#426f78" /> <stop offset="0.55" stop-color="#265a64" /> <stop offset="0.57" stop-color="#06414c" /> <stop offset="0.58" stop-color="#003d48" /> <stop offset="0.67" stop-color="#08434e" /> <stop offset="0.83" stop-color="#1e545e" /> <stop offset="1" stop-color="#406d76" /> </linearGradient> <linearGradient id="9d0856c7-09e7-46fd-81e7-a70b65c018e6" x1="774.4" y1="-62" x2="901.1" y2="-62" gradientTransform="translate(4 179)" gradientUnits="userSpaceOnUse"> <stop offset="0.13" stop-color="#c1272d" /> <stop offset="1" stop-color="#809ea4" /> </linearGradient> <linearGradient id="16abb108-c869-4531-9dfe-d0111b19fe5b" x1="774.4" y1="22.1" x2="901.1" y2="22.1" xlink:href="#9d0856c7-09e7-46fd-81e7-a70b65c018e6" /> <linearGradient id="c51dd902-474d-4f1c-8bc8-c52955b0b665" x1="774.4" y1="-151.1" x2="901.1" y2="-151.1" xlink:href="#9d0856c7-09e7-46fd-81e7-a70b65c018e6" /> <linearGradient id="95d6e285-e783-4df5-bc5e-aab40f48b5a9" x1="723.4" y1="111.1" x2="783.4" y2="111.1" gradientTransform="translate(4 179)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#68c6e0" /> <stop offset="1" stop-color="#003d48" /> </linearGradient> <linearGradient id="ecedf608-7f1b-4b07-a07e-109ca9370224" x1="723.4" y1="22.1" x2="783.4" y2="22.1" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="6ca99cff-da8a-4e1f-be1d-6ed5909b4e8d" x1="723.6" y1="-62.4" x2="783.6" y2="-62.4" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="770aa32b-0dbe-4939-bfc6-712325be20ba" x1="736.27" y1="-70.97" x2="759.27" y2="-70.97" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="eb09081a-6a6e-47be-8984-df1ccd04b32b" x1="723.4" y1="-149" x2="783.4" y2="-149" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="eb4760b8-3c56-4e66-b3e0-7a0afc3d4a73" x1="185.77" y1="353.9" x2="294.63" y2="353.9" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="1287529a-3aa9-4cee-b604-6c786d35a551" x1="220.78" y1="324.89" x2="259.1" y2="324.89" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="8e1ca799-e9f1-475c-956b-3e9a3f761b89" x1="220.78" y1="374.5" x2="259.1" y2="374.5" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="60916754-3be7-422c-8891-0ab7c7ffc955" x1="220.78" y1="367.15" x2="259.1" y2="367.15" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="99300956-f02f-4c8a-92dd-4ecf915210a9" x1="1668.97" y1="356.5" x2="1777.23" y2="356.5" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="12af0959-8be6-4f88-87fa-387d8ddee9a9" x1="1707.86" y1="362.84" x2="1739.61" y2="362.84" gradientTransform="translate(0 520)" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> <linearGradient id="32e39175-1846-4e20-911d-ebab691a2442" x1="1704.8" y1="356.5" x2="1741.36" y2="356.5" xlink:href="#95d6e285-e783-4df5-bc5e-aab40f48b5a9" /> </defs> <title>Trinkwasserkreislauf</title> <g id="d99eabcb-5782-4741-9198-87e91e4d0d8d" data-name="Linien"> <g id="b8c0d69d-89e5-4c71-aca2-80d228267aea" data-name="Regenrohre ohne Nachhaltigkeit Kopie"> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="716" y1="467.6" x2="716" y2="30.1" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="4" y1="467.6" x2="716" y2="467.6" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="201.1" x2="716" y2="201.1" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="117" x2="716" y2="117" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="290.3" x2="716" y2="290.3" /> <line class="12daa57f-725e-42c0-84c5-e1670cf1ed6d" x1="782.4" y1="28.3" x2="716" y2="28.3" /> </g> <line class="bf718539-5a3a-4784-8756-0b3107cf9dc1" x1="901.1" y1="28.5" x2="901.1" y2="467.6" /> <line class="fc333939-3a0a-4b35-9590-309d95aa77e8" x1="901.1" y1="467.6" x2="1924" y2="467.6" /> <line class="bb93fe99-5498-4272-8c33-3acaf7dd2c1c" x1="901.1" y1="289.1" x2="782.4" y2="289.1" /> <line class="ab532fbc-993f-4371-9fb0-504681daa114" x1="901.1" y1="117" x2="782.4" y2="117" /> <line class="3574d1ea-ea26-4368-861a-c621e7a22e4b" x1="901.1" y1="201.1" x2="782.4" y2="201.1" /> <line class="359d65b9-4f8b-4a97-b95c-71bb4e050c82" x1="901.1" y1="27.9" x2="782.4" y2="27.9" /> </g> <g id="a23aaddc-4b70-4ed7-a74e-e21dbd319bd8" data-name="Icons"> <circle class="2b7efd01-1675-46a5-8255-cdd88ed222a6" cx="757.4" cy="290.1" r="30" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M760.5,639h-9.8a5.19,5.19,0,0,0-4.8,3.3,19.32,19.32,0,0,0-1,6.3.68.68,0,0,0,.7.7h15.9a.68.68,0,0,0,.7-.7h0C762.3,648.7,760.7,640.2,760.5,639Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M767.8,627.9H752.4a.68.68,0,0,0-.7.7h0v.3a.68.68,0,0,0,.7.7h14.7a.68.68,0,0,0,.7-.7h0v-1Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M767.8,630.4H746.4a1.5,1.5,0,0,0-1.6,1.5s3.3,6.3,4.2,6.3h12.6a7.22,7.22,0,0,0,6.2-6.3Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M743.6,612.7h7.6v14.6a2.43,2.43,0,0,1-2.4,2.4h-5.2a2.43,2.43,0,0,1-2.4-2.4V615.1A2.37,2.37,0,0,1,743.6,612.7Z" transform="translate(4 -341)" /> <circle class="a82f478d-939b-4dff-bcff-ff4e56487ea7" cx="757.4" cy="201.1" r="30" /> <circle class="654927d5-6c4b-4569-b4a9-835e32d551de" cx="757.4" cy="202.4" r="5.8" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M742.6,526.9a2.8,2.8,0,0,0-2.8,2.8h0v24.5a2.8,2.8,0,0,0,2.8,2.8h21.7a3,3,0,0,0,3-3V526.9Zm8.4,1.6a1.43,1.43,0,1,1-1.1,1.7v-.6a1.39,1.39,0,0,1,1.1-1.1Zm-4.1,0a1.43,1.43,0,1,1-1.1,1.7v-.6A1.53,1.53,0,0,1,746.9,528.5Zm-3.4,2.9a1.43,1.43,0,1,1,1.1-1.7v.6a1.72,1.72,0,0,1-1.1,1.1Zm10.7,19.7a7.69,7.69,0,1,1,6.9-8.4,4.3,4.3,0,0,1,0,1.6,7.86,7.86,0,0,1-6.9,6.8Z" transform="translate(4 -341)" /> <circle class="c18e6e86-e703-4aee-a4aa-ff2554f372ba" cx="757.6" cy="116.6" r="30" /> <rect class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" x="748" y="104.5" width="12" height="2" /> <path class="6fd08600-4390-4cbd-8b2c-8c173408944b" d="M745.8,448.2h0a1.61,1.61,0,0,1-.4.7.57.57,0,1,0,.8,0A1.27,1.27,0,0,1,745.8,448.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M745.8,448.2h0a1.61,1.61,0,0,1-.4.7.57.57,0,1,0,.8,0A1.27,1.27,0,0,1,745.8,448.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M755.2,449.7a.61.61,0,0,0,0-.8,2.51,2.51,0,0,1-.4-.7h0a1.61,1.61,0,0,1-.4.7.57.57,0,0,0,.8.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M751.8,449.9c.1,0,.3-.1.4-.1a.61.61,0,0,0,0-.8,2.51,2.51,0,0,1-.4-.7h0a1.61,1.61,0,0,1-.4.7.61.61,0,0,0,0,.8C751.5,449.8,751.6,449.9,751.8,449.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.7,448.2h0a1.61,1.61,0,0,1-.4.7.57.57,0,1,0,.8,0A1.27,1.27,0,0,1,748.7,448.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M745.3,450.7h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9.61.61,0,0,0,.8,0,.75.75,0,0,0,0-.9C745.6,451.2,745.4,451,745.3,450.7Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M755.6,452.4a.75.75,0,0,0,0-.9,2,2,0,0,1-.4-.8h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9A.61.61,0,0,0,755.6,452.4Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M751.9,452.5a.52.52,0,0,0,.4-.2.75.75,0,0,0,0-.9,2,2,0,0,1-.4-.8h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9A.4.4,0,0,0,751.9,452.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.5,450.7h0a3,3,0,0,1-.4.8.75.75,0,0,0,0,.9.61.61,0,0,0,.8,0,.75.75,0,0,0,0-.9A3,3,0,0,1,748.5,450.7Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.9,453.2h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1,.75.75,0,0,0,.9,0,.67.67,0,0,0,0-1A2,2,0,0,1,744.9,453.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M755.7,453.2h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1,.75.75,0,0,0,.9,0,.67.67,0,0,0,0-1A2,2,0,0,1,755.7,453.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M752.1,455.2c.2,0,.3-.1.5-.2a.67.67,0,0,0,0-1,2.47,2.47,0,0,1-.4-.9h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1C751.7,455.2,751.9,455.2,752.1,455.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.4,453.2h0c-.1.3-.3.6-.4.9a.67.67,0,0,0,0,1,.75.75,0,0,0,.9,0,.67.67,0,0,0,0-1A2,2,0,0,1,748.4,453.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.4,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.78.78,0,0,0,0-1.1A1.93,1.93,0,0,1,744.4,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M756.1,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.76.76,0,0,0,.2-.5,1.42,1.42,0,0,0-.2-.6A1.93,1.93,0,0,1,756.1,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M752.2,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.78.78,0,0,0,0-1.1A1.93,1.93,0,0,1,752.2,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M748.2,455.9h0a4.05,4.05,0,0,1-.5.9.78.78,0,0,0,0,1.1.67.67,0,0,0,1,0,.78.78,0,0,0,0-1.1A1.93,1.93,0,0,1,748.2,455.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.6,445.5H756a5.74,5.74,0,0,0-5-5.2v-3.2h0v-.7H738v24h1v-23h10v2.8C747,440.6,744.6,443.5,744.6,445.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M739.3,475.1c0,.4-.1.4-.3.4a1,1,0,0,0-1,1,1.42,1.42,0,0,0,.2.6h2.1a2.61,2.61,0,0,0,1-2c0-.4.1-.4.3-.4a1.05,1.05,0,0,0,.9-.5,16,16,0,0,1-2.3-1A2.65,2.65,0,0,0,739.3,475.1Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M768.1,475.5c-.2,0-.3,0-.3-.4a2.36,2.36,0,0,0-1.1-2.1,20,20,0,0,1-2.1,1,1,1,0,0,0,.9.7c.2,0,.3,0,.3.4a2.22,2.22,0,0,0,1,2h2.1a1,1,0,0,0-.2-1.4,1.42,1.42,0,0,0-.6-.2Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M736.7,463h-2.9l1.8,4.2c1.6,3.8,6,6.8,9.7,6.8h16.2c3.7,0,8.2-3,9.9-6.7l2-4.3Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M773.9,460.4H733.1c-.8,0-1.5.4-1.5,1v.5c0,.5.7.6,1.5.6h40.8c.8,0,1.5,0,1.5-.6v-.5C775.5,460.8,774.8,460.4,773.9,460.4Z" transform="translate(4 -341)" /> <circle class="c712a589-6dea-47cd-b186-020daf4cc9ef" cx="757.4" cy="30" r="30" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744.8,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,744.8,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M764.4,361.9H741.8c0-5,5.1-9,11.3-9S764.4,356.9,764.4,361.9Z" transform="translate(4 -341)" /> <rect class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" x="745.8" y="22.2" width="22.6" height="3" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M763.9,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,763.9,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M757.5,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,757.5,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.9,369a10.93,10.93,0,0,1-.8-1.5h0a4.35,4.35,0,0,1-.8,1.5,1.27,1.27,0,0,0,0,1.8,1.21,1.21,0,0,0,1.6,0A1.27,1.27,0,0,0,750.9,369Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M744,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,744,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M764.8,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,764.8,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M757.9,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,757.9,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.7,374.5a5.56,5.56,0,0,1-.9-1.7h0a5.56,5.56,0,0,1-.9,1.7,1.39,1.39,0,0,0,0,1.9,1.27,1.27,0,0,0,1.8,0A1.39,1.39,0,0,0,750.7,374.5Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M743.1,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.55,1.55,0,0,0,743.1,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M765.9,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.81,1.81,0,0,0,765.9,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M758.3,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.66,1.66,0,0,0,758.3,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.4,379.9a7.57,7.57,0,0,1-.9-1.8h0a5.08,5.08,0,0,1-.9,1.8,1.45,1.45,0,0,0,0,2.1,1.39,1.39,0,0,0,1.9,0A1.55,1.55,0,0,0,750.4,379.9Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M742.3,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,742.3,385.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M766.9,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,766.9,385.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M758.7,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,758.7,385.8Z" transform="translate(4 -341)" /> <path class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" d="M750.2,385.8a7.5,7.5,0,0,1-1-2h0a7.5,7.5,0,0,1-1,2,1.69,1.69,0,0,0,0,2.3,1.66,1.66,0,0,0,2.1,0A1.81,1.81,0,0,0,750.2,385.8Z" transform="translate(4 -341)" /> <rect class="1ce0d2b4-af1f-4a4d-950c-45a9f3e88db7" x="755.9" y="2.2" width="3.1" height="12.4" /> <g id="4c216e04-5abc-4a21-9662-4a9aedcd64e8" data-name="ICONS ANSCHLÜSSE"> <circle class="303b154c-1561-49ef-b7bc-7a8ee2f68408" cx="244.2" cy="532.9" r="52.5" /> <path class="f3cb12af-65d6-4e2a-b4ce-5dad7f5f94cb" d="M235.2,853.9a7.34,7.34,0,0,0,9.8,0c2.7-2.2,2.7-6.9-.1-10.6a34.77,34.77,0,0,1-4.7-9.2V834a34.25,34.25,0,0,1-4.8,9.3C232.4,847,232.4,851.7,235.2,853.9Z" transform="translate(4 -341)" /> <polygon class="954881f4-32ba-4ff8-ba1f-e7f562cd5dc7" points="234.6 569.5 253.6 569.5 256.3 537.5 231.9 537.5 234.6 569.5" /> <path class="1d30ed1b-fdd2-4afd-9191-b90b4fe58f6f" d="M224.2,862.7l4.3,47.9a1.38,1.38,0,0,0,1.3,1.1h20.7a1.22,1.22,0,0,0,1.3-1.1l4.3-47.9.2-1.2a1.9,1.9,0,0,1,.7-1.1h0a.75.75,0,0,1,.9,0c.1.1.2.1.2.2a1.4,1.4,0,0,1,.3.9L254,910.8a3.6,3.6,0,0,1-3.6,3.3H229.7a3.76,3.76,0,0,1-3.6-3.3l-4.4-49.3a1.21,1.21,0,0,1,1.1-1.3h.1S223.9,860.3,224.2,862.7Z" transform="translate(4 -341)" /> </g> <rect class="edffdee3-8d93-4425-8276-e050fc9a1ad6" x="1674.6" y="483" width="105" height="105" /> <path class="9240911c-d1e9-40a2-88ec-62ad59367ac4" d="M1732.6,876.2a1.42,1.42,0,0,0-2,.1,2.81,2.81,0,0,1-3.9-.1,1.55,1.55,0,0,0-2.1-.1,2.66,2.66,0,0,1-3.7,0,1.52,1.52,0,0,0-2-.1,2.81,2.81,0,0,1-3.9.1,1,1,0,0,0-1.6,0c-1.1.8-2.4.5-2.4.2v.8a12.59,12.59,0,0,0,12.5,12.9,12.74,12.74,0,0,0,12.7-12.8v-.1l-.1-.4A3,3,0,0,1,1732.6,876.2Z" transform="translate(4 -341)" /> <circle class="e473867e-952b-4d84-9e9a-b9f1b1214905" cx="1727.1" cy="535.5" r="16.6" /> </g> </svg>

    opened by tilight 0
  • reverse option

    reverse option

    Hi,

    I'm trying to reverse the animation using the 'reverse' option, but the plays still forward :( I pasted below the code

    var schengenMap = $('#schengen').drawsvg({reverse: true}); schengenMap.drawsvg('animate');

    thank you in advance, matteo

    opened by piskello 2
Releases(1.1.0)
Owner
Leonardo Santos
JavaScript Developer
Leonardo Santos
GitHub http://lcdsantos.github.io/jquery-drawsvg/
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Jan 2, 2023
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

Matteo Bruni 4.7k Jan 4, 2023
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 721 Dec 6, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Dec 17, 2022
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Parallax.js Simple parallax scrolling implemented as a jQuery plugin. http://pixelcog.com/parallax.js/ Please also check our v2.0.0-alpha! We'd be hap

PixelCog Inc. 3.5k Dec 21, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

Material Design Preloader!s A jQuery plugin that recreates the Material Design preloader (as seen on inbox). I was fascinated when I first saw the pre

Aaron Lumsden 376 Dec 29, 2022
A jQuery plugin that assists scrolling and snaps to sections.

jQuery Scrollify A jQuery plugin that assists scrolling and snaps to sections. Touch optimised. Demo http://projects.lukehaas.me/scrollify. More examp

Luke Haas 1.8k Dec 29, 2022
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Dec 30, 2022
A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

Vincent Garreau 26.7k Jan 8, 2023
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

Musab Hassan 33 Dec 28, 2022
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.

Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR

Florian DE LA COMBLE 34 Nov 25, 2022
Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit Super-smooth CSS3 transformations and transitions for jQuery jQuery Transit is a plugin for to help you do CSS transformations and tran

Rico Sta. Cruz 7.4k Dec 23, 2022
Unobtrusive page transitions with jQuery.

smoothState.js smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browse

Miguel Pérez 4.5k Dec 21, 2022
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Alex MacArthur 165 Dec 12, 2022
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Dec 30, 2022
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Jan 4, 2023