<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed lead">The component that animates the stroke of any <b>SVGElement</b> and updates the <i>style</i> attribute of the target.</p>
</div>
<divclass="featurettes dark">
<divclass="content-wrap">
2020-06-09 22:22:33 +02:00
<divclass="columns">
2020-06-09 22:08:43 +02:00
<divclass="col3">
<h3class="border text-right">Overview</h3>
<pclass="condensed text-right">Animate the stroke for most <b>SVGElement</b> shapes, with a very easy to use coordinates system.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>SVG Draw</b> component enables animation for the <b>stroke-dasharray</b> and <b>stroke-dashoffset</b> properties via CSS style.</p>
<p>The component uses the SVG standard <b>.getTotalLength()</b> method for <b><path></b> shapes, while for the other shapes it uses some helper methods to calculate the values
required for animation.</p>
<p>It can work with <b><path></b>, <b><glyph></b>, <b><circle></b>, <b><ellipse></b>, <b><rect></b>, <b><line></b>, <b><polyline></b> and <b><polygon></b>
shapes. It uses a very simple to use coordinates system so you can set up animations right away.</p>
<p>As you will see in the examples below, there is alot of flexibility in terms of input values.</p>
</div>
</div>
</div>
</div>
<divclass="content-wrap">
<h3>Examples</h3>
<pre><codeclass="language-javascript">// draw the stroke from 0-10% to 90-100%
var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
// draw the stroke from zero to full path length
var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
// draw the stroke from full length to 50%
var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
</code></pre>
<p>Based on the above sample code, let's see some animation going on:</p>
<li>Remember that the <codeclass="bg-indigo">draw</code> property also accepts absolute values, eg. <code>draw: '0 150'</code>; the <code>.to()</code> method takes <code>0% 100%</code>
as start value for your tweens when <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> properties are not set.</li>
<li>Sometimes the <code>stroke</code> on some shapes may not completely close, you might want to consider values outside the [0-100] percent range.</li>
<li>The <b>SVG Draw</b> component can be combined with any other SVG based component to create even more complex animations for SVG elements.</li>
2020-06-11 07:01:56 +02:00
<li>This component is bundled with the default distribution <i>kute.js</i> and the <i>demo/src/kute-extra.js</i> file.</li>
2020-06-09 22:08:43 +02:00
</ul>
</div>
<!-- FOOTER -->
<footer>
<divclass="content-wrap">
<pclass="pull-right"><aid="toTop"href="#">Back to top</a></p>