<metaname="description"content="The HTML Attributes component for KUTE.js enables animation for any numeric presentation attribute as well as specific color attributes.">
<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 color attributes or any single value presentation attribute of a target element on most browsers.</p>
<pclass="condensed text-right">Animate a wide variety of presetantion attributes of a target element.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>HTML Attributes</b> component enables animation for any numeric presentation attribute, with or without a measurement unit / suffix as well as specific color attributes.</p>
<p>The component can be a great asset for creating complex animations in combination with the SVG components as we'll see in the following examples.</p>
<p>The component doesn't support attributes with multiple values like <b>stroke-dasharray</b>, <b>viewBox</b> or <b>transform</b> for specific reasons. To animate the <b>stroke</b> related attributes, the
<ahref="svgDraw.html">SVG Draw</a> component is the tool for you, while for transform you have the <ahref="svgTransform.html">SVG Transform</a> component and the
<p>The <b>HTML Attributes</b> component can handle all possible single value presentation attributes with both dashed string and camel-case notation. Let's have a look at a sample notation so you can
<p>The <code>strokeWidth</code> attribute is very interesting because it can work with <code>px</code>, <code>%</code> or with no unit/suffix. In this case, and in any context, the component will always work with the
attribute's current value suffix to eliminate any possible janky animation.</p>
<p>The <b>HTML Attributes</b> component can also animate color attributes: <code>fill</code>, <code>stroke</code> and <code>stopColor</code>. If the elements are affected by their CSS counterparts, the effect
is not visible, you need to make sure that doesn't happen.</p>
<p>If in this example the <code>fill</code> attribute value would reference a gradient, then <i>rgba(0,0,0,0)</i> is used. Keep in mind that the component will not work with combined
fill values like <code>url(#pattern) rgba()</code>, you are better of only using the <code>url(#pattern)</code> and use other attributes to control directly the animation of that
linked pattern, just like in the last example below.</p>
<p>Similar to the example on circle attributes, we can also animate the gradient positions but this time with a specific to gradients suffix, and the component will make sure
to always include the suffix for you, as in this example the <code>%</code> unit is found in the current value and used as unit for the DOM update:</p>
<li>The power of this little gem comes from the fact that it can work with internally undefined/unknown attributes, as well as with attributes that are not yet present in the W3 draft. As long as you provide valid values specific
to the attribute, the component will assign an update function and will always double check for the current value to determine if it needs a suffix or if the attribute name needs adjustments
<li>This component is a great addition to complement any SVG related component as well as a great complement to <ahref="filterEffects.html">Filter Effects</a> component.</li>
<li>Remember to check your elements markup for changes, your animation might not be visible because equivalent CSS is used.</li>
<li>This component is bundled with the standard <i>kute.js</i> distribution file and the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<divclass="content-wrap">
<pclass="pull-right"><aid="toTop"href="#">Back to top</a></p>