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

Changes:

Browse source 
* demo updates
* README.md updates
* code cleanup
This commit is contained in:
thednp 2020-06-11 05:03:44 +00:00
parent 645089f77a
commit 7a39544cf0
21 changed files with 323 additions and 343 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
README.md
View file

@ -8,18 +8,24 @@ A modern JavaScript animation engine built on ES6/ES7 standards with most essent
KUTE.js packs a series of components for presentation attributes, SVG transform, draw SVG strokes and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties.
# Demo / Developer Guide
# Demo
For components documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/).
# Wiki
For usage, installation and stuff like npm, visit the [wiki](https://github.com/thednp/kute.js/wiki).
For a complete developer guide, usage and stuff like npm, visit the [wiki](https://github.com/thednp/kute.js/wiki).
# Browser Support
KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by [minifill](https://github.com/thednp/minifill), try it. For broader projects you might want to consider <a href="https://cdn.polyfill.io/v2/docs/">polyfills</a>.
# Special Thanks
* [Mike Bostock](https://bost.ocks.org/mike/) for his awesome [D3.js](https://github.com/d3/d3), one of the sources for our reworked [SVGMorph](http://thednp.github.io/kute.js/svgMorph.html) component.
* [Noah Veltman](https://github.com/veltman) for his awesome [flubber](https://github.com/veltman/flubber), another one of the sources for the svgMorph component.
* [Andrew Willems](https://stackoverflow.com/users/5218951/andrew-willems) for his awesome [Stackoverflow answer](https://stackoverflow.com/questions/35560989/javascript-how-to-determine-a-svg-path-draw-direction) resulting in the creation of our [SVGCubicMorph](http://thednp.github.io/kute.js/svgCubicMorph.html) component.
* [Dmitry Baranovskiy](https://dmitry.baranovskiy.com/) for his awesome [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/), another source for out SVGCubicMorph.
* [@dalisoft](https://github.com/dalisoft) contributed a great deal to the performance and functionality of previous versions of KUTE.js.
# Contributions
* Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functionality of KUTE.js
* Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project
* [Contributors / Collaborators](https://github.com/thednp/kute.js/graphs/contributors)
# License
[MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE)

2
demo/clipProperty.html
View file

@ -124,7 +124,7 @@
<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>kute-extra.js</i> distribution file.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>

1
demo/filterEffects.html
View file

@ -162,7 +162,6 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
<li>Similar to the <a href="htmlAttributes.html">HTML Attributes</a> component, this one can also deal with specific function namespace, for instance <code>hue-rotate</code> and
<code>hueRotate</code>.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>

97
demo/shadowProperties.html
View file

@ -116,67 +116,66 @@ var myBSTween1 = KUTE.to('selector', {boxShadow: '10px 10px #069'}).start();
// or a fromTo with string and array, hex and rgb
var myBSTween2 = KUTE.fromTo(
'selector', // target
{boxShadow: [0, 0, 0, '#069']}, // from
{boxShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
'selector', // target
{boxShadow: [0, 0, 0, '#069']}, // from
{boxShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
// maybe you want to animate an inset boxShadow?
var myBSTween3 = KUTE.fromTo(
'selector', // target
{boxShadow: [5, 5, 0, '#069', 'inset']}, // from
{boxShadow: '0px 0px rgb(0,0,0)'}) // to
.start();
'selector', // target
{boxShadow: [5, 5, 0, '#069', 'inset']}, // from
{boxShadow: '0px 0px rgb(0,0,0)'}) // to
.start();
</code></pre>
<div id="boxShadow" class="featurettes">
<div class="example-item example-box bg-lime"></div>
<div class="example-buttons">
<a class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<div id="boxShadow" class="featurettes">
<div class="example-item example-box bg-lime"></div>
<div class="example-buttons">
<a class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Text Shadow</h3>
<h3>Text Shadow</h3>
<pre><code class="language-javascript">// tween to a string value
var myTSTween1 = KUTE.to('selector', {textShadow: '10px 10px #069'}).start();
// or a fromTo with string and array, hex and rgb
var myTSTween2 = KUTE.fromTo(
'selector', // target
{textShadow: [0, 0, 0, '#069']}, // from
{textShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
'selector', // target
{textShadow: [0, 0, 0, '#069']}, // from
{textShadow: '5px 5px rgb(0,0,0)'}) // to
.start();
</code></pre>
<div id="textShadow" class="featurettes">
<div class="text-example">Sample Text</div>
<div class="example-buttons">
<a class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
<div id="textShadow" class="featurettes">
<div class="text-example">Sample Text</div>
<div class="example-buttons">
<a class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Notes</h3>
<ul>
<li>The component will NOT handle multiple shadows per target at the same time.</li>
<li>The component features a solid value processing script, it can handle a great deal of combinations of input values.</li>
<li>I highly recommend that you check the <a href="./assets/js/boxShadow.js">boxShadow.js</a> for more insight.</li>
<li>This component is bundled with the <i>kute-extra.js</i> distribution 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 - 2020 &middot; <a href="https://github.com/thednp">thednp</a>.</p>
</div>
</footer>
<h3>Notes</h3>
<ul>
<li>The component will NOT handle multiple shadows per target at the same time.</li>
<li>The component features a solid value processing script, it can handle a great deal of combinations of input values.</li>
<li>I highly recommend that you check the <a href="./assets/js/boxShadow.js">boxShadow.js</a> for more insight.</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 - 2020 &middot; <a href="https://github.com/thednp">thednp</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
@ -184,12 +183,12 @@ var myTSTween2 = KUTE.fromTo(
================================================== -->
<!-- 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="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/shadowProperties.js"></script>
<script src="./assets/js/scripts.js"></script>
<script src="./assets/js/shadowProperties.js"></script>
<script src="./assets/js/scripts.js"></script>
</body>
</html>

21
demo/src/kute-extra.js
View file

@ -1505,15 +1505,6 @@
}
return { s: start, e: end, l: length };
};
function paintDraw(elem,a,b,v){
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
}
function getDrawValue(){
return getDraw(this.element);
}
@ -1522,7 +1513,15 @@
}
function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem,a,b,v) { return paintDraw(elem,a,b,v); };
KUTE[tweenProp] = function (elem,a,b,v) {
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
};
}
}
var svgDrawFunctions = {
@ -1534,7 +1533,7 @@
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
Interpolate: {numbers: numbers,paintDraw: paintDraw},
Interpolate: {numbers: numbers},
functions: svgDrawFunctions,
Util: {
getRectLength: getRectLength,

2
demo/src/kute-extra.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

394
demo/svgCubicMorph.html
View file

@ -2,27 +2,26 @@
<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 SVG Cubic Morph component for KUTE.js enables animation for the d presentation attribute of path and glyph shapes.">
<meta name="keywords" content="svg morph,svg cubic morph,cross-browser svg morph,svg animation,kute,kute.js,tweening engine,animation engine,animation,javascript animation,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">
<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 SVG Cubic Morph component for KUTE.js enables animation for the d presentation attribute of path and glyph shapes.">
<meta name="keywords" content="svg morph,svg cubic morph,cross-browser svg morph,svg animation,kute,kute.js,tweening engine,animation engine,animation,javascript animation,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 SVG Cubic Morph</title>
<title>KUTE.js SVG Cubic Morph</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- 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">
<!-- 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>
@ -78,7 +77,7 @@
<div class="content-wrap">
<h2 class="head-title">SVG Cubic Morph</h2>
<p class="condensed lead">The component that also covers <i>SVG morphing</i>, with similar functionality as for the <a href="svgMorph.html">SVG Morph</a> component, but with a different
implementation for value processing and animation setup.</p>
implementation for value processing and animation setup.</p>
</div>
<div class="featurettes dark">
@ -90,22 +89,22 @@
</div>
<div class="col9 border">
<p class="lead condensed">The KUTE.js <b>SVG Cubic Morph</b> component enables animation for the <b>d</b> (description) presentation attribute and is the latest in all the SVG
components.</p>
components.</p>
<p>The main difference with the other <a href="svgMorph.html">SVG Morph</a> component is the fact that this time we're using some path processing scripts borrowed from
<a href="http://www.raphaeljs.com/">Raphael.js</a> and other libraries to convert all path commands into <i>cubic-bezier</i> path commands.</p>
<a href="http://www.raphaeljs.com/">Raphael.js</a> and other libraries to convert all path commands into <i>cubic-bezier</i> path commands.</p>
<p>This component will process paths and out of the box will provide the closest possible interpolation by default. It comes with two tween options to help you manage the morphing
animation in certain conditions:</p>
animation in certain conditions:</p>
</div>
</div>
<div class="columns">
<div class="col3">
<h3 class="border text-right">Options</h3>
<p class="condensed text-right">A series of familiar options to optimize the animation for every situation.</p>
<h3 class="border text-right">Options</h3>
<p class="condensed text-right">A series of familiar options to optimize the animation for every situation.</p>
</div>
<div class="col9 border">
<p class="condensed lead">To enhance processing and improve the morphing animation, in certain cases you will need to control the outcome via two options
to reverse paths.</p>
to reverse paths.</p>
<ul>
<li><kbd>reverseFirstPath: <b class='text-olive'>FALSE</b></kbd> when is <b>TRUE</b> you will reverse the FIRST shape. By default this option is <b>false</b>.</li>
<li><kbd>reverseSecondPath: <b class='text-olive'>FALSE</b></kbd> when is <b>TRUE</b> you will reverse the SECOND shape. By default this option is also <b>false</b>.</li>
@ -122,8 +121,8 @@
<p>The first morphing animation example is a transition from a rectangle into a star, just like for the other component.</p>
<pre><code class="language-markup">&lt;svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;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"/>
&lt;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"/>
&lt;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"/>
&lt;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"/>
&lt;/svg>
</code></pre>
@ -142,29 +141,29 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<p>By default, the component will process the paths as authored and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:</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-red" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4z"/>
<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.011z"/>
</svg>
<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="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="star1" style="visibility:hidden" 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"/>
</svg>
<div class="example-buttons">
<a id="morphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<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-red" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4z"/>
<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.011z"/>
</svg>
<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="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="star1" style="visibility:hidden" 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"/>
</svg>
<div class="example-buttons">
<a id="morphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The second blue shape and its corresponding end shape have been edited by adding additional curve points using a vector graphics editor to match the amount of points in both shapes as well as to optimize their travel
distance during the animation. You can use the same technique on your shapes to control the animation to your style.</p>
<p>Chris Coyier wrote an <a href="https://css-tricks.com/svg-shape-morphing-works/">excelent article</a> to explain how SVG morphing animation works, it should give you a pretty good idea on the concept, terminology.</p>
<p>The second blue shape and its corresponding end shape have been edited by adding additional curve points using a vector graphics editor to match the amount of points in both shapes as well as to optimize their travel
distance during the animation. You can use the same technique on your shapes to control the animation to your style.</p>
<p>Chris Coyier wrote an <a href="https://css-tricks.com/svg-shape-morphing-works/">excelent article</a> to explain how SVG morphing animation works, it should give you a pretty good idea on the concept, terminology.</p>
<h3>Subpath Example</h3>
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following SVG:</p>
<h3>Subpath Example</h3>
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following SVG:</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
&lt;path id="w1" d="M412.23 511.914c-47.708-24.518-94.086-36.958-137.88-36.958-5.956 0-11.952 0.18-17.948 0.708-55.88 4.624-106.922 19.368-139.75 30.828-8.708 3.198-17.634 6.576-26.83 10.306l-89.822 311.394c61.702-22.832 116.292-33.938 166.27-33.938 80.846 0 139.528 30.208 187.992 61.304 22.962-77.918 78.044-266.09 94.482-322.324-11.95-7.284-24.076-14.57-36.514-21.32z
@ -177,165 +176,166 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
m0-761.2l488.4-67.4v427.6h-488.4v-360.2z"/>
&lt;/svg>
</code></pre>
<p>Similar to the <a href="svgMorph.html">svgMorph</a> component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <b>&lt;path&gt;</b> shapes, analyze and associate them
in a way that corresponding shapes are close and their points travel the least possible distance.</p>
<p>Now since we've worked with these paths before, the first example below showcases how the <b>svgCubicMorph</b> component handles it by default, using the <code>reverseSecondPath:true</code> option for all tweens because
each shape have a slightly different position from its corresponding shape. The following example was made possible by editing the shapes with a vector graphics editor. The last example showcases a creative use of
association between starting and end shapes. Let's have a look:</p>
<p>Similar to the <a href="svgMorph.html">svgMorph</a> component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <b>&lt;path&gt;</b> shapes, analyze and associate them
in a way that corresponding shapes are close and their points travel the least possible distance.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
<path id="w11" fill="#e91b1f" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" fill="#FF5722" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
<path id="w13" fill="#4CAF50" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
<path id="w14" fill="#2196F3" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
<path id="w21" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
<path id="w22" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
<path id="w23" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
<path id="w24" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
</svg>
<svg class="example-box-model example-box" id="multi-morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
<path id="w111" fill="#e91b1f" d="M128.2,237.8c-44.1,0-78.7,18.7-83.3,20.6L0,414.1c30.9-11.4,58.1-17,83.1-17
c40.4,0,69.8,15.1,94,30.7c11.5-39,39-133,47.2-161.2C205.7,254.8,176.7,237.8,128.2,237.8z"/>
<path id="w121" fill="#FF5722" d="M264.2,295.5L219,452.6c13.4,7.7,58.5,32,93.1,32c27.9,0,59.1-7.1,95.4-21.9l43.2-151
c-29.3,9.5-57.4,14.3-83.7,14.3C318.9,326,285.4,310.5,264.2,295.5z"/>
<path id="w131" fill="#4CAF50" d="M146.4,184.4c38.6,0.4,67.1,15.1,90.7,30.3L283.5,56c-9.8-5.6-41.4-27.7-92.5-28.6
c-25.9,0.5-54.2,7-86.4,19.9L60.3,202.6C92.7,190.3,120.6,184.4,146.4,184.4C146.4,184.4,146.4,184.4,146.4,184.4L146.4,184.4z"/>
<path id="w141" fill="#2196F3" d="M512,99.1c-29.4,11.4-58.1,17.2-85.5,17.2c-45.8,0-79.6-15.9-101.5-31.2l-46,159.1
c30.9,19.9,64.1,29.9,99.1,29.9c43.1,0,89.5-21.9,89.5-21.9L512,99.1z"/>
<path id="w211" style="visibility:hidden" d="M192,470.9L0.2,444.6l0-98.7l0-58.9h107.8H192L192,470.9z"/>
<path id="w221" style="visibility:hidden" d="M480,288l-0.1,224l-138.7-19.5L224,476V288h128H480z"/>
<path id="w231" style="visibility:hidden" d="M0.2,256L0,100l99.5-13.5L192,73.9V256H87H0.2z"/>
<path id="w241" style="visibility:hidden" d="M224,69.2l147.7-21.5L479.9,32v224H352H224V69.2z"/>
</svg>
<svg class="example-box-model example-box" id="multi-morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
<path id="s11" fill="#e91b1f" d="M128.2,237.8c-44.1,0-78.7,18.7-83.3,20.6L0,414.1c30.9-11.4,58.1-17,83.1-17
c40.4,0,69.8,15.1,94,30.7c11.5-39,39-133,47.2-161.2C205.7,254.8,176.7,237.8,128.2,237.8z"/>
<path id="s12" fill="#FF5722" d="M264.2,295.5L219,452.6c13.4,7.7,58.5,32,93.1,32c27.9,0,59.1-7.1,95.4-21.9l43.2-151
c-29.3,9.5-57.4,14.4-83.7,14.3C310.6,325.9,276,303.9,264.2,295.5z"/>
<path id="s13" fill="#4CAF50" d="M146.4,184.4c38.6,0.4,67.1,15.1,90.7,30.3L283.5,56c-6.6-3.7-45.7-28.6-92.5-28.6
c-25.9,0.5-54.2,7-86.4,19.9L60.3,202.6C92.7,190.3,120.6,184.4,146.4,184.4z"/>
<path id="s14" fill="#2196F3" d="M512,99.1c-29.4,11.4-58.1,17.2-85.5,17.2c-45.8,0-79.6-15.9-101.5-31.2l-46,159.1
c30.9,19.9,64.1,29.9,99.1,29.9c43.1,0,89.5-21.9,89.5-21.9L512,99.1z"/>
<path id="s21" style="visibility:hidden" d="M192,471.9L0.2,445.6V288h87.3h52.3H192V471.9z"/>
<path id="s22" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
<path id="s23" style="visibility:hidden" d="M0.2,256L0,100l88.7-12.1l103.3-14V256H0.2z"/>
<path id="s24" style="visibility:hidden" d="M224,69.2L479.9,32v224H354.7h-69.4H224V69.2z"/>
</svg>
<p>Now since we've worked with these paths before, the first example below showcases how the <b>svgCubicMorph</b> component handles it by default, using the <code>reverseSecondPath:true</code> option for all tweens because
each shape have a slightly different position from its corresponding shape. The following example was made possible by editing the shapes with a vector graphics editor. The last example showcases a creative use of
association between starting and end shapes. Let's have a look:</p>
<div class="example-buttons">
<a id="multiMorphBtn" class="btn btn-indigo" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Make sure to check the markup here as well as the <a href="assets/js/svgCubicMorph.js" target="_blank">svgCubicMorph.js</a> for a full code review.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
<path id="w11" fill="#e91b1f" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" fill="#FF5722" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
<path id="w13" fill="#4CAF50" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
<path id="w14" fill="#2196F3" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
<path id="w21" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
<path id="w22" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
<path id="w23" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
<path id="w24" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
</svg>
<svg class="example-box-model example-box" id="multi-morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
<path id="w111" fill="#e91b1f" d="M128.2,237.8c-44.1,0-78.7,18.7-83.3,20.6L0,414.1c30.9-11.4,58.1-17,83.1-17
c40.4,0,69.8,15.1,94,30.7c11.5-39,39-133,47.2-161.2C205.7,254.8,176.7,237.8,128.2,237.8z"/>
<path id="w121" fill="#FF5722" d="M264.2,295.5L219,452.6c13.4,7.7,58.5,32,93.1,32c27.9,0,59.1-7.1,95.4-21.9l43.2-151
c-29.3,9.5-57.4,14.3-83.7,14.3C318.9,326,285.4,310.5,264.2,295.5z"/>
<path id="w131" fill="#4CAF50" d="M146.4,184.4c38.6,0.4,67.1,15.1,90.7,30.3L283.5,56c-9.8-5.6-41.4-27.7-92.5-28.6
c-25.9,0.5-54.2,7-86.4,19.9L60.3,202.6C92.7,190.3,120.6,184.4,146.4,184.4C146.4,184.4,146.4,184.4,146.4,184.4L146.4,184.4z"/>
<path id="w141" fill="#2196F3" d="M512,99.1c-29.4,11.4-58.1,17.2-85.5,17.2c-45.8,0-79.6-15.9-101.5-31.2l-46,159.1
c30.9,19.9,64.1,29.9,99.1,29.9c43.1,0,89.5-21.9,89.5-21.9L512,99.1z"/>
<path id="w211" style="visibility:hidden" d="M192,470.9L0.2,444.6l0-98.7l0-58.9h107.8H192L192,470.9z"/>
<path id="w221" style="visibility:hidden" d="M480,288l-0.1,224l-138.7-19.5L224,476V288h128H480z"/>
<path id="w231" style="visibility:hidden" d="M0.2,256L0,100l99.5-13.5L192,73.9V256H87H0.2z"/>
<path id="w241" style="visibility:hidden" d="M224,69.2l147.7-21.5L479.9,32v224H352H224V69.2z"/>
</svg>
<svg class="example-box-model example-box" id="multi-morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
<path id="s11" fill="#e91b1f" d="M128.2,237.8c-44.1,0-78.7,18.7-83.3,20.6L0,414.1c30.9-11.4,58.1-17,83.1-17
c40.4,0,69.8,15.1,94,30.7c11.5-39,39-133,47.2-161.2C205.7,254.8,176.7,237.8,128.2,237.8z"/>
<path id="s12" fill="#FF5722" d="M264.2,295.5L219,452.6c13.4,7.7,58.5,32,93.1,32c27.9,0,59.1-7.1,95.4-21.9l43.2-151
c-29.3,9.5-57.4,14.4-83.7,14.3C310.6,325.9,276,303.9,264.2,295.5z"/>
<path id="s13" fill="#4CAF50" d="M146.4,184.4c38.6,0.4,67.1,15.1,90.7,30.3L283.5,56c-6.6-3.7-45.7-28.6-92.5-28.6
c-25.9,0.5-54.2,7-86.4,19.9L60.3,202.6C92.7,190.3,120.6,184.4,146.4,184.4z"/>
<path id="s14" fill="#2196F3" d="M512,99.1c-29.4,11.4-58.1,17.2-85.5,17.2c-45.8,0-79.6-15.9-101.5-31.2l-46,159.1
c30.9,19.9,64.1,29.9,99.1,29.9c43.1,0,89.5-21.9,89.5-21.9L512,99.1z"/>
<path id="s21" style="visibility:hidden" d="M192,471.9L0.2,445.6V288h87.3h52.3H192V471.9z"/>
<path id="s22" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
<path id="s23" style="visibility:hidden" d="M0.2,256L0,100l88.7-12.1l103.3-14V256H0.2z"/>
<path id="s24" style="visibility:hidden" d="M224,69.2L479.9,32v224H354.7h-69.4H224V69.2z"/>
</svg>
<h3>Intersecting Paths Example</h3>
<p>The same preparation apply here, however the outcome is a bit different with cubic-bezier path commands, as shown in the first example. For the next two examples, the shapes have been edited for a better outcome.
Let's have a look:</p>
<div class="example-buttons">
<a id="multiMorphBtn" class="btn btn-indigo" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Make sure to check the markup here as well as the <a href="assets/js/svgCubicMorph.js" target="_blank">svgCubicMorph.js</a> for a full code review.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="complex-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-left-clone" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-right" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right" style="visibility: hidden;" d="M352 128c17.673 0 32 21.49 32 48s-14.327 48-32 48-32-21.49-32-48 14.327-48 32-48z"></path>
<path id="eye-left" style="visibility: hidden;" d="M176 156.031c29.823 0 51 11.166 51 28.641 0 3.699 1.906 21.497-0.085 24.797-7.414-12.288-27.405-21.094-50.915-21.094s-43.501 8.806-50.915 21.094c-1.991-3.3-0.085-21.098-0.085-24.797 0-17.475 21.177-28.641 51-28.641z"></path>
<path id="mouth" style="visibility: hidden;" d="M250.172 416c-59.621 0-111.929-32.14-141.446-80.476 35.205 27.53 97.267 32.905 162.644 19.989 70.124-13.853 124.555-45.771 144.227-88.297-10.827 83.98-80.759 148.784-165.425 148.784z"></path>
</mask>
</defs>
<path id="rectangle-container" fill="#2196F3" mask="url(#symbol)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path id="circle-container" style="visibility: hidden;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol1">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-left-clone1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-right1" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right1" style="visibility: hidden;" d="M352,128c2.6,0,5,0.5,7.4,1.3c2.3,0.8,4.5,2,6.6,3.6c10.6,7.8,18,24.2,18,43.1c0,16.2-5.3,30.5-13.5,39.2
c-3.1,3.3-6.6,5.8-10.5,7.3c-2.6,1-5.3,1.5-8,1.5c-4,0-7.8-1.1-11.3-3.1c-2.7-1.6-5.3-3.7-7.6-6.2c-7.9-8.7-13-22.8-13-38.7
c0-19.2,7.5-35.7,18.4-43.4c1.9-1.4,4-2.5,6.1-3.2C346.9,128.5,349.4,128,352,128z"></path>
<path id="eye-left1" style="visibility: hidden;" d="M176,156c10.4,0,19.7,1.4,27.5,3.9c14.5,4.7,23.5,13.4,23.5,24.8c0,3.7,1.9,21.5-0.1,24.8
c-3.3-5.5-9.2-10.3-16.7-13.9c-5.6-2.7-12.2-4.8-19.4-6c-4.7-0.8-9.6-1.2-14.7-1.2c-8.9,0-17.3,1.3-24.7,3.5
c-12.2,3.7-21.6,10-26.3,17.6c-2-3.3-0.1-21.1-0.1-24.8c0-11.3,8.8-19.9,23-24.6c3.7-1.2,7.8-2.2,12.2-2.9
C165.1,156.4,170.4,156,176,156z"></path>
<path id="mouth1" style="visibility: hidden;" d="M250.2,416c-42.9,0-82-16.6-111.5-43.9c-7-6.5-13.5-13.6-19.4-21.2c-3.8-4.9-7.3-10-10.6-15.4
c5.6,4.4,11.9,8.2,18.7,11.5c7.1,3.4,14.8,6.2,23,8.4c33.9,9.2,76.7,8.9,120.9,0.1c47.2-9.3,87.3-26.8,114.5-50.3
c6-5.1,11.3-10.6,16-16.3c5.6-6.9,10.3-14.2,13.8-21.8c-1.2,9.2-3.1,18.2-5.7,26.9c-2.6,8.8-5.9,17.3-9.7,25.5
C373.1,376.7,316.1,416,250.2,416L250.2,416z"></path>
</mask>
</defs>
<path id="rectangle-container1" fill="#9C27B0" mask="url(#symbol1)" d="M426.7,0H85.3C38.4,0,0,38.4,0,85.3v341.3c0,47,38.4,85.3,85.3,85.3h341.3
c46.9,0,85.3-38.4,85.3-85.3V85.3C512,38.4,473.6,0,426.7,0z"></path>
<path id="circle-container1" style="visibility: hidden;" d="M0,256c0,100.9,59.8,165.3,72,177.9c11.2,11.6,77.7,78.1,184,78.1c14.5,0,115.8-1.7,190.7-85.3
C510.1,356,512,274.1,512,256c0-18.9-2.1-96.7-61-165.9C375.7,1.8,269.4,0,256,0C241,0,141.3,1.7,66.6,83.7C1.9,154.8,0,237.9,0,256 z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol2">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left2" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="sample-shape2" fill="#000" d="M250 450 L250 450"></path>
<path id="symbol-right2" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right2" style="visibility: hidden;" d="M352,128c2.6,0,5,0.5,7.4,1.3c2.3,0.8,4.5,2,6.6,3.6c10.6,7.8,18,24.2,18,43.1c0,16.2-5.3,30.5-13.5,39.2
c-3.1,3.3-6.6,5.8-10.5,7.3c-2.6,1-5.3,1.5-8,1.5c-4,0-7.8-1.1-11.3-3.1c-2.7-1.6-5.3-3.7-7.6-6.2c-7.9-8.7-13-22.8-13-38.7
c0-19.2,7.5-35.7,18.4-43.4c1.9-1.4,4-2.5,6.1-3.2C346.9,128.5,349.4,128,352,128z"></path>
<path id="eye-left2" style="visibility: hidden;" d="M176,156c10.4,0,19.7,1.4,27.5,3.9c14.5,4.7,23.5,13.4,23.5,24.8c0,3.7,1.9,21.5-0.1,24.8
c-3.3-5.5-9.2-10.3-16.7-13.9c-5.6-2.7-12.2-4.8-19.4-6c-4.7-0.8-9.6-1.2-14.7-1.2c-8.9,0-17.3,1.3-24.7,3.5
c-12.2,3.7-21.6,10-26.3,17.6c-2-3.3-0.1-21.1-0.1-24.8c0-11.3,8.8-19.9,23-24.6c3.7-1.2,7.8-2.2,12.2-2.9
C165.1,156.4,170.4,156,176,156z"></path>
<path id="mouth2" style="visibility: hidden;" d="M250.172 416c-59.621 0-111.929-32.14-141.446-80.476 35.205 27.53 97.267 32.905 162.644 19.989 70.124-13.853 124.555-45.771 144.227-88.297-10.827 83.98-80.759 148.784-165.425 148.784z"></path>
</mask>
</defs>
<path id="rectangle-container2" fill="#e91b1f" mask="url(#symbol2)" d="M426.7,0H85.3C38.4,0,0,38.4,0,85.3v341.3c0,47,38.4,85.3,85.3,85.3h341.3
c46.9,0,85.3-38.4,85.3-85.3V85.3C512,38.4,473.6,0,426.7,0z"></path>
<path id="circle-container2" style="visibility: hidden;" d="M0,256c0,100.9,59.8,165.3,72,177.9c11.2,11.6,77.7,78.1,184,78.1c14.5,0,115.8-1.7,190.7-85.3
C510.1,356,512,274.1,512,256c0-18.9-2.1-96.7-61-165.9C375.7,1.8,269.4,0,256,0C241,0,141.3,1.7,66.6,83.7C1.9,154.8,0,237.9,0,256 z"></path>
</svg>
<div class="example-buttons">
<a id="compliMorphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Intersecting Paths Example</h3>
<p>The same preparation apply here, however the outcome is a bit different with cubic-bezier path commands, as shown in the first example. For the next two examples, the shapes have been edited for a better outcome.
Let's have a look:</p>
<p>So the technique involves creating <code>&lt;mask></code> elements, splitting multipath shapes into multiple <code>&lt;path></code> shapes, matching the amount of starting and ending shapes by duplicating
an existing shape or by sampling another shape for the same purpose, editing shapes for more accurate point-to-point animation, as well as various options to optimize the visual presentation.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="complex-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-left-clone" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-right" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right" style="visibility: hidden;" d="M352 128c17.673 0 32 21.49 32 48s-14.327 48-32 48-32-21.49-32-48 14.327-48 32-48z"></path>
<path id="eye-left" style="visibility: hidden;" d="M176 156.031c29.823 0 51 11.166 51 28.641 0 3.699 1.906 21.497-0.085 24.797-7.414-12.288-27.405-21.094-50.915-21.094s-43.501 8.806-50.915 21.094c-1.991-3.3-0.085-21.098-0.085-24.797 0-17.475 21.177-28.641 51-28.641z"></path>
<path id="mouth" style="visibility: hidden;" d="M250.172 416c-59.621 0-111.929-32.14-141.446-80.476 35.205 27.53 97.267 32.905 162.644 19.989 70.124-13.853 124.555-45.771 144.227-88.297-10.827 83.98-80.759 148.784-165.425 148.784z"></path>
</mask>
</defs>
<path id="rectangle-container" fill="#2196F3" mask="url(#symbol)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path id="circle-container" style="visibility: hidden;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol1">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-left-clone1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-right1" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right1" style="visibility: hidden;" d="M352,128c2.6,0,5,0.5,7.4,1.3c2.3,0.8,4.5,2,6.6,3.6c10.6,7.8,18,24.2,18,43.1c0,16.2-5.3,30.5-13.5,39.2
c-3.1,3.3-6.6,5.8-10.5,7.3c-2.6,1-5.3,1.5-8,1.5c-4,0-7.8-1.1-11.3-3.1c-2.7-1.6-5.3-3.7-7.6-6.2c-7.9-8.7-13-22.8-13-38.7
c0-19.2,7.5-35.7,18.4-43.4c1.9-1.4,4-2.5,6.1-3.2C346.9,128.5,349.4,128,352,128z"></path>
<path id="eye-left1" style="visibility: hidden;" d="M176,156c10.4,0,19.7,1.4,27.5,3.9c14.5,4.7,23.5,13.4,23.5,24.8c0,3.7,1.9,21.5-0.1,24.8
c-3.3-5.5-9.2-10.3-16.7-13.9c-5.6-2.7-12.2-4.8-19.4-6c-4.7-0.8-9.6-1.2-14.7-1.2c-8.9,0-17.3,1.3-24.7,3.5
c-12.2,3.7-21.6,10-26.3,17.6c-2-3.3-0.1-21.1-0.1-24.8c0-11.3,8.8-19.9,23-24.6c3.7-1.2,7.8-2.2,12.2-2.9
C165.1,156.4,170.4,156,176,156z"></path>
<path id="mouth1" style="visibility: hidden;" d="M250.2,416c-42.9,0-82-16.6-111.5-43.9c-7-6.5-13.5-13.6-19.4-21.2c-3.8-4.9-7.3-10-10.6-15.4
c5.6,4.4,11.9,8.2,18.7,11.5c7.1,3.4,14.8,6.2,23,8.4c33.9,9.2,76.7,8.9,120.9,0.1c47.2-9.3,87.3-26.8,114.5-50.3
c6-5.1,11.3-10.6,16-16.3c5.6-6.9,10.3-14.2,13.8-21.8c-1.2,9.2-3.1,18.2-5.7,26.9c-2.6,8.8-5.9,17.3-9.7,25.5
C373.1,376.7,316.1,416,250.2,416L250.2,416z"></path>
</mask>
</defs>
<path id="rectangle-container1" fill="#9C27B0" mask="url(#symbol1)" d="M426.7,0H85.3C38.4,0,0,38.4,0,85.3v341.3c0,47,38.4,85.3,85.3,85.3h341.3
c46.9,0,85.3-38.4,85.3-85.3V85.3C512,38.4,473.6,0,426.7,0z"></path>
<path id="circle-container1" style="visibility: hidden;" d="M0,256c0,100.9,59.8,165.3,72,177.9c11.2,11.6,77.7,78.1,184,78.1c14.5,0,115.8-1.7,190.7-85.3
C510.1,356,512,274.1,512,256c0-18.9-2.1-96.7-61-165.9C375.7,1.8,269.4,0,256,0C241,0,141.3,1.7,66.6,83.7C1.9,154.8,0,237.9,0,256 z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol2">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left2" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="sample-shape2" fill="#000" d="M250 450 L250 450"></path>
<path id="symbol-right2" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right2" style="visibility: hidden;" d="M352,128c2.6,0,5,0.5,7.4,1.3c2.3,0.8,4.5,2,6.6,3.6c10.6,7.8,18,24.2,18,43.1c0,16.2-5.3,30.5-13.5,39.2
c-3.1,3.3-6.6,5.8-10.5,7.3c-2.6,1-5.3,1.5-8,1.5c-4,0-7.8-1.1-11.3-3.1c-2.7-1.6-5.3-3.7-7.6-6.2c-7.9-8.7-13-22.8-13-38.7
c0-19.2,7.5-35.7,18.4-43.4c1.9-1.4,4-2.5,6.1-3.2C346.9,128.5,349.4,128,352,128z"></path>
<path id="eye-left2" style="visibility: hidden;" d="M176,156c10.4,0,19.7,1.4,27.5,3.9c14.5,4.7,23.5,13.4,23.5,24.8c0,3.7,1.9,21.5-0.1,24.8
c-3.3-5.5-9.2-10.3-16.7-13.9c-5.6-2.7-12.2-4.8-19.4-6c-4.7-0.8-9.6-1.2-14.7-1.2c-8.9,0-17.3,1.3-24.7,3.5
c-12.2,3.7-21.6,10-26.3,17.6c-2-3.3-0.1-21.1-0.1-24.8c0-11.3,8.8-19.9,23-24.6c3.7-1.2,7.8-2.2,12.2-2.9
C165.1,156.4,170.4,156,176,156z"></path>
<path id="mouth2" style="visibility: hidden;" d="M250.172 416c-59.621 0-111.929-32.14-141.446-80.476 35.205 27.53 97.267 32.905 162.644 19.989 70.124-13.853 124.555-45.771 144.227-88.297-10.827 83.98-80.759 148.784-165.425 148.784z"></path>
</mask>
</defs>
<path id="rectangle-container2" fill="#e91b1f" mask="url(#symbol2)" d="M426.7,0H85.3C38.4,0,0,38.4,0,85.3v341.3c0,47,38.4,85.3,85.3,85.3h341.3
c46.9,0,85.3-38.4,85.3-85.3V85.3C512,38.4,473.6,0,426.7,0z"></path>
<path id="circle-container2" style="visibility: hidden;" d="M0,256c0,100.9,59.8,165.3,72,177.9c11.2,11.6,77.7,78.1,184,78.1c14.5,0,115.8-1.7,190.7-85.3
C510.1,356,512,274.1,512,256c0-18.9-2.1-96.7-61-165.9C375.7,1.8,269.4,0,256,0C241,0,141.3,1.7,66.6,83.7C1.9,154.8,0,237.9,0,256 z"></path>
</svg>
<div class="example-buttons">
<a id="compliMorphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>That's it, you now mastered the <b>SVG Cubic Morph</b> component.</p>
<p>So the technique involves creating <code>&lt;mask></code> elements, splitting multipath shapes into multiple <code>&lt;path></code> shapes, matching the amount of starting and ending shapes by duplicating
an existing shape or by sampling another shape for the same purpose, editing shapes for more accurate point-to-point animation, as well as various options to optimize the visual presentation.</p>
<h3>Notes</h3>
<ul>
<li>Since animation works only with <code>path</code> <b>SVGElement</b>s, you might need a <a href="https://github.com/Waest/SVGPathConverter" target="_blank">convertToPath</a> utility.</li>
<li>In some cases your start and end shapes don't have a very close size, you might need to use <a href="https://github.com/fontello/svgpath">SVGPath</a> tools to apply a scale transformation to your shapes'
path commands.</li>
<li>The <b>SVG Cubic Morph</b> component WILL animate paths with sub-paths, but the animation isn't very appealing unless you've prepared your paths for this specific case, in other cases hopefuly
this guide will help you break the ice.</li>
<li>Compared to <a href="svgMorph.html">svgMorph</a>, this component requires more work, but can be more memory efficient, as we're dealing with significantly less interpolation points which translates directly
into better performance and the shapes never show any sign of "polygon artifacts".</li>
<li>Some shapes can be broken even if the browser won't throw any error so make sure you double check with your SVG editor of choice.</li>
<li>In some cases the duplicated curve bezier points don't produce the best morphing animation, but you can edit the shapes and add your own additional path commands between the existing ones
so that the component will work with actual points that travel less and produce a much more "natural" morphing animation.</li>
<li>The edited shapes can be found in the <b>assets/img</b> folder of this demo, make sure to check them out.</li>
<li>Make sure to check the <a href="assets/js/svgCubicMorph.js" target="_blank">svgCubicMorph.js</a> for a full code review.</li>
<li>This component is affected by the the <code>fill-rule="evenodd"</code> specific SVG attribute, you must make sure you check your shapes in that regard as well.</li>
<li>This component is bundled with the <i>kute-extra.js</i> distribution file.</li>
</ul>
<p>That's it, you now mastered the <b>SVG Cubic Morph</b> component.</p>
<h3>Notes</h3>
<ul>
<li>Since animation works only with <code>path</code> <b>SVGElement</b>s, you might need a <a href="https://github.com/Waest/SVGPathConverter" target="_blank">convertToPath</a> utility.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like <a href="https://github.com/fontello/svgpath">SVGPath</a> tools to
apply a scale transformation to your shapes' path commands.</li>
<li>The <b>SVG Cubic Morph</b> component WILL animate paths with sub-paths, but the animation isn't very appealing unless you've prepared your paths for this specific case, in other cases hopefuly
this guide will help you break the ice.</li>
<li>Compared to <a href="svgMorph.html">svgMorph</a>, this component requires more work, but can be more memory efficient, as we're dealing with significantly less interpolation points which translates directly
into better performance and the shapes never show any sign of "polygon artifacts".</li>
<li>Some shapes can be broken even if the browser won't throw any error so make sure you double check with your SVG editor of choice.</li>
<li>In some cases the duplicated curve bezier points don't produce the best morphing animation, but you can edit the shapes and add your own additional path commands between the existing ones
so that the component will work with actual points that travel less and produce a much more "natural" morphing animation.</li>
<li>The edited shapes can be found in the <b>assets/img</b> folder of this demo, make sure to check them out.</li>
<li>Make sure to check the <a href="assets/js/svgCubicMorph.js" target="_blank">svgCubicMorph.js</a> for a full code review.</li>
<li>This component is affected by the the <code>fill-rule="evenodd"</code> specific SVG attribute, you must make sure you check your shapes in that regard as well.</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 - 2020 &middot; <a href="https://github.com/thednp">thednp</a>.</p>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2015 - 2020 &middot; <a href="https://github.com/thednp">thednp</a>.</p>
</div>
</footer>
</footer>
</div>
<!-- /.site-wrapper -->

2
demo/svgDraw.html
View file

@ -134,7 +134,7 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
as start value for your tweens when <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> properties are not set.</li>
<li>Sometimes the <code>stroke</code> on some shapes may not completely close, you might want to consider values outside the [0-100] percent range.</li>
<li>The <b>SVG Draw</b> component can be combined with any other SVG based component to create even more complex animations for SVG elements.</li>
<li>This component is bundled with the standard <i>kute.js</i> and <i>kute-extra.js</i> distribution files.</li>
<li>This component is bundled with the default distribution <i>kute.js</i> and the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>

8
demo/svgMorph.html
View file

@ -342,10 +342,10 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<ul>
<li>Since <b>SVG Morph</b> animation works only with <code>path</code> elements, you might need a <code>convertToPath</code> feature, so
<a href="https://github.com/Waest/SVGPathConverter" target="_blank">grab one here</a> and get to working.</li>
<li>In some cases your start and end shapes don't have a very close size, you might need to use <a href="https://github.com/fontello/svgpath">SVGPath</a> tools to apply a scale transformation to your shapes'
path commands.</li>
<li>The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multipaths instead of cloning shapes to have same number
of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like <a href="https://github.com/fontello/svgpath">SVGPath</a> tools to
apply a scale transformation to your shapes' path commands.</li>
<li>The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multi-paths instead of cloning shapes to have same number
of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays
you can get quite comfortable with almost any value, including the default value.</li>
<li>Because you have the tools at hand, you can also try to use a <code>morphPrecision</code> value for every resolution. Take some time to experiement, you might find a better <code>morphPrecision</code>

4
demo/svgTransform.html
View file

@ -356,9 +356,9 @@ KUTE.fromTo(element,
<li>While you can still use regular CSS3 transforms for SVG elements, everything is fine with Google Chrome, Opera and other webkit browsers, but older Firefox versions struggle with the percentage based
<code>transformOrigin</code> values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements, which means that the SVG Transform component will become a fallback
component to handle legacy browsers in the future. Guess who's taking over :)</li>
<li>This component is bundled with the standard <i>kute.js</i> and <i>kute-extra.js</i> distribution files.</li>
<li>This component is bundled with the standard <i>kute.js</i> distribution file and the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</ul>
</div>

20
demo/textProperties.html
View file

@ -119,17 +119,17 @@ let tween3 = KUTE.to('selector1',{wordSpacing:50})
</code></pre>
<div id="textProperties" class="featurettes" style="height: 152px">
<h1 class="example-item">Howdy!</h1>
<div class="example-buttons"><a class="btn btn-pink" href="javascript:void(0)">Start</a></div>
<h1 class="example-item">Howdy!</h1>
<div class="example-buttons"><a class="btn btn-pink" href="javascript:void(0)">Start</a></div>
</div>
<h3>Notes</h3>
<ul>
<li>Be sure to check the <a href="./assets/js/textProperties.js">textProperties.js</a> for a more in-depth review of the above example.</li>
<li>Similar to box model properties, the text properties are also layout modifiers, they will push the layout around forcing unwanted re-paint work. To avoid re-paint, you
can use a fixed height for the target element's container, as we used in our example here, or set your text to <code>position:absolute</code>.</li>
<li>The component is only included in the <i>kute-extra.js</i> distribution file.</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Be sure to check the <a href="./assets/js/textProperties.js">textProperties.js</a> for a more in-depth review of the above example.</li>
<li>Similar to box model properties, the text properties are also layout modifiers, they will push the layout around forcing unwanted re-paint work. To avoid re-paint, you
can use a fixed height for the target element's container, as we used in our example here, or set your text to <code>position:absolute</code>.</li>
<li>The component is only included in the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>

1
demo/textWrite.html
View file

@ -231,6 +231,7 @@ tweenObjects.start();
<ul>
<li>Keep in mind that the <code>yoyo</code> tween option will NOT un-write / delete the string character by character for the <b>text</b> property, but will write the previous text instead.</li>
<li>For a full code review, check out the <a href="./assets/js/textWrite.js">./assets/js/textWrite.js</a> example source code.</li>
<li>The component is only included in the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>

2
demo/transformFunctions.html
View file

@ -264,7 +264,7 @@ var tween2 = KUTE.fromTo(
<li>Shorthand functions like <code>translate3d</code> or <code>rotate3d</code> tween property generally not only improve performance, but will also minimize the code size. Eg. <code>translateX:150</code>,
<code>translateY:200</code>, <code>translateZ:50</code> => <code>translate3d:[150,200,50]</code> is quite the difference.</li>
<li>On larger amount of elements animating chains, the <code>.fromTo()</code> method is fastest, and you will have more work to do as well, but will eliminate any delay / syncronization issue that may occur.</li>
<li>This component is bundled with the <i>kute-base.js</i> and the standard <i>kute.js</i> distribution files.</li>
<li>This component is bundled with the <i>demo/src/kute-base.js</i> and the standard <i>kute.js</i> distribution files.</li>
</ul>
</div>

2
demo/transformMatrix.html
View file

@ -184,7 +184,7 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
<code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> function is a thing of the past, according to <a href="https://css-tricks.com/">Chris Coyier</a> nobody use it.</li>
<li>Since the component fully utilize the <b>DOMMatrix</b> API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers
like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.</li>
<li>This component is bundled with the <i>kute-extra.js</i> distribution file.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> distribution file.</li>
</ul>
</div>

21
dist/kute.esm.js vendored
View file

@ -1484,15 +1484,6 @@ var getDraw = function (e, v) {
}
return { s: start, e: end, l: length };
};
function paintDraw(elem,a,b,v){
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
}
function getDrawValue(){
return getDraw(this.element);
}
@ -1501,7 +1492,15 @@ function prepareDraw(a,o){
}
function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem,a,b,v) { return paintDraw(elem,a,b,v); };
KUTE[tweenProp] = function (elem,a,b,v) {
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
};
}
}
var svgDrawFunctions = {
@ -1513,7 +1512,7 @@ var svgDrawOps = {
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
Interpolate: {numbers: numbers,paintDraw: paintDraw},
Interpolate: {numbers: numbers},
functions: svgDrawFunctions,
Util: {
getRectLength: getRectLength,

2
dist/kute.esm.min.js vendored
View file

File diff suppressed because one or more lines are too long

21
dist/kute.js vendored
View file

@ -1490,15 +1490,6 @@
}
return { s: start, e: end, l: length };
};
function paintDraw(elem,a,b,v){
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
}
function getDrawValue(){
return getDraw(this.element);
}
@ -1507,7 +1498,15 @@
}
function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem,a,b,v) { return paintDraw(elem,a,b,v); };
KUTE[tweenProp] = function (elem,a,b,v) {
var pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = offset + "px";
elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
};
}
}
var svgDrawFunctions = {
@ -1519,7 +1518,7 @@
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
Interpolate: {numbers: numbers,paintDraw: paintDraw},
Interpolate: {numbers: numbers},
functions: svgDrawFunctions,
Util: {
getRectLength: getRectLength,

2
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "kute.js",
"version": "2.0.2",
"version": "2.0.3",
"description": "JavaScript animation engine of the future is called KUTE.js.",
"main": "dist/kute.min.js",
"module": "dist/kute.esm.js",

46
src/components/svgDraw.js
View file

@ -97,42 +97,11 @@ export const getDraw = (e, v) => {
return { s: start, e: end, l: length };
}
export const getBaseDraw = (e, v) => {
let length = e.getTotalLength(), start, end, d, o;
if ( v instanceof Object ) {
return v;
} else if (typeof v === 'string') {
v = v.split(/\,|\s/);
start = /%/.test(v[0]) ? percent(v[0].trim(),length) : parseFloat(v[0]);
end = /%/.test(v[1]) ? percent(v[1].trim(),length) : parseFloat(v[1]);
} else if (typeof v === 'undefined') {
o = parseFloat(getStyleForProperty(e,'stroke-dashoffset'));
d = getStyleForProperty(e,'stroke-dasharray').split(/\,/);
start = 0-o;
end = parseFloat(d[0]) + start || length;
}
return { s: start, e: end, l: length };
}
export function resetDraw(elem) {
elem.style.strokeDashoffset = ``;
elem.style.strokeDasharray = ``;
}
// Component Interpolation
export function paintDraw(elem,a,b,v){
let pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = `${offset}px`;
elem.style.strokeDasharray = `${((dashOne <1 ? 0 : dashOne)*100>>0)/100}px, ${pathLength}px`;
}
// Component Functions
export function getDrawValue(){
return getDraw(this.element);
@ -142,7 +111,16 @@ export function prepareDraw(a,o){
}
export function onStartDraw(tweenProp){
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = (elem,a,b,v) => paintDraw(elem,a,b,v)
KUTE[tweenProp] = (elem,a,b,v) => {
let pathLength = (a.l*100>>0)/100,
start = (numbers(a.s,b.s,v)*100>>0)/100,
end = (numbers(a.e,b.e,v)*100>>0)/100,
offset = 0 - start,
dashOne = end+offset;
elem.style.strokeDashoffset = `${offset}px`;
elem.style.strokeDasharray = `${((dashOne <1 ? 0 : dashOne)*100>>0)/100}px, ${pathLength}px`;
}
}
}
@ -157,7 +135,7 @@ const svgDrawFunctions = {
export const baseSVGDrawOps = {
component: 'svgDraw',
property: 'draw',
Interpolate: {numbers,paintDraw},
Interpolate: {numbers},
functions: {onStart:onStartDraw}
}
@ -166,7 +144,7 @@ export const svgDrawOps = {
component: 'svgDraw',
property: 'draw',
defaultValue: '0% 0%',
Interpolate: {numbers,paintDraw},
Interpolate: {numbers},
functions: svgDrawFunctions,
// Export to global for faster execution
Util: {