deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added a codepen example for SVG, plus more SEO improvements.

Browse source
This commit is contained in:
thednp 2016-03-27 16:20:24 +03:00
parent 92060dcaab
commit e33733f4f3
2 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
demo/index.html
View file

@ -9,8 +9,8 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,morph svg,draw svg,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine with outstanding performance and supporting 3D transforms, SVG Morph, draw SVG, scroll, CSS3 properties and many more.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,morph svg,draw svg,css3,3d transform,scroll,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
@ -140,7 +140,7 @@
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Packed With Tools</h3>
<p>KUTE.js comes with tools to help you configure awesome animations: CSS / SVG / ATTR Plugins, jQuery plugin, easing functions, color convertors, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
<p>KUTE.js comes with a <a href="css.html" title="The CSS Plugin provides support for border radius, additional color and box model properties, as well as for clip and backgroun-position.">CSS Plugin</a>, a <a href="svg.html" title="The SVG Plugin allows you to morph and draw SVG, as well as animate other SVG related CSS properties.">SVG Plugin</a>, an <a href="attr.html" title="The Attributes Plugin allows you to animate any numeric presentation attribute.">ATTR Plugin</a>, a <a href="text.html">Text Plugin</a> and a jQuery plugin, <a href="easing.html">easing functions</a>, color convertors, utility functions, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
</div>
<div class="col2">
<h3>Plenty Of Properties</h3>

14
demo/svg.html
View file

@ -116,12 +116,12 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<p>For all the above tween objects the animation should look like this:</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<div class="example-buttons">
<a id="morphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
@ -141,7 +141,7 @@ If the current animation is not satisfactory, consider reversing one of the path
*/
</code></pre>
<p>Next, we're going to set the <code>morphIndex: 79</code> option and we will get an improved morph.</p>
<p>Next, we're going to set the <code>morphIndex: 79</code> option and we will get an improved morph. I also made a <a href="http://codepen.io/thednp/pen/bpRRZd" target="_blank">pen</a> for you to play with.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle1" class="bg-blue" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531