Removed jQuery plugin from documentation
This commit is contained in:
thednp
parent
bd73c423b6
commit
81a86026c5
|
|
@ -208,7 +208,7 @@
|
|||
<p><strong>Remember</strong>: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.</p>
|
||||
|
||||
<h2>KUTE.js Project</h2>
|
||||
<p>KUTE.js continues what was started with <strong>jQueryTween</strong> (removed) and the main goal is to improve usability, compatibility, code quality and performance. KUTE.js includes a jQuery plugin to help you easily implement it
|
||||
<p>KUTE.js continues what was started with <strong>jQueryTween</strong> (removed) and the main goal is to improve usability, compatibility, code quality and performance. KUTE.js includes a <a href="https://github.com/thednp/kute.js/blob/experiments/kute-jquery.js" target="_blank">jQuery plugin</a> to help you easily implement it
|
||||
in your jQuery applications, and also packs a set of tools such as bezier and physics based easing functions, all elegantly packed for convenience and distributed via CDN.</p>
|
||||
<p>It all started with a fork of the popular <a href="https://github.com/tweenjs/tween.js" target="_blank">tween.js</a> and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.</p>
|
||||
<p>In the hystory of the making there were consistent contributions of <a href="https://github.com/dalisoft" target="_blank">Dav</a> aka @dalisoft for features such as play & pause, <a href="text.html">Text Plugin</a>, as well as
|
||||
|
|
|
|||
3
api.html
3
api.html
|
|
@ -88,8 +88,7 @@
|
|||
duration, repeat or other options. The methods have different uses and performance scores while making it easy to work with.</p>
|
||||
|
||||
<h3>Single Tween Object</h3>
|
||||
<p>As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, except when used in combination with jQuery and the KUTE.js plugin for jQuery, where, as jQuery always does, it always works
|
||||
with collections of elements.</p>
|
||||
<p>As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements.</p>
|
||||
<p><kbd>.to()</kbd> method is the most simple method which allows you to create tween objects for animating CSS properties from a specific default value OR from current/computed value TO a desired value. It's performance is not the same as for
|
||||
the <strong>.fromTo()</strong> method as it has to compute the default/current value on tween <code>.start()</code> and thus delays the animation for a couple of miliseconds; still this feature is great for simple animations AND it has
|
||||
the ability to stack transform properties as they go, making smooth transform animations on chained tweens. See the <a href="#start">.start()</a> method for the solution for sync/delay issue.</p>
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@
|
|||
<a href="http://cubic-bezier.com/"
|
||||
target="_blank">right here</a>.</p>
|
||||
<p><span class="text-blue text-strong">NOTE:</span> Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the <a href="https://github.com/thednp/kute.js/tree/experiments">Experiments repository on Github</a>.</p>
|
||||
<p>There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:</p>
|
||||
<p>There is also a pack of presets, and the keywords look very familiar to you:</p>
|
||||
<ul>
|
||||
<li>Equivalents of the browser's <strong>generic</strong> timing functions: <kbd>easeIn</kbd>, <kbd>easeOut</kbd> and <kbd>easeInOut</kbd></li>
|
||||
<li><strong>Sinusoidal</strong> timing functions: <kbd>easeInSine</kbd>, <kbd>easeOutSine</kbd> and <kbd>easeInOutSine</kbd></li>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
<div class="content-wrap">
|
||||
<h2>Core Engine</h2>
|
||||
<p>KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript or with jQuery, but before we head over to the more advanced examples, let's have a quick look at these two
|
||||
<p>KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript without libraries like jQuery, but before we head over to the more advanced examples, let's have a quick look at these two
|
||||
basic examples here. <strong>Note</strong>: the examples are posted on <a href="http://codepen.io/thednp/pens/public/" target="_blank">codepen</a>.</p>
|
||||
|
||||
<h3>Basic Native Javascript Example</h3>
|
||||
|
|
@ -107,21 +107,6 @@ tween.paused // checks if the tween is currenlty active so we can prevent pausin
|
|||
|
||||
<p>The demo for the above example is <a href="http://codepen.io/thednp/pen/Bozbgg" target="_blank">here</a>.</p>
|
||||
|
||||
<h3>Basic jQuery Example</h3>
|
||||
<p>KUTE.js includes a jQuery Plugin to help you easily implement KUTE.js in your jQuery applications. When using jQuery, the syntax is familiar but works a bit different than plain Javascript due to jQuery's specific code standards. Let's have
|
||||
a look:</p>
|
||||
<pre><code class="language-javascript">// this is the tween object, basically $('selector').method(fromValues, toValue, options)
|
||||
var tween = $('selector').fromTo({top: 20}, {top: 100}, {delay: 500});
|
||||
</code></pre>
|
||||
<p>We mentioned that the jQuery Plugin is different, and here's why: the above function call uses the <code>allFromTo</code> method to create an <code>Array</code> of objects for each <code>HTML</code> element of chosen selector, but if the selector
|
||||
only returns one element the call returns a single tween object built with <code>fromTo</code> method. For the array of objects we can now apply the exact same tween control methods, except these:</p>
|
||||
<pre><code class="language-javascript">tween.length // check if the tween is an array of objects
|
||||
tween.length && tween.tweens[0].playing && tween.tweens[tween.length-1].playing // now we know that one of the tweens is playing
|
||||
tween.length && tween.tweens[0].paused && tween.tweens[tween.length-1].paused // now we know that one of the tweens is paused
|
||||
</code></pre>
|
||||
|
||||
<p>The demo for the above example is <a href="http://codepen.io/thednp/pen/rryWZQ" target="_blank">here</a>.</p>
|
||||
|
||||
<h3>Transform Properties Examples</h3>
|
||||
<p>KUTE.js supports almost all about <code>transform</code> as described in the <a href="http://www.w3.org/TR/css3-transforms/" target="_blank">spec</a>: the 2D <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code>, as well as the 3D <code>translateX</code>, <code>translateY</code>, <code>translateZ</code>, <code>translate3d</code>, <code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> properties. Additionally it
|
||||
allows you to set a <code>perspective</code> for the element or it's parent as well as a <code>perpective-origin</code> for the element or it's parent.</p>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
start or resume will delay the animation, while the functions running on each frame can potentially influence performance on large amounts of elements so you must use them wisely.</p>
|
||||
|
||||
<h4>Addons</h4>
|
||||
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, <a href="svg.html">SVG Plugin</a>, <a href="text.html">Text Plugin</a>, <a href="attr.html">Attributes Plugin</a>, <a href="css.html">CSS Plugin</a>, cubic
|
||||
<p>KUTE.js sports some fine tuned addons: <a href="svg.html">SVG Plugin</a>, <a href="text.html">Text Plugin</a>, <a href="attr.html">Attributes Plugin</a>, <a href="css.html">CSS Plugin</a>, cubic
|
||||
bezier easing functions and also physics based easing functions. It also features an extensive guide on <a href="extend.html">how to extend</a>, but I'm open for more features in the future.</p>
|
||||
|
||||
<p>Check the <a href="api.html">documentation</a> on these methods and the <a href="examples.html">examples page</a> for more.</p>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,6 @@ require("kute.js/kute-text"); // Add Text Plugin
|
|||
<pre><code class="language-javascript">// AMD style
|
||||
define([
|
||||
"kute.js",
|
||||
"kute.js/kute-jquery.js", // optional for jQuery apps
|
||||
"kute.js/kute-svg.js", // optional for SVG morph, draw and other SVG related CSS
|
||||
"kute.js/kute-css.js", // optional for additional CSS properties
|
||||
"kute.js/kute-attr.js", // optional for animating presentation attributes
|
||||
|
|
@ -124,15 +123,13 @@ define([
|
|||
|
||||
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>.
|
||||
You might also want to include the tools that you need for your project:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
</code></pre>
|
||||
<p>Alternate CDN links:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue