docs/clipProperty.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
  <meta name="description" content="The Clip Property component for KUTE.js allows you to animate the CSS clip property on most browsers.">
  <meta name="keywords" content="clip,css clip,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
  <meta name="author" content="dnp_theme">
  <link rel="shortcut icon" href="./assets/img/favicon.ico">
  <link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">

  <title>KUTE.js Clip Property</title>

  <!-- RESET CSS -->
  <link type="text/css" href="./assets/css/reset.css" rel="stylesheet">

  <!-- DEMO KUTE CSS -->
  <link type="text/css" href="./assets/css/kute.css" rel="stylesheet">

  <!-- Synthax highlighter -->
  <link href="./assets/css/prism.css" rel="stylesheet">

</head>

<body>
  <div class="site-wrapper">

    <div class="navbar-wrapper">
      <div class="content-wrap">
        <nav class="navbar">
          <a href="index.html"><h1>KUTE.<span>js</span></h1></a>
          <div class="nav-wrapper d-flex align-items-center justify-content-between">
            <ul class="nav">
              <li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
                <ul class="subnav">
                  <li><a href="transformFunctions.html">Transform Functions</a></li>
                  <li><a href="transformMatrix.html">Transform Matrix</a></li>
                  <li><a href="svgTransform.html">SVG Transform</a></li>
                  <li><a href="svgMorph.html">SVG Morph</a></li>
                  <li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
                  <li><a href="svgDraw.html">SVG Draw</a></li>
                  <li><a href="filterEffects.html">Filter Effects</a></li>
                  <li><a href="borderRadius.html">Border Radius</a></li>
                  <li><a href="htmlAttributes.html">HTML Attributes</a></li>
                  <li><a href="shadowProperties.html">Shadow Properties</a></li>
                  <li><a href="colorProperties.html">Color Properties</a></li>
                  <li><a href="boxModel.html">Box Model</a></li>
                  <li class="active"><a href="clipProperty.html">Clip Property</a></li>
                  <li><a href="backgroundPosition.html">Background Position</a></li>
                  <li><a href="textProperties.html">Text Properties</a></li>
                  <li><a href="opacityProperty.html">Opacity Property</a></li>
                  <li><a href="scrollProperty.html">Scroll Property</a></li>
                  <li><a href="textWrite.html">Text Write</a></li>
                </ul>
              </li>
              <li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
            </ul>
              <ul id="share">
                <li>
                  <a class="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">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
                  </a>
                </li>
                <li>
                  <a class="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">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
                  </a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>

      <div class="content-wrap">
        <h2 class="head-title">Clip Property</h2>
        <p class="condensed lead">The component that animates the CSS <i>clip</i> property of a target element on most browsers.</p>
      </div>

      <div class="featurettes dark">
        <div class="content-wrap">
          <div class="columns">
            <div class="col3">
              <h3 class="border text-right">Overview</h3>
              <p class="condensed text-right">Animate the <b>clip</b> property of a target element when certain conditions are met.</p>
            </div>
            <div class="col9 border">
              <p class="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>
              <p>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</p>
            </div>
          </div>
        </div>
      </div>


      <div class="content-wrap">

        <h3>Example</h3>
        <p>A possible tween object using the property:</p>

<pre><code class="language-javascript">KUTE.to('selector',{clip:[0,150,100,0]}).start();</code></pre>

        <p>And a quick example here could look like this:</p>

        <div id="clip" class="featurettes" style="min-height: 190px">
            <div class="example-item example-box bg-red" style="position: absolute; background: url('https://picsum.photos/250/250') center center no-repeat;"></div>

            <div class="example-buttons">
                <a class="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 <a href="htmlAttributes.html">HTML Attributes</a> component for much more animation potential and for no compromise on animation quality.</li>
          <li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
        </ul>

      </div>

      <!-- FOOTER -->
      <footer>
          <div class="content-wrap">
              <p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
              <p>&copy; 2015 - 2022 &middot; <a href="https://github.com/thednp">thednp</a>.</p>
          </div>
      </footer>

  </div>
  <!-- /.site-wrapper -->

  <!-- JavaScript =============================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="./src/polyfill.min.js"></script>
  <script src="./src/kute-extra.min.js"></script>
  <script src="./assets/js/prism.js"></script>

  <script src="./assets/js/clipProperty.js"></script>
  <script src="./assets/js/scripts.js"></script>
</body>

</html>