230 lines
17 KiB
HTML
230 lines
17 KiB
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="KUTE.js is a fully featured JavaScript animation engine with outstanding performance and supporting 3D transforms, SVG Morph, draw SVG, SVG transform, cross-browser animation, scroll animation, CSS3 properties and many more.">
|
|
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,morph svg,draw svg,svg transform,css3,3d transform,scroll,Javascript,Native Javascript,vanilla javascript,jQuery">
|
|
<meta name="author" content="thednp">
|
|
<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 | JavaScript Animation Engine</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">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="site-wrapper">
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="content-wrap">
|
|
<nav class="navbar">
|
|
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
|
|
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
|
<ul class="nav">
|
|
<li class="btn-group"><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><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">
|
|
<div class="columns welcome">
|
|
<div class="col2">
|
|
<div class="frontpage">
|
|
<h2 class="nomargin" data-text="Welcome to KUTE.js" style="opacity: 0;">Welcome to KUTE.js!</h2>
|
|
<p class="lead" data-text="The modern, completely reworked and fully featured animation engine for the modern web."></p>
|
|
<p class="btns">
|
|
<a class="btn btn-orange" style="opacity: 0;" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
|
|
<a class="btn btn-red" style="opacity: 0;" href="https://github.com/thednp/kute.js">Github</a>
|
|
<a class="btn btn-pink" style="opacity: 0;" href="http://www.jsdelivr.com/#!kute.js">CDN 1</a>
|
|
<a class="btn btn-olive" style="opacity: 0;" href="https://cdnjs.com/libraries/kute.js">CDN 2</a>
|
|
<a class="btn btn-indigo" style="opacity: 0;" href="https://npmjs.com/kute.js">NPM</a>
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col2">
|
|
<svg class="kute-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" width="100%">
|
|
<path id="rectangle" style="transform: translateX(-250px); opacity: 0;" fill="#e91b1f" d="M559,597.4H302.1H43.6c-21,0-38-17-38-38V408.8V223.6V44c0-21,17-38,38-38h105.6H300h160.3H559
|
|
c21,0,38,17,38,38v184v331.4C597,580.4,580,597.4,559,597.4z"/>
|
|
<path id="star" visibility="hidden" fill="#FF5722" d="M302.1,17.9c16,29,81.4,147.7,98.2,178.2c31.1,6,62.3,11.9,93.4,17.9c35.5,6.8,71,13.6,106.5,20.4
|
|
c-46.4,49.5-92.7,99-139.1,148.5c1.1,8.5,6.7,53.4,12.4,99.1c5.7,45.3,11.4,91.4,12.9,102.9c-36-16.9-158.8-74.5-184.2-86.4
|
|
c-28.5,13.4-151.3,71-184.2,86.4c0.4-3.2,13.3-106.6,13.3-106.6s10.1-81,11.9-95.3C96.8,333.5,50.4,284,4,234.5
|
|
c34.4-6.6,68.8-13.2,103.3-19.8c32.2-6.2,64.4-12.3,96.5-18.5C221,165.1,286.5,46.2,302.1,17.9z"/>
|
|
<path id="circle" visibility="hidden" fill="#9C27B0" d="M157,367a210,210 0 1,0 420,0a210,210 0 1,0 -420,0z"/>
|
|
<path id="cat" visibility="hidden" fill="#ffd626" d="M519.8,118.6C518.4,90.8,483.3,78,460,82.5c-51.1,9.7-59.4,67.2-48.3,109.4c5.4,20.5,15.1,42.7,13.6,64.3
|
|
c-1.3,19.5-7.8,39.2-20.7,54.1c1-0.1,2.2-0.3,3.2-0.4c-1,0.1-2.2,0.3-3.2,0.4c-12.9,2-25.3,7.4-29.6,9.6
|
|
c-0.9-13.3-1.8-24.5-2.3-31.9c-0.4-10.3-0.8-18.6-1.1-23.9c-1-12.6-15.9-25.3-28.2-33.7c-8.8-6-16.5-9.8-16.5-9.8
|
|
c13.8-10.2,19.8-17.6,21.6-23.9c2.3-8,4.3-35.1,4.3-35.1s1.1-6,1.1-15.2c0-11.6-2-22.6-5.7-32.9h0.1c0,0,25.4-45.8,14.7-60.1
|
|
c-8.9-11.7-46.3,16.7-46.3,16.7c-16.3-12.6-36.9-20.2-59.1-20.2c-6,0-11.9,0.5-17.7,1.7c0,0-7.4-41.3-27.3-39.7
|
|
c-19.8,1.7-29.3,72.8-29.3,72.8l0.1,0.1c-8.3,9.9-14.7,21.6-18.4,34.3c0,0-11.2,26.4-10.3,42.7c0.9,16.2,15.9,31.2,25.6,42.3
|
|
l18.9,19.1c0,0,2.8,3.1,6.9,6.9c-0.4,0.3-3.1,1.5-7,3.8c-11.1,6.4-31.5,20.5-36,41.5c-0.4,1.9-0.8,4-1,6.1
|
|
c-1.7,12.8-1.4,30.1-0.4,46.6c-5.9-4.1-25.5-15.8-40.3-4.3c-0.6,0.5-1.1,0.9-1.8,1.4c-16.5,13.9-25.4,34.4-25.4,53.8
|
|
c0,9.7,3.7,29.1,12,50.4c1,2.8,2.3,5.6,3.6,8.4c4.6,10.3,10.2,20.8,17.2,30.6c6.8,9.7,14.8,18.6,24.1,26c0,0-24.2,13.8-33,32.7
|
|
s-6.6,28.1,3.3,29.7c10.1,1.7,57.1-21.8,57.1-21.8c-0.6,2.9-1.5,6.1-2.6,9.6c-5.7,9.7-12.8,22.2-7.3,31.4c1.8,2.9,4.8,5.6,9.8,7.7
|
|
c20.8,8.8,41.2,2.3,50.8-8.4c2.9-3.2,4.8-6.6,5.6-10.3c1.1-6.1,1-19.3,0.5-34.3c0,0,39.5,9.9,74.9-4c2.9,21.4,5.5,38.8,6.1,43.2
|
|
c0.1,0.9,0.4,1.7,0.6,2.4c2,4.5,9.9,17.5,34.8,14.5c12.6-1.5,19.4-7.8,22.8-12.8c1.1-1.7,1.9-3.4,2.2-5.4c0.1-1.1,0.1-2.4-0.1-3.6
|
|
c-0.8-1.8-1.5-4.1-2.3-6.8c-3.1-8.5-7.7-21.6-10.7-33h0.1c0,0,1.3,0.3,3.4,0.8c11.7,2.8,50.3,11.5,53.1,9.3
|
|
c3.3-2.4,5.7-10.6,2.6-24.2c-3.8-16.5-38.5-24.7-38.5-24.7s3.7-4.8,9.2-12.5c14.2-19.8,40.4-58.3,46.4-80.4
|
|
c7.7-27.9,9.3-58.7-4.2-74.9c20.3-37.8,27.5-78.3,15.1-120c-5.4-18-21.7-63.1,0.9-75.9c8.9-5,25.9-8.4,30.1,4.7
|
|
c0,0-7.8,8.7-9.2,14.4c-1.3,5.9-1.9,16.2,14,18.1C502.4,162.3,521.4,150.6,519.8,118.6z"/>
|
|
<path id="hexagon" visibility="hidden" fill="#4CAF50" d="M447,45.4H153L6.1,300L153,554.6h294L593.9,300L447,45.4z"/>
|
|
<path id="head" visibility="hidden" fill="#2196F3" d="M505.1,520.1c-15.5-13-26-49.1-50.6-67.2c-61.6-45-107.4-15-77.4,20.1
|
|
c14.3,16.8,27.2,13.2,40.5,25.2c20.1,18.6,3.1,40.7-15.5,39.2c-10.4-0.8-16.5-10.4-38.2-17.6c-34.9-11.7-84.2-11.2-164.7-24.4
|
|
c-109.4-17.8-230.6-111-182-241C62.5,133.5,115.5,62.5,244.8,62.5c170.5,0,213.5,140.7,248.4,210c16.3,32.3,22.7,26.2,36.1,44.8
|
|
c12.2,17.1,1.5,46.1-22.9,37.9c-53.7-17.8-77.1,27.2-23.2,62.9c14.5,9.7,59.3,15,73.8,24.7C610.8,478.6,553,560.1,505.1,520.1
|
|
L505.1,520.1z"/>
|
|
<path id="winky-face" fill="rgba(0,0,0,0.5)" style="opacity:0" d="M347.1,289.3l-13-16.5c-20.1,25.7-15.8,25.2-35.6,0l-13,16.5c-5.1,6.6-14.8-1.3-9.7-7.6
|
|
c25.2-32.3,19.9-32.8,40.5-6.4c20.4-26,14.8-26.7,40.5,6.4c2,2.8,1.3,6.6-1.5,8.7C352.7,292.1,349.1,291.6,347.1,289.3L347.1,289.3z
|
|
M118,289.3l-13-16.5c-20.1,25.7-15.8,25.2-35.6,0l-13,16.5c-5.1,6.6-14.8-1.3-9.7-7.6c25.2-32.3,19.9-32.8,40.5-6.4
|
|
c20.4-26,14.8-26.7,40.5,6.4c2,2.8,1.3,6.6-1.5,8.7C123.6,292.1,120.1,291.6,118,289.3L118,289.3z"/>
|
|
<path id="drop" visibility="hidden" d="M558.6,365.4c-13,20.4,23.4,44,36.7,23.7C608.2,368.9,571.8,345.3,558.6,365.4z"/>
|
|
<path id="drop-initial" style="opacity:0" fill="#2196F3" d="M505.2,327.1"/>
|
|
<path id="mouth-happy" visibility="hidden" d="M251.9,259c-2,26.5-24.2,46.8-50.4,46.8c-26.5,0-48.4-20.4-50.4-46.6c0-2,1.3-3.8,3.3-3.8
|
|
h93.9C250.4,255.2,251.9,256.9,251.9,259L251.9,259z"/>
|
|
<path id="mouth" style="opacity:0" fill="#000" d="M173.6,270.5c18,0.4,37.1,0.2,55.9,0c17.3-0.2,17.2,27.3-0.6,27.4c-24.5,0.2-29.4,0.4-54.6,0
|
|
C158.9,297.8,156.9,270.2,173.6,270.5z"/>
|
|
<path id="eye-left-closed" visibility="hidden" d="M123.1,221.8c-11.5-9.7-35.1-9.7-46.6,0c-10.9,9.4-25.5-7.1-14.5-16.8c19.9-16.8,55.7-16.8,75.6,0
|
|
C148.6,214.4,133.8,231.5,123.1,221.8z"/>
|
|
<path id="eye-right-closed" visibility="hidden" d="M339.7,221.8c-11.5-9.7-35.1-9.7-46.6,0c-10.9,9.4-25.7-7.1-14.5-16.8c19.9-16.8,55.7-16.8,75.6,0
|
|
C365.4,214.4,350.7,231.2,339.7,221.8z"/>
|
|
<path id="eye-right" style="opacity:0" fill="#000" d="M316.2,236.1c-31.6,0-48.7-21.4-37.5-31.1c19.9-16.8,55.7-16.8,75.6,0
|
|
C365.4,214.4,350.9,236.1,316.2,236.1z"/>
|
|
<path id="eye-left" style="opacity:0" fill="#000" d="M99.4,236.1c-31.6,0-48.7-21.4-37.5-31.1c19.9-16.8,55.7-16.8,75.6,0
|
|
C148.7,214.4,134.1,236.1,99.4,236.1z"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="featurettes dark">
|
|
<div class="content-wrap">
|
|
<div class="columns">
|
|
<div class="col3">
|
|
<h2 class="border text-right">Overview</h2>
|
|
<p class="condensed text-right">If you're looking for that spicy tool to kickstart your animations, developed with latest technology and modular design, you will love KUTE.js.</p>
|
|
</div>
|
|
<div class="col9 border">
|
|
|
|
<p class="lead condensed">The JavaScript animation engine reimagined for the evolving modern web, the library that keeps track on the changing standards, the modular tool
|
|
to enable creativity.</p>
|
|
<p>Built on modern ES6/ES7 JavaScript Standard, packed with utilities, build tools and a wide range of supported properties, <b>KUTE</b>.js is now a fully featured animation engine
|
|
you can use to create complex animations, with properties or elements that cannot be animated with CSS3 transitions or other animation engines, or attributes that aren't
|
|
even drafted in the specification yet.</p>
|
|
|
|
|
|
<p class="lead condensed">The JavaScript animation engine that never stops evolving just like we never stop learning. Instead of becoming more bloated, we make it more modular,
|
|
instead of compromising we chose innovating. </p>
|
|
<p>While <b>KUTE</b>.js doesn't activelly support legacy browsers, it provides a wide range of tools and utilities you can use to create a fallback animation for every browser
|
|
and property.</p>
|
|
<p>The demo pages use a dedicated polyfill for IE10+ browsers, but today we have <a href="https://polyfill.io/">polyfill services</a> and a wide range of
|
|
<a href="http://browserhacks.com" target="_blank">browser detection</a> options to handle legacy browsers, our focus here is the highest performance on modern browsers.</p>
|
|
<p>By the way, <b>KUTE</b>.js is <a href="performance.html">really fast</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrap">
|
|
|
|
<div class="columns">
|
|
<div class="col2">
|
|
<h3 class="border">ES6/ES7 JavaScript</h2>
|
|
<p class="condensed">The entire codebase reworked on the latest standards with flexible rollup based build tools. Most classes are extensible via the ES6 <code>extend</code>
|
|
or your usual <code>prototype</code>, depending on the class.</p>
|
|
</div>
|
|
<div class="col2">
|
|
<h3 class="border">Lots of Components</h2>
|
|
<p class="condensed">All your previously supported properties and plugins have been split into components for more modularity. New additions have been added for a broader scope.
|
|
The official distribution only includes most popular components.</p>
|
|
</div>
|
|
<div class="col2">
|
|
<h3 class="border">Familiar Syntax</h2>
|
|
<p class="condensed">You can create your tween objects with a familiar syntax with your trusted options, the callback system and other component related options.</p>
|
|
</div>
|
|
<div class="col2">
|
|
<h3 class="border">Tools and Options</h2>
|
|
<p class="condensed">Along the wide range of options, certain components provide tools for further control over the outcome. Also there's a <a href="progress.html">progress
|
|
bar</a> somewhere.</p>
|
|
</div>
|
|
<div class="col2">
|
|
<h3 class="border">Well Documented</h2>
|
|
<p class="condensed">Each component demo page comes packed with tons of guides and tips on how to optimize the performance and visual presentation.</p>
|
|
</div>
|
|
<div class="col2">
|
|
<h3 class="border">MIT License</h2>
|
|
<p class="condensed">The library is released under the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE">MIT License</a>.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="content-wrap">
|
|
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
|
<p>© 2015 - 2020 · <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.min.js"></script>
|
|
<script src="./assets/js/scripts.js"></script>
|
|
<script src="./assets/js/home.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|