<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 CSS <i>clip</i> property of a target element 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 <b>clip</b> property of a target element when certain conditions are met.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>Clip Property</b> component enables animation for the CSS <b>clip</b> property on most browsers.</p>
<p>What exactly does it do? Well you can animate the <b>visible</b> rectangular shape of an element that is set to <b>position:absolute</b>.
If conditions are not met (more conditions apply, see notes below), the component will update the target element, but the effect is not visible.</p>
<p>Generally you can set the CSS rule for this property like this <b>clip: rect(top,right,bottom,left)</b> which forms a rectangular masking shape above
a target element making parts of it invisible.</p>
<p>While the CSS <b>clip</b> property has been deprecated, it can still be used to emulate a type of scale/reveal animation for legacy browsers in certain cases.</p>
2020-06-10 15:20:07 +02:00
<p>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</p>
2020-06-09 22:08:43 +02:00
</div>
</div>
</div>
</div>
<divclass="content-wrap">
<h3>Example</h3>
<p>A possible tween object using the property:</p>
<divclass="example-item example-box bg-red"style="position: absolute; background: url('https://picsum.photos/250/250') center center no-repeat;"></div>
<divclass="example-buttons">
<aclass="btn btn-olive"href="#">Start</a>
</div>
</div>
<h3>Notes</h3>
<ul>
<li>The component will produce no effect for target elements that have <code>overflow:visible</code> style rule.</li>
<li>Also target elements without <code>position:absolute</code> CSS rule will produce no effect.</li>
<li>This property will only work with <code>px</code> unit for the rectangular mask, which is unfortunate.</li>
<li>Don't stop here, there are thankfully replacements for this property, you can simply use all kinds of SVG masks and filters in combination
with the <ahref="htmlAttributes.html">HTML Attributes</a> component for much more animation potential and for no compromise on animation quality.</li>
2020-06-11 07:01:56 +02:00
<li>This component is bundled with 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>