deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Documentation typo and README updates

Browse source
This commit is contained in:
thednp 2016-10-04 14:39:34 +03:00
parent 6a6b7cfad0
commit 0348584c94
3 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
attr.html
View file

@ -90,7 +90,7 @@ var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
</code></pre>
<p>The Attributes Plugin does not support color attributes such as <code>fill</code> or <code>stroke</code> as well as attributes with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. To animate the stroke/fill or transform attribute, the <a href="svg.html">SVG Plugin</a> has some handy solutions for you. Despite the limitations of this plugin, you have access to just about any SVGElement/Element <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">presentation attribute</a> available.</p>
<p>The Attributes Plugin does support color attributes such as <code>fill</code> or <code>stroke</code> starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. To animate the stroke/fill or transform attribute, the <a href="svg.html">SVG Plugin</a> has some handy solutions for you. Despite the limitations of this plugin, you have access to just about any SVGElement/Element <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">presentation attribute</a> available.</p>
<h3>Attributes Namespace</h3>
<p>Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:</p>

2
features.html
View file

@ -83,7 +83,7 @@
<p>KUTE.js was developed with best practices in mind for <strong>fastest code execution</strong> and <strong>memory efficiency</strong>, but performance varies from case to case, as well as for all the other Javascript based animation engines. As a quick note on <a href="about.html#how">how it works</a>, well for the most part values are cached for the entire duration of the animation so that the repetitive tasks run smoothly, uninterruptible and avoid layout thrashing. We all know the more properties used or the more elements to animate at the same time, the more power is required.</p>
<p><span class="ion-ios-cog media"></span>Of course some would argue on many aspects, but we all trade something for the sake of something else, such as convenience and/or flexibility or fork a project that's already great to make it.. better. For the sake of performance or simply willing to provide a feature, some trade/neglect other elements such as syncronisation (check this <a href="https://www.youtube.com/watch?v=1ZWugkJV5Ks" target="_blank">video</a>), code simplicity (lots of CSS for a <a href="https://daneden.github.io/animate.css/" target="_blank">custom animation</a>) and more other.</p>
<p>To learn more about how performance can vary from case to case, check out <a href="about.html#performance">this secion</a>, it's very informative.</p>
<p>To learn more about how performance can vary from case to case, check out <a href="about.html#performance">this section</a>, it's very informative.</p>
</div>
<div class="content-wrap">

2
svg.html
View file

@ -476,7 +476,7 @@ var tween5 = KUTE.to('selector',{strokeWidth: '10px'});
<a id="cssBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Please note that <code>strokeWidth</code> is a very unique property that acts very different: when number is provided the rendered stroke will scale depending on <code>viewBox</code> and/or <code>width</code> and <code>height</code>, but if String is provided you can actually force the browser to <a href="http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg" target="_blank">scale the stroke</a> as you like.</p>
<p>Please note that <code>strokeWidth</code> is a very interesting property that acts very different: when number is provided the rendered stroke will scale depending on <code>viewBox</code> and/or <code>width</code> and <code>height</code>, but if String is provided you can actually force the browser to <a href="http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg" target="_blank">scale the stroke</a> as you like.</p>
<p>Now let's have a look at gradients, here we can animate the <code>stopColor</code> defined within the SVG's <code>&lt;linearGradient&gt;</code> element.</p>
<pre><code class="language-markup">&lt;linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
&lt;stop offset="0%" style="stop-color: #ffd626; stop-opacity:1">&lt;/stop>