<metaname="description"content="The Text Properties component for KUTE.js allows you to animate CSS properties related to typography on most browsers.">
<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 typographic CSS properties of a target content <b>Element</b> on most browsers.</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 text size or spacing properties of a target text element.</p>
</div>
<divclass="col9 border">
<pclass="condensed lead">The KUTE.js <b>Text Properties</b> component enables animation for typography related CSS properties of content element targets
on most browsers.</p>
<p>This small and simple component can be used to create various attention seekers for any content elements such as <b>HTMLHeadingElement</b>,
<b>HTMLParagraphElement</b>, <b>HTMLUListElement</b> or any other, as well as for entire content blocks.</p>
<p>You can either animate an entire string or content block or split your string into words or letters and create a simple animation with one or more of
the following properties:</p>
</div>
</div>
</div>
</div>
<divclass="content-wrap">
<h3>Supported Properties</h3>
<ul>
<li><kbdclass="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a target element.</li>
<li><kbdclass="bg-olive">lineHeight</kbd> allows you to animate the <code>line-height</code> for a target element.</li>
<li><kbdclass="bg-olive">letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a target element.</li>
<li><kbdclass="bg-olive">wordSpacing</kbd> allows you to animate the <code>word-spacing</code> for a target element.</li>
<li>Be sure to check the <ahref="./assets/js/textProperties.js">textProperties.js</a> for a more in-depth review of the above example.</li>
<li>Similar to box model properties, the text properties are also layout modifiers, they will push the layout around forcing unwanted re-paint work. To avoid re-paint, you
can use a fixed height for the target element's container, as we used in our example here, or set your text to <code>position:absolute</code>.</li>
<li>The component is only included in the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
2020-06-09 22:08:43 +02:00
</div>
<!-- FOOTER -->
<footer>
<divclass="content-wrap">
<pclass="pull-right"><aid="toTop"href="#">Back to top</a></p>