Changes in relation to #97
This commit is contained in:
thednp
parent
00fbc38624
commit
db2595d8d0
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
|||
node_modules/
|
||||
bower_components/
|
||||
.npmignore
|
||||
package-lock.json
|
||||
3
.npmignore
Normal file
3
.npmignore
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
node_modules/
|
||||
demo/
|
||||
.gitignore
|
||||
191
README.md
191
README.md
|
|
@ -1,202 +1,25 @@
|
|||
# KUTE.js
|
||||
A fully fledged native JavaScript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size (core engine is 17k min and 5.5k gzipped).
|
||||
A modern JavaScript animation engine built on ES6/ES7 standards with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size.
|
||||
|
||||
[](https://www.npmjs.com/package/kute.js)
|
||||
[](http://npm-stat.com/charts.html?package=kute.js)
|
||||
[](https://www.jsdelivr.com/package/npm/kute.js)
|
||||
[](https://cdnjs.com/libraries/kute.js)
|
||||
|
||||
Along with a simple jQuery plugin, KUTE.js packs plugins 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.
|
||||
|
||||
Because of it's modularity, KUTE.js makes it super easy to extend or override functionality, making it unique among Javascript animation engines.
|
||||
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
|
||||
For documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/).
|
||||
For components documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/).
|
||||
|
||||
# Core Engine - [visit page](http://thednp.github.io/kute.js/examples.html)
|
||||
* tween object methods: `.to()`, `.fromTo()`, `.allTo()`, `.allFromTo()`
|
||||
* tween control methods: `.start()`, `.stop()`, `.pause()`, `.play()`
|
||||
* 2D and 3D transforms: all except `matrix`, `matrix3d`, `scale3d`, `rotate3d`
|
||||
* box model properties: `top`, `left`, `width`, `height`
|
||||
* colors: `color`, `backgroundColor`
|
||||
* scroll: vertical scroll animation for `window` or any element with `overflow: auto|scroll`
|
||||
* options: `yoyo`, `duration`, `easing`, `repeat`, `delay`, `offset` (for tween collections), `repeatDelay` and other transform/plugins related options
|
||||
* Robert Penner's easing functions
|
||||
* extensible prototypes and utility methods
|
||||
|
||||
# SVG Plugin - [visit page](http://thednp.github.io/kute.js/svg.html)
|
||||
* morphs SVGs with the `path` tween property, updating the `d` attribute of `<path>` or `<glyph>` elements
|
||||
* cross-browser SVG `transform` via the `svgTransform` property and the `transform` presentation attribute, this feature also helps stacking transform functions on chained tweens
|
||||
* draws SVG stroke with the `draw` tween property for most SVG elements: `<path>`, `<glyph>`, `<polygon>` or `<polyline>`, `<ellipse>` or `<circle>`, `<rect>`
|
||||
|
||||
# CSS Plugin - [visit page](http://thednp.github.io/kute.js/css.html)
|
||||
* all box model properties: `margin`, `padding`, with all their variations like `marginTop`, all variations for `width` or `height` like `maxHeight` or `minWidth`, `outlineWidth`, `borderWidth` with all side variations, except short-hand notations
|
||||
* `borderRadius` properties and all side variations, shorthand notations and early implementations are not supported
|
||||
* color properties: `outlineColor`, `borderColor` with all side variations except shorthands, etc
|
||||
* `clip` property only for `rect` type of values
|
||||
* `backgroundPosition` property with the ability to understand strings like `top left` and such
|
||||
* typographic properties: `fontSize`, `lineHeight`, `lettersSpacing` and `wordSpacing`
|
||||
|
||||
# Text Plugin - [visit page](http://thednp.github.io/kute.js/text.html)
|
||||
* animated number increments/decreases
|
||||
* writing text with a cool effect
|
||||
|
||||
# Attributes Plugin - [visit page](http://thednp.github.io/kute.js/attr.html)
|
||||
* animates any numeric presentation attribute with suffixed value
|
||||
* animates any other non-suffixed numeric presentation attribute
|
||||
* animates `fill`, `stroke` and `stop-color` color properties
|
||||
* handles attributes namespaces properly with `stroke-opacity` or `strokeOpacity`
|
||||
* properly handles the suffixes for you and depends very much on the current values then values you input
|
||||
|
||||
# Easing Functions - [visit page](http://thednp.github.io/kute.js/easing.html)
|
||||
**NOTE:** Starting with KUTE.js v 1.6.0 the Physics and Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the [Experiments repository on Github](https://github.com/thednp/kute.js/tree/experiments). The reasons for that is to make it easy to maintain what's more important: core code quality and the ability to create custom builds.</p>
|
||||
|
||||
* optimized dynamics easing functions
|
||||
* optimized cubic-bezier easing functions
|
||||
|
||||
# jQuery Plugin
|
||||
This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. Since the demos don't insist on this particular plugin, we'll write some basics [right here](https://github.com/thednp/kute.js#using-the-jquery-plugin).
|
||||
|
||||
The plugin is just a few bits of code to bridge all of the `KUTE.js` methods to your jQuery apps. The plugin can be found in the [/experiments](https://github.com/thednp/kute.js/blob/experiments/kute-jquery.js) branch only.
|
||||
|
||||
# NPM/Bower
|
||||
You can install this through NPM or bower respectively:
|
||||
```
|
||||
$ npm install kute.js
|
||||
# or
|
||||
$ bower install kute.js
|
||||
```
|
||||
|
||||
# CommonJS/AMD support
|
||||
You can use this module through any of the common javascript module systems. For instance:
|
||||
|
||||
```javascript
|
||||
// CommonJS style
|
||||
//grab the core
|
||||
var kute = require("kute.js");
|
||||
// Add SVG Plugin
|
||||
require("kute.js/kute-svg");
|
||||
// Add CSS Plugin
|
||||
require("kute.js/kute-css");
|
||||
// Add Attributes Plugin
|
||||
require("kute.js/kute-attr");
|
||||
// Add Text Plugin
|
||||
require("kute.js/kute-text");
|
||||
|
||||
// AMD style
|
||||
define([
|
||||
"kute.js", // core engine
|
||||
"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
|
||||
"kute.js/kute-text.js" // optional for string write and number incrementing animations
|
||||
], function(KUTE){
|
||||
// your stuff happens here, for instance
|
||||
// KUTE.fromTo('some-selector',{translateX:150}).start();
|
||||
});
|
||||
```
|
||||
|
||||
# Basic Usage
|
||||
At a glance, you can write one line and you're done.
|
||||
```javascript
|
||||
//vanilla js
|
||||
KUTE.fromTo('selector', fromValues, toValues, options).start();
|
||||
|
||||
//with jQuery plugin
|
||||
$('selector').fromTo(fromValues, toValues, options).start();
|
||||
```
|
||||
|
||||
# Advanced Usage
|
||||
Quite easily, you can write 'bit more lines and you're making the earth go round.
|
||||
```javascript
|
||||
//vanilla js is always the coolest
|
||||
KUTE.fromTo(el,
|
||||
{ translate: 0, opacity: 1 }, // fromValues
|
||||
{ translate: 150, opacity: 0 }, // toValues
|
||||
|
||||
// tween options object
|
||||
{ duration: 500, delay: 0, easing : 'exponentialInOut', // basic options
|
||||
|
||||
// callbacks
|
||||
start: functionOne, // run function when tween starts
|
||||
complete: functionTwo, // run function when tween animation is finished
|
||||
update: functionFour // run function while tween running
|
||||
stop: functionFive // run function when tween stopped
|
||||
pause: functionSix // run function when tween paused
|
||||
resume: functionSeven // run function when resuming tween
|
||||
}
|
||||
).start(); // this is to start animation right away
|
||||
```
|
||||
|
||||
## Using the jQuery Plugin
|
||||
Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps:
|
||||
```javascript
|
||||
// first we define the object(s)
|
||||
$('selector').fromTo( // apply fromTo() method to selector
|
||||
|
||||
{ translate: 0, opacity: 1 }, // fromValues
|
||||
{ translate: 150, opacity: 0 }, // toValues
|
||||
|
||||
// tween options object
|
||||
{ duration: 500, delay: 0, easing : 'exponentialInOut', // basic options
|
||||
|
||||
//callbacks
|
||||
start: functionOne, // run function when tween starts
|
||||
complete: functionTwo, // run function when tween animation is finished
|
||||
update: functionFour // run function while tween running
|
||||
stop: functionFive // run function when tween stopped
|
||||
pause: functionSix // run function when tween paused
|
||||
resume: functionSeven // run function when resuming tween
|
||||
}
|
||||
).start(); // then we apply the tween control methods, like start
|
||||
```
|
||||
|
||||
Starting with KUTE.js 1.5.7, the jQuery Plugin got lighter and uses the proper method automatically based on how many elements are returned from selector. If one element the proper single object method is used `fromTo()` or `to()` but if more than one elements are returned it will use `allFromTo()` or `allTo()`.
|
||||
|
||||
## Alternative usage in jQuery powered applications
|
||||
When size matters, you can handle animations inside jQuery applications without the plugin. Here's how:
|
||||
```javascript
|
||||
var tween = KUTE.fromTo($('selector')[0], fromValues, toValues, options);
|
||||
|
||||
// or simply provide a class|id selector, just like the usual
|
||||
var tween = KUTE.fromTo('#myElement', fromValues, toValues, options);
|
||||
|
||||
tween.start();
|
||||
```
|
||||
Pay attention to that `$('selector')[0]` as jQuery always creates an array of selected objects and not a single object, that is why we need to target a single HTML object for our tween object and not a colection of objects.
|
||||
|
||||
HTMLCollection objects should be handled with `allFromTo()` or `allTo()` methods.
|
||||
|
||||
```javascript
|
||||
var tween = KUTE.allFromTo($('selector'), fromValues, toValues, options);
|
||||
tween.start();
|
||||
```
|
||||
|
||||
# How it works
|
||||
* it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation
|
||||
* handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`)
|
||||
* allows you to set `perspective` for an element or it's parent for 3D transforms
|
||||
* computes properties' values properly according to their measurement unit (px,%,deg,etc)
|
||||
* properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent
|
||||
* converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB`
|
||||
* properly replaces `top`, `centered` or any other background position with proper value to be able to tween
|
||||
* for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`)
|
||||
* because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method
|
||||
* allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options
|
||||
* since `translate3D` is best for movement animation performance, `kute.js` will always use it
|
||||
* accepts "nice & easy string" easing functions, like `linear` or `easingExponentialOut` (removes the use of the evil `eval`, making development safer, easier and closer to standards :)
|
||||
* uses all 31 Robert Penner's easing functions, as well as any other custom functions such as bezier and physics based easing functions
|
||||
* handles browser prefixes for you for `transform`, `perspective`, `perspective-origin` and `requestAnimationFrame`
|
||||
* all this is possible with a core script of less than 20k size!
|
||||
# Wiki
|
||||
For usage, installation and stuff like npm, visit the [wiki](https://github.com/thednp/kute.js/wiki).
|
||||
|
||||
# Browser Support
|
||||
Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them <a href="https://cdn.polyfill.io/v2/docs/">polyfills</a>. I also packed a small polyfill set with most essential features required by KUTE.js to work, it's called [minifill](https://github.com/thednp/minifill), try it.
|
||||
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>.
|
||||
|
||||
# Contributions
|
||||
* Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functionality of KUTE.js
|
||||
* [Ingwie Phoenix](https://github.com/IngwiePhoenix): RequireJS/CommonJS compatibility and usability with common package managers
|
||||
* Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project
|
||||
|
||||
# License
|
||||
<a href="https://github.com/thednp/kute.js/blob/master/LICENSE">MIT License</a>
|
||||
[MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
|
|
|
|||
37
bower.json
37
bower.json
|
|
@ -1,37 +0,0 @@
|
|||
{
|
||||
"name": "KUTE.js",
|
||||
"version": "1.6.7",
|
||||
"homepage": "http://thednp.github.io/kute.js",
|
||||
"authors": [
|
||||
"thednp"
|
||||
],
|
||||
"description": "Complete Native Javascript animation engine.",
|
||||
"main": "kute.js",
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"keywords": [
|
||||
"kute.js",
|
||||
"svg morph",
|
||||
"svg transform",
|
||||
"tweening engine",
|
||||
"animation engine",
|
||||
"javascript animation engine",
|
||||
"javascript animation",
|
||||
"animations",
|
||||
"native javascript"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"uglify-js": "^1.3.5"
|
||||
}
|
||||
}
|
||||
51
build.js
51
build.js
|
|
@ -1,51 +0,0 @@
|
|||
// KUTE.js | Minify
|
||||
// Minify script for the js files in root folder
|
||||
// Usage: npm run min
|
||||
// by https://github.com/RyanZim && https://github.com/thednp
|
||||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var uglify = require('uglify-js');
|
||||
var pack = require('./package.json');
|
||||
var version = 'v'+pack.version;
|
||||
var license = pack.license+'-License';
|
||||
|
||||
console.log('Minifying KUTE.js ' + version + '..');
|
||||
|
||||
// Helper Functions:
|
||||
function replaceK(s) {
|
||||
if (/-/.test(s)) {
|
||||
if (/attr/.test(s)) { return 'Attributes Plugin'}
|
||||
if (/svg/.test(s)) { return 'SVG Plugin'}
|
||||
if (/css/.test(s)) { return 'CSS Plugin'}
|
||||
if (/text/.test(s)) { return 'Text Plugin'}
|
||||
} else {
|
||||
return 'Core Engine';
|
||||
}
|
||||
}
|
||||
function minify(srcPath, writePath) {
|
||||
fs.writeFile(writePath,
|
||||
('// KUTE.js ' + version + ' | © dnp_theme | ' + replaceK(srcPath) + ' | ' + license + '\n'
|
||||
+ uglify.minify(srcPath).code), function (err) {
|
||||
if (err) return handleError(err);
|
||||
console.log(srcPath+' is done.');
|
||||
});
|
||||
}
|
||||
function handleError(err) {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Minify files
|
||||
minify('kute-attr.js', 'dist/kute-attr.min.js');
|
||||
minify('kute-css.js', 'dist/kute-css.min.js');
|
||||
minify('kute-svg.js', 'dist/kute-svg.min.js');
|
||||
minify('kute-text.js', 'dist/kute-text.min.js');
|
||||
minify('kute.js', 'dist/kute.min.js');
|
||||
|
||||
// Now also to the demo
|
||||
minify('kute-attr.js', 'demo/src/kute-attr.min.js');
|
||||
minify('kute-css.js', 'demo/src/kute-css.min.js');
|
||||
minify('kute-svg.js', 'demo/src/kute-svg.min.js');
|
||||
minify('kute-text.js', 'demo/src/kute-text.min.js');
|
||||
minify('kute.js', 'demo/src/kute.min.js');
|
||||
250
demo/about.html
250
demo/about.html
|
|
@ -1,250 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 9 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="About KUTE.js performance, also about the KUTE.js project, code and a short glossary with most used terminology in Javascript animation.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,about kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>About 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="active"><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h2>Did you know?</h2>
|
||||
<p><strong>Tween</strong> is a term used by animators and software engineers to define the numeric start, end and the <a href="https://en.wikipedia.org/wiki/Inbetweening" target="_blank"><em>inbetween</em></a> values used in digital animation,
|
||||
while the digital animation uses these tween values on a given frequency (interval) or scaled by hardware capability (monitors refresh rate, GPU vertical sync, etc). The term was introduced to the world of web development by early Javascrpt
|
||||
libraries and later used in dedicated animation libraries such as <a href="https://greensock.com" target="_blank">GSAP</a>, <a href="http://dynamicsjs.com" target="_blank">Dynamics</a>, <a href="http://julian.com/research/velocity/" target="_blank">Velocity</a>,
|
||||
<a href="https://jeremyckahn.github.io/shifty/" target="_blank">Shifty</a>, our own <strong>KUTE.js</strong> here and many others. When used as a verb, it actually reffers to the interpolation of the values.</p>
|
||||
<p><strong>Tween Object</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank"><em>Javascript Object</em></a> that stores temporarily or for a given time a set of variables
|
||||
such as tween values, HTML elements to animate, CSS properties and other tween options to be used for animation. To improve performance on repetitive animations, this object can be cached and reused whenever needed. In Javascript animation,
|
||||
the term <strong>tween</strong> actually refers to the <strong>tween object</strong>.</p>
|
||||
<p><strong>polyfill</strong> is a term introduced by Remy Sharp back in 2009 as "a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide <em>natively</em>". Basically a polyfill covers what
|
||||
legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank">More details</a>.</p>
|
||||
<p><strong>requestAnimationFrame</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target="_blank"><em>Javascript method</em></a> developed to enable hardware acceleration animations for the
|
||||
web today. In Javascript, the <code>window.requestAnimationFrame(callback);</code> method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a <a href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">polyfil</a> to cover the legacy browsers chaos.</p>
|
||||
<p><strong>JANK</strong> is a term used when browsers miss frames due to long script execution and/or long layout recomposition. JANK is the phenomenon reffering to severe frame drops. Luckily there are people who
|
||||
<a href="http://www.html5rocks.com/en/tutorials/speed/rendering/"
|
||||
target="_blank">explain all about it</a>, so you don't have to stay in the dark.</p>
|
||||
<p><strong>Methods</strong> are functions that create <strong>tween objects</strong> or control the animation for KUTE.js, so we will encounter mostly <em>main methods</em> and <em>tween control methods</em>. Once a main method is used, then
|
||||
the control methods apply in a specific order.</p>
|
||||
|
||||
|
||||
<h2 id="how">How Does It Work?</h2>
|
||||
<p>Well, first things first: it's smart built. Let's briefly explain the phases:</p>
|
||||
<ol>
|
||||
<li>On first initialization KUTE.js creates some variables such as supported properties and their default values, the user's browser prefix, the true scroll container (some browsers actually scroll the body, while others prefer the HTML tag),
|
||||
a boolean variable that makes KUTE.js aware it's working with IE8, as well as other variables required during the main thread. This phase is very important for the performance on the next phases.</li>
|
||||
<li>In the next phase it's going to build the tween object with the chosen method according to it's distinct functionalities. If the chosen method is <code>.to()</code> KUTE.js will look for the current values of the properties used or assign
|
||||
the default values built in the previous phase. For both methods, KUTE.js collects all the data, processes values and options (for instance easing functions need to be processed if you use a string like 'easingElasticOut', right?)
|
||||
and builds the tween object, with all properties' values start and values end, measurement units, tween options and callback functions.</li>
|
||||
<li>In the third phase KUTE.js is ready to start the animation, but the animation starts only after the <code>.start()</code> function, if used, has finished. When animation starts, KUTE.js will start <em>ticking</em> on the frequency decided
|
||||
by <code>requestAnimationFrame</code> or <code>setInterval</code> for legacy browsers, quickly updating the style for the properties and execute the <code>update:function</code> callback if any. Also while animating, KUTE.js will begin
|
||||
<em>listening</em> for your tween control input such as <code>.pause()</code> or <code>.stop()</code> or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.</li>
|
||||
<li>When tween animation is finished, the <code>complete:function</code> callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with <code>cancelAnimationFrame</code> to save power.</li>
|
||||
</ol>
|
||||
<p>Basically, this is it!</p>
|
||||
|
||||
<h2 id="performance">A Note On Performance</h2>
|
||||
<p>As said before, performance varies from case to case; this chapter aims to explain what you should expect working with animation engines in these various scenarios at maximum stress, usually when your CPU cooler starts to work really hard,
|
||||
and how scalable performance can really be on various machines, operating systems or mobile devices. We'll dig into each case, by property type or anything that can be considered a factor of influence.</p>
|
||||
|
||||
<h3>Function Nesting</h3>
|
||||
<p>This could be one of the most important factors that influence performance, because we neglect this fact most of the time and changing the scope of an animation engine is important to look after. A quick example would be when we create tween
|
||||
objects on events such as <code>click</code>, <code>scroll</code> or <code>resize</code>, we basically set a totally different scope for the animation and we fill the memory with large chunks of trash/jank, especially on events like <code>resize</code>.</p>
|
||||
<p>A better way to handle this is to create the tween objects outside the event handlers and only start the animation with these handlers when certain conditions are met. EG: <code>if (window.clientWidth > 760) { myTween.start() }</code>. Also
|
||||
keep in mind that this approach will eliminate any possible syncronization issues, but creating many animations is a huge temptation and this will create lots of problems for the old browsers, so keep the function nesting to as minimal
|
||||
as possible as a general rule.</p>
|
||||
|
||||
<h3>Translate and Position</h3>
|
||||
<p>While the code execution is the <strong>fastest</strong> for the <em>layout modifiers</em> or what we call <em>box-model</em>, say the <code>position</code> based properties set such as <code>left</code> or <code>top</code>, they may force
|
||||
the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side <code>translate</code> doesn't trigger
|
||||
a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because <code>translate</code> is part of <code>transform</code> CSS3 property
|
||||
that has to stack in a single line many more properties such as <code>rotate</code>, <code>skew</code> and <code>scale</code>. <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank">An article</a> by Paul Irish explains more about differences in performance between position and translation.</p>
|
||||
<p>Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at
|
||||
least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.</p>
|
||||
|
||||
<p><span class="ion-android-plane media"></span>To put it short <code>left</code> executes faster but requires repaint on every frame while <code>translateX</code> or <code>translate3d</code> execute slower but require no repaint on each animation
|
||||
frame. The <strong>winner</strong> is <kbd>left</kbd>, when it comes to code execution speed, but if we also count the elements' size, the larger size the more favor the translation so the <strong>overall winner</strong> is <kbd>translate</kbd>.
|
||||
The more pixels to recompose in the layout, the more time spent on each frame, and this is why translation is better in most cases, and animated positioning is best to be used as fallback animation for legacy browsers.</p>
|
||||
|
||||
<h3>Translate, TranslateX and Translate3D</h3>
|
||||
<p>While running a 2D <code>translate:150</code> animation could score similar performance as <code>translateX:150</code>, interestingly, <code>translate3d:[150,0,0]</code> is slightly faster than the other translations. Some performance <a href="http://jsperf.com/translate3d-vs-xy/28">tests</a> confirm that <code>translate3d</code> is the prefered property for hardware acceleration. For this reason, <kbd>translate3d</kbd> is the <strong>winner</strong> and KUTE.js always uses it even if you only use <code>translateX</code> or
|
||||
<code>translateY</code> for instance.
|
||||
<p>
|
||||
<p>Similarly, if you animate the 2D <code>translate</code> this always goes <code>translate(x,y)</code> even if you use <code>translate:150</code> (only for the X axis) or <code>translate:[150,0]</code> (both X and Y axis), for better
|
||||
performance as well. And by the way, this works great on IE9 and other legacy browsers.</p>
|
||||
|
||||
<h3>Box Model</h3>
|
||||
<p><span class="ion-nuclear media"></span>We compared position with transition above, but now we are going to talk about other issues related to <strong>resizers</strong>: <code>width</code>, <code>height</code>, <code>margin</code>,
|
||||
<code>padding</code> and <code>borderWidth</code> or any of their variations. The code execution is super fast, but when resizing the window while animations are running, the browser is also computing the resize handlers, the animation
|
||||
performance is very very low on <strong>all</strong> browsers, especially when you animate these resize properties. When this <strong>toxic combination</strong> occurs animating a large amount of elements could crash any browser,
|
||||
no exception, and I think any developer should know about this.</p>
|
||||
<p>The <code>resize</code> event triggered by these resizer properties can cause some <strong>severe issues with legacy browsers</strong> such as IE8. These good old browsers don't understand much about Javascript driven layout changes
|
||||
and thus skip/fail to execute any handlers attached to window resize event bubbles.</p>
|
||||
<p>A workaound for the resizers' effect on the layout would be to use them only for absolute positioned elements, this way the layout will not need to be repainted and the recomposition is limited to the elements themselves. If not, and
|
||||
you are required to provide legacy support, you must DISABLE any resize handlers for IE8 and any other browser that runs slow or crashes. You should also consider not using any resize animation for legacy browsers especially when
|
||||
usability and larger reach is expected.</p>
|
||||
|
||||
<h3>RGB and HEX</h3>
|
||||
<p><span class="ion-android-color-palette media"></span>When animating any color property such as (text) <code>color</code> or <code>background-color</code>, KUTE.js always uses/converts to RGB/RGBA, but there is a <code>keepHex:true</code> tween option that overrides that. Still some browsers such as Chrome will still show you the computed style for your color as RGB no matter what. The conversion process will decrease performance, making <kbd>RGB</kbd> the <strong>winner</strong>.</p>
|
||||
|
||||
<h3>TO and FROMTO</h3>
|
||||
<p>The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are <code>.to()</code> and <code>.fromTo()</code>. While <code>.to()</code> is much more simple and convenient to use, very useful for
|
||||
tween chaining, it has to process the starting values on every <code>.start()</code> delaying the animation for a few miliseconds depending on the browser and hardware, making <kbd>.fromTo()</kbd> the <strong>winner</strong>. On
|
||||
a large amount of elements animating at the same time, these scripting based delays can produce some serious syncronization issues, so caution is advised. In that case you should use <code>.fromTo()</code> properly.</p>
|
||||
|
||||
<h3>Easing Functions</h3>
|
||||
<p>KUTE.js comes with 3 packs of easing functions: the popular <a href="http://robertpenner.com/easing/" target="_blank">easing functions</a> by Robert Penner, <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> easing
|
||||
functions by Michael Villar and <a href="https://github.com/gre/bezier-easing" target="_blank">bezier-easing</a> by Gaëtan Renaudeau. I've worked very hard to optimize the last 2 as much as possible, but they will never beat Robert
|
||||
Penner's functions in any performance test, that's an all time <strong>winner</strong>.</p>
|
||||
<p><span class="ion-shuffle media"></span>The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the <code>cubic-bezier</code> based functions have a 0.0000001
|
||||
error margin, while the <code>Exponential</code> easing functions by Robert Penner are somewhat glitchy on long page scrolls or translations. Interestingly, some physics based functions perform exceedingly well, and generally the
|
||||
difference in performance is fairly negligible even for large amounts of elements, and have no impact on very few elements.</p>
|
||||
|
||||
<h3>Garbage Collection</h3>
|
||||
<p><span class="ion-trash-a media"></span>The goal of the development strategy is to be able to execute the script, update layout and repaint, all under 16 miliseconds, so that the animation runs constantly at 60fps. However running some
|
||||
repeatable animations for a large amount of elements would really give garbage collectors a lot of work and thus some frames take more than 16 miliseconds. The more properties and/or elements, the more work.</p>
|
||||
<p>While garbage collection is a great way modern browsers use to clean the memory, sometimes the garbage collector can jump in anytime, cousing drops in the order of miliseconds. Still, if it's the case, there are ways to help composing
|
||||
the layout faster, but we will see that in the performance testing <a href="performance">page</a>.</p>
|
||||
|
||||
<h3>Property Value Complexity</h3>
|
||||
<p>Just like the high amount of simultaneous animations influence performance, the property value complexity is also an important factor. If we were to compare all the supported properties in terms of complexity, the list would go like
|
||||
this (from most expensive to least): path morphing, regular transform, matrix3d (not yet supported), box-shadow / text-shadow, colors, box model<span style="color:red">*</span>, unitless props (scroll, opacity).</p>
|
||||
<p>The <span style="color:red">*</span> wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.</p>
|
||||
|
||||
<h3>OSs, Desktops and Mobiles</h3>
|
||||
<p><span class="ion-social-tux media"></span>The performance tests have been performed mainly on Microsoft Windows 8.1 and Ubuntu Linux 14.04 Trusty Tahr with latest nVidia graphics drivers on both OSs, all set up for maximum performance.
|
||||
The browsers are obviously Firefox (both OSs), Google Chrome (both OSs), Opera (both OSs) and IE11 (Win8).</p>
|
||||
<p><span class="ion-social-windows media"></span>The results show <strong>Windows</strong> based browsers came better than Ubuntu based ones, mainly because of DirectX and better drivers that greatly improve hardware accelerated graphics,
|
||||
while Linux still faces some noticeable issues with vertical sync among many others, but hey it's a work in progress and it's open source!</p>
|
||||
|
||||
<p><span class="ion-social-chrome media"></span>The browsers' performance goes like this (from best to poorest): <strong>Google Chrome</strong>, Opera, Internet Explorer, Firefox. Yes, Firefox is the slowest on Windows OS. I never tested
|
||||
anything on iOS or MAC-OS but I believe Safari performs very well with transforms. <a href="http://venturebeat.com/2014/05/12/apple-upgrades-safaris-webkit-to-challenge-googles-chrome-browser/" target="_blank">Some argue</a> that
|
||||
Safari outperforms Google Chrome due to the latest Webkit upgrade.</p>
|
||||
|
||||
<p>Also know that legacy browsers don't support <code>requestAnimationFrame</code> and pollyfills usually replace it with <code>setInterval</code>, a clasic Javascript method that's
|
||||
<a href="https://jsperf.com/requestanimationframe-vs-setinterval-loop/7"
|
||||
target="_blank">significantly</a> affecting performance, because it's one of the main causes for <a href="http://www.html5rocks.com/en/tutorials/speed/rendering/" target="_blank">lots of JANK</a>.</p>
|
||||
|
||||
<p>Another important aspect as far as performance goes, the power saving profiles on Windows OS drops performance for desktop computers and especally laptops. Also when a laptop is unplugged, Windows automatically changes power profile
|
||||
drastically decreasing performance. </p>
|
||||
|
||||
<p>As for the mobiles, you must know that even if you have an octacore CPU powered phone or tablet is never going to match a desktop and not even a laptop. For a mobile device <a href="https://www.youtube.com/watch?v=YyQYhhy1dZI" target="_blank">these guys</a> recommend to keep everything under 7 miliseconds for the smooth experience that most users expect and that the animation performance of a phone is actually up to 5 times lower than a desktop or laptop. I would stress that having
|
||||
2 or 3 simoultaneous animations on a phone at a certain point is just about enough.</p>
|
||||
|
||||
<p><span class="ion-android-phone-portrait media"></span>Another thing to keep in mind is that scrollling on a mobile device is actually hardware accelerated animation and thus compete for power drastically reducing performance for any
|
||||
other CSS or Javascript driven animations. To understand how critical performance is on a mobile device, I highly recommend checking the <a href="https://youtu.be/WrA85a4ZIaM?t=16m6s" target="_blank">Google I/O 2014 presentation</a>.
|
||||
Now you understand how much performance really matters.</p>
|
||||
<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 <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
|
||||
for performance related issues. Generally I would stress that the code is a joint work of me and Dav. Big thanks Dav, well done.</p>
|
||||
<p>Also I would like to thank <a href="http://ingwie.me/" target="_blank">Ingwie Phoenix</a> for the npm/Bower and UMD implementations.</p>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
273
demo/api.html
273
demo/api.html
|
|
@ -1,273 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="A detailed API documentation on KUTE.js public methods on how to create tween objects or how to control the tween animation.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,public methods,tween control,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Developer API | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li class="active"><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Public Methods</h2>
|
||||
<p>These methods allow you to create <strong>tween objects</strong> and collections of <strong>tween objects</strong>; as we know, a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation
|
||||
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.</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>
|
||||
<p>Considering a given <em>div</em> element is already transparent, a super quick example would be:</p>
|
||||
<pre><code class="language-javascript">KUTE.to(div,{opacity:1}).start()</code></pre>
|
||||
<p>As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.</p>
|
||||
<p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the <code>.to()</code> method, it does not stack transform properties
|
||||
on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. Here's a quick example:</p>
|
||||
<pre><code class="language-javascript">KUTE.fromTo(div,{opacity:1},{opacity:0}).start()</code></pre>
|
||||
|
||||
<h3>Tween Object Collections</h3>
|
||||
<p>The two new methods allow you to create animations for multiple HTML elements at the same time, all in a single line of code. They use the above methods to create a tween object for each element of the collection and also enable the tween
|
||||
control methods in this new context.</p>
|
||||
<p><kbd>.allTo()</kbd> method allows you to create an array of tween objects for a collection of elements. This method is using the above <code>.to()</code> method and inherits it's functionality. Considering a given collection <code>myDivs</code> elements, a nice example would be:</p>
|
||||
<pre><code class="language-javascript">// on the fly, grab the elements by className,
|
||||
// do the tween objects array, and start kicking
|
||||
KUTE.allTo( '.my-div-class', {opacity:1}, {offset: 200, duration: 500} ).start();
|
||||
|
||||
// or we cache the objects for better performance and / or later control
|
||||
var myDivs = document.querySelectorAll('.my-div-class');
|
||||
var myDivsTweens = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 500} );
|
||||
</code></pre>
|
||||
|
||||
<p><kbd>.allFromTo()</kbd> method is also a method to animate a collection of elements and it uses the <code>.fromTo()</code> method. Quick example:</p>
|
||||
<pre><code class="language-javascript">KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()</code></pre>
|
||||
|
||||
<p>As you can see the above code, these methods have a specific tween option called <code>offset</code> that allows you to set a delay in miliseconds between the starting time of each tween animation. Most tween control methods apply to both
|
||||
methods, except for the <code>.chain()</code> method. In order to chain another tween to one of the <code>myDivsTweens</code> objects, we would need to access it from the array, but let's leave that for later.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Tween Control Methods</h2>
|
||||
<p>These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:</p>
|
||||
<pre><code class="language-javascript">var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});</code></pre>
|
||||
<p>This tween object is now ready to work with the methods.</p>
|
||||
|
||||
<h3 id="start">Starting Animations</h3>
|
||||
<p><kbd>.start()</kbd> method starts animation for a given tween object. It can start the animation for both cached and non-cached objects. Unlike previous versions of KUTE.js, where animation started immediately after tween object creation,
|
||||
now you have to manually start them. This method also applies to arrays of tween objects created with <code>.allTo()</code> and <code>.allFromTo()</code> methods.</p>
|
||||
<pre><code class="language-javascript">//cached object defined above
|
||||
tween.start();
|
||||
|
||||
// non-cached object are created on the fly and garbage collected after animation has finised
|
||||
KUTE.fromTo(div,{opacity:1},{opacity:0}).start();
|
||||
|
||||
// also start the tween at a certain time
|
||||
tween.start(now); // where now must be the current or future time as number, see below
|
||||
|
||||
// lastly the method works with tweens made with .allTo() and .allFromTo() methods
|
||||
KUTE.allFromTo(divs,{opacity:1},{opacity:0}).start();
|
||||
KUTE.allTo(divs,{opacity:0}).start();
|
||||
</code></pre>
|
||||
|
||||
<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. Having access to the method is useful when starting animation for large amounts of elements with same properties at the same
|
||||
time because using it properly <strong>eliminates any syncronization issue</strong> that may occur on animations start, even if you are using the <code>.to()</code> method. The trick is super duper simple:</p>
|
||||
|
||||
<pre><code class="language-javascript">// step 1 - create an empty array and grab the elements to animate
|
||||
var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
|
||||
|
||||
// step 2 - define tween objects for each element
|
||||
for (var i = 0; i < numberOfElements; i++) {
|
||||
var tween = KUTE.fromTo(myElements[i], fromValues, toValues, options);
|
||||
//now we populate the tweens array
|
||||
tweens.push(tween);
|
||||
}
|
||||
|
||||
// step 3 - calculate the right time to start
|
||||
// first we need the exact current time
|
||||
var now = window.performance.now(); // this returns the exact current time in numeric format
|
||||
|
||||
// also we estimate/calculate an adjustment lag
|
||||
// depending on the number of the elements AND hardware capability
|
||||
// maybe (numberOfElements / 16) would be an accurate value for PCs
|
||||
var lag = 100; // number of miliseconds for the script to built tween objects for all elements
|
||||
|
||||
// step4 - we just start the animation for all elements at once
|
||||
for (var i = 0; i < numberOfElements; i++) {
|
||||
tweens[i].start(now+lag);
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>In other cases the new methods <code>.allTo()</code> and <code>.allFromTo()</code> can be more useful.</p>
|
||||
|
||||
<h3>Stopping Animation</h3>
|
||||
<p><kbd>.stop()</kbd> method stops animation for a given tween object or an array of tween objects (built with <code>.to()</code>/<code>.fromTo()</code> methods) while animating. You cannot stop the animation for tween objects created on the
|
||||
fly, only for cached objects. Let's assume that for the given tween we decide to stop the animation via <code>click</code> action:</p>
|
||||
<pre><code class="language-javascript">// for a tween object
|
||||
stopButton.addEventListener('click', function(){
|
||||
myTween.stop(); // myMultiTweens.stop();
|
||||
}, false);
|
||||
</code></pre>
|
||||
|
||||
<h3>Pausing Animation</h3>
|
||||
<p><kbd>.pause()</kbd> method freezez the animation at any given time for a given tween object or collection, and unlike the <code>.stop()</code> method, this one allows resuming the animation on a later use of the next method <code>.play()</code>.</p>
|
||||
<pre><code class="language-javascript">pauseButton.addEventListener('click', function(){
|
||||
tween.pause(); // or myMultiTweens.pause();
|
||||
}, false);
|
||||
</code></pre>
|
||||
|
||||
<h3>Resuming Paused Animation</h3>
|
||||
<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object or collection of tweens, only if it was paused or else will produce no effect.</p>
|
||||
<pre><code class="language-javascript">playButton.addEventListener('click', function(){
|
||||
tween.play(); // or tween.resume(); || or myMultiTweens.resume();
|
||||
}, false);
|
||||
</code></pre>
|
||||
|
||||
<h3>Chaining Tweens</h3>
|
||||
<p><kbd>.chain()</kbd> method can be used to chain tweens together. When the animation finishes for a given tween, it calls for <code>.start()</code> for another tween(s).</p>
|
||||
<pre><code class="language-javascript">var tween2 = KUTE.fromTo(div,{left:50},{left:0});
|
||||
|
||||
//the first tween chains the new tween
|
||||
tween.chain(tween2);
|
||||
|
||||
//the new tween chains the first one creating a loop
|
||||
tween2.chain(tween);
|
||||
</code></pre>
|
||||
|
||||
<p>It's also possible to chain multiple tweens, just as shown in the below example.</p>
|
||||
<pre><code class="language-javascript">//chain multiple tweens
|
||||
tween.chain(tween1,tween2);
|
||||
</code></pre>
|
||||
|
||||
<p>Another thing we talked before is the ability to chain to one of the tween object within the array built with <code>.allTo()</code> or <code>.allFromTo()</code> methods.</p>
|
||||
<pre><code class="language-javascript">// chain to a tween from collection
|
||||
var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
|
||||
|
||||
// considering the collection has 5 tweens,
|
||||
// the array is right here tweensCollection.tweens, so
|
||||
// let's grab the second and chain another tween to it
|
||||
tweensCollection.tweens[1].chain(tween2);
|
||||
</code></pre>
|
||||
<p>Also we can chain the tweens created with <code>.allTo()</code> and <code>.allFromTo()</code> methods like this:</p>
|
||||
<pre><code class="language-javascript">// chain a collection of tweens to another tween
|
||||
var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
|
||||
|
||||
// the array is right here tweensCollection2.tweens
|
||||
// we can pass it in the chain of another tween
|
||||
tween2.chain(tweensCollection2.tweens);
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -6,19 +6,65 @@
|
|||
/* GLOBAL STYLES
|
||||
-------------------------------------------------- */
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 2; /* ~25px */
|
||||
line-height: 24px; /* ~25px */
|
||||
letter-spacing: 0.02em;
|
||||
color: #ccc;
|
||||
background-color: #2e2e2e;
|
||||
background-color: #08263d;
|
||||
position: relative
|
||||
|
||||
}
|
||||
|
||||
/* the body and it's children can be irresponsive on scroll animations as well */
|
||||
body[data-tweening="scroll"],
|
||||
body[data-tweening="scroll"] * { pointer-events: none !important; }
|
||||
.condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;}
|
||||
|
||||
/* WRAPPER STYLES
|
||||
-------------------------------------------------- */
|
||||
.content-wrap { max-width: 80%; position: relative; margin: 0 auto; clear: both; }
|
||||
|
||||
@media (min-width: 1020px){
|
||||
.content-wrap { max-width: 100%; width: 980px; }
|
||||
}
|
||||
|
||||
/* check div consistency
|
||||
div { background-color: rgba(0,0,0,0.2) }*/
|
||||
|
||||
/* TYPO STYLES
|
||||
-------------------------------------------------- */
|
||||
p, ul, ol { margin: 0 0 12px }
|
||||
h1, h2, h3, h4, strong {color: #fff}
|
||||
h1, h2, h3, h4, h5 { margin: 24px 0; font-weight: bold; }
|
||||
h1 { font-size: 54px; letter-spacing:-2px; line-height: 48px; }
|
||||
h2 { font-size: 46px; letter-spacing:-1px; line-height: 48px; }
|
||||
h3 { font-size: 32px; letter-spacing:-1px; line-height: 36px; }
|
||||
h4 { font-size: 24px; letter-spacing: 0px; }
|
||||
/* h1, h3, [class*="col"] > h4 {margin: 0 0 20px} */
|
||||
|
||||
h1.border,
|
||||
h2.border,
|
||||
h3.border,
|
||||
.lead.border {
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(150,150,150,0.5)
|
||||
}
|
||||
|
||||
.text-right { text-align: right }
|
||||
.text-center { text-align: center }
|
||||
.text-left { text-align: left }
|
||||
|
||||
.float-left {float:left}
|
||||
.float-right {float:right}
|
||||
|
||||
.margin-bottom { margin-bottom: 24px !important; }
|
||||
|
||||
.lead { font-size: 18px; color: #fff }
|
||||
|
||||
.nomargin { margin: 0px !important }
|
||||
@media (min-width: 768px){
|
||||
.nomarginlarge { margin: 0 !important }
|
||||
}
|
||||
|
||||
b,strong {font-weight: 600;color:white}
|
||||
|
||||
footer {
|
||||
clear: both; overflow: hidden; margin-top: 60px
|
||||
|
|
@ -26,42 +72,78 @@ footer {
|
|||
|
||||
footer .content-wrap {
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid rgb(120,120,120); border-top: 1px solid rgba(255,255,255,0.2);
|
||||
border-top: 1px solid rgb(120,120,120);
|
||||
border-top: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
footer p {margin: 0 0 10px}
|
||||
|
||||
/* site-wrapper */
|
||||
.site-wrapper { position: relative; overflow: hidden}
|
||||
.site-wrapper { position: relative; overflow: hidden; }
|
||||
|
||||
.head-title { margin-top: 60px }
|
||||
|
||||
/* navbar */
|
||||
.navbar-wrapper { position: relative; clear: both }
|
||||
.navbar-wrapper .content-wrap { height: 64px; padding: 20px 0 0; }
|
||||
.navbar {
|
||||
display: flex;
|
||||
/* justify-content: space-evenly; */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar-wrapper h1 { color: #fff; font-size: 32px; line-height: 25px; letter-spacing: -2px; float: left; padding-right: 25px; margin-right: 25px; border-right: 1px solid rgb(120,120,120); border-right: 1px solid rgba(255,255,255,0.2) }
|
||||
@media (min-width:768px) {
|
||||
.navbar {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
border-bottom: 1px solid #555;
|
||||
padding: 0 0 10px;
|
||||
flex-basis: 100%
|
||||
}
|
||||
.navbar-wrapper { position: relative; clear: both; background: rgba(0,0,0,0.7); padding-bottom: 20px; }
|
||||
.navbar-wrapper .content-wrap { padding: 20px 0 0; }
|
||||
|
||||
.navbar-wrapper h1 {
|
||||
color: #fff;
|
||||
font-size: 32px; line-height: 24px; letter-spacing: 0px;
|
||||
float: left; padding-right: 24px; margin-right: 24px; margin-top:0; margin-bottom: 0;
|
||||
border-right: 1px solid rgba(255,255,255,0.2)
|
||||
}
|
||||
.navbar-wrapper h1 span { font-size: 24px; color: #555; letter-spacing: -1px; }
|
||||
.navbar-wrapper h1.active span { color: #ffd626 }
|
||||
.navbar-wrapper .nav { float: left; padding: 0 0 18px; margin: 0; border-bottom: 1px solid #555 }
|
||||
.nav > li { float: left; display: block; line-height: 25px; list-style: none }
|
||||
.navbar-wrapper .nav { padding: 0; margin: 0; display: flex; flex-direction: row; }
|
||||
.nav > li { display: block; line-height: 25px; list-style: none }
|
||||
.nav > li:not(:last-child) { margin-right: 12px }
|
||||
.ie8 .nav li { margin-right: 12px }
|
||||
.ie8 .nav li li { margin-right: 0 }
|
||||
.nav li.active > a { color: #ffd626 }
|
||||
.nav li a { color: #ccc }
|
||||
.nav li a:hover, .nav li a:focus { text-decoration: none }
|
||||
|
||||
/* share */
|
||||
#share { display: flex; flex-direction: row; margin: 0; position: absolute; top: 15px; right: 0; }
|
||||
#share li { list-style: none }
|
||||
#share a { text-decoration: none; }
|
||||
#share .icon {width:26px; height:auto; vertical-align: middle;}
|
||||
#share path { fill: none; stroke: currentColor; stroke-width: 50; }
|
||||
#share li:not(:last-child) { margin-right: 10px; }
|
||||
#share li:hover path { fill: currentColor; }
|
||||
#share li:hover a.facebook-link { color: #3578E5}
|
||||
#share li:hover a.twitter-link { color: #1da1f2 }
|
||||
|
||||
|
||||
@media (max-width: 768px){
|
||||
.navbar-wrapper .content-wrap { height: 94px}
|
||||
.navbar-wrapper h1 {border: 0}
|
||||
.navbar-wrapper .nav,
|
||||
.navbar-wrapper h1 { float: none; }
|
||||
.navbar-wrapper .nav { height: 30px }
|
||||
#share { top: 30px; }
|
||||
}
|
||||
|
||||
.ie8 .btn.top-right { top:55px }
|
||||
|
||||
|
||||
/* featurettes */
|
||||
.featurettes {
|
||||
background: #eee;
|
||||
background: #fff;
|
||||
padding: 60px 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
|
|
@ -73,8 +155,10 @@ footer p {margin: 0 0 10px}
|
|||
.featurettes h1,
|
||||
.featurettes h2,
|
||||
.featurettes h3,
|
||||
.featurettes h4,
|
||||
.featurettes b,
|
||||
.featurettes strong {color: #222}
|
||||
.featurettes .lead,
|
||||
.featurettes strong {color: #222;}
|
||||
.featurettes a {color: #2196F3}
|
||||
|
||||
.content-wrap .featurettes { margin: 0 0 20px; padding: 20px 0 0 20px; display: inline-block; border-radius: 10px; position: relative }
|
||||
|
|
@ -85,6 +169,7 @@ footer p {margin: 0 0 10px}
|
|||
float: left; position:relative;
|
||||
width: 150px; height: 150px;
|
||||
border-radius: 5px; margin: 0 20px 20px 0;
|
||||
color: white
|
||||
}
|
||||
/*.example-box-model {
|
||||
font-size: 40px; text-align:center; font-weight: bold;
|
||||
|
|
@ -98,12 +183,11 @@ svg.example-box { width: auto; height: auto; }*/
|
|||
.example-buttons {position: absolute; top: 18px; right:0}
|
||||
|
||||
/* text properties example */
|
||||
:not(.ie8) .btn.example-item {opacity: 0}
|
||||
h1.example-item {
|
||||
font-size: 50px;
|
||||
line-height:50px;
|
||||
color: #333;
|
||||
opacity: 0;
|
||||
/* opacity: 0; */
|
||||
}
|
||||
|
||||
h1.example-item span {
|
||||
|
|
@ -112,9 +196,6 @@ h1.example-item span {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ie8 h1.example-item,
|
||||
.ie8 .btn.example-item {filter: alpha(opacity=0); }
|
||||
.ie8 .btn.example-item {display: block; padding:0; text-align: center; }
|
||||
|
||||
|
||||
/* UTILITY STYLES
|
||||
|
|
@ -176,62 +257,48 @@ h1.example-item span {
|
|||
.media {float: left; margin: 5px 20px 0 0; height: auto; font-size: 64px; line-height: 64px; width: 64px; text-align: center}
|
||||
|
||||
|
||||
/* WRAPPER STYLES
|
||||
-------------------------------------------------- */
|
||||
.content-wrap { position: relative; width: 980px; margin: 0 auto; max-width: 100%; clear: both; }
|
||||
@media (max-width: 1200px){
|
||||
.content-wrap { width: 100%; max-width: 80%; }
|
||||
}
|
||||
|
||||
/* check div consistency
|
||||
div { background-color: rgba(0,0,0,0.2) }*/
|
||||
|
||||
/* TYPO STYLES
|
||||
-------------------------------------------------- */
|
||||
p, ul, ol { margin: 0 0 20px }
|
||||
h1, h2, h3, h4, strong {color: #fff}
|
||||
h1 { font-size: 54px; letter-spacing:-3px; line-height: 0.92; font-weight: normal; }
|
||||
h2 { font-size: 46px; letter-spacing:-2px; line-height: 1.08; font-weight: normal; margin: 1.08em 0 0.27em; width: 100%; }
|
||||
h3 { font-size: 24px; letter-spacing:0px; line-height: 0.96; font-weight: normal; }
|
||||
h4 { font-size: 16px; letter-spacing:0px; line-height: 1.14; font-weight: normal; }
|
||||
h1, h3, [class*="col"] > h4 {margin: 0 0 20px}
|
||||
|
||||
.lead { font-size: 16px }
|
||||
|
||||
.nomargin { margin-top: 0px !important }
|
||||
@media (min-width: 768px){
|
||||
.nomarginlarge { margin-top: 0 !important }
|
||||
}
|
||||
|
||||
/* COLUMN STYLES
|
||||
-------------------------------------------------- */
|
||||
.columns { position: relative; width: auto; margin: 0 -20px; clear: both }
|
||||
.columns > [class*="col"] { padding: 0 20px; float:left; position: relative }
|
||||
.col2 { width: 50% }
|
||||
.col3 { width: 33.3% }
|
||||
.col4 { width: 25% }
|
||||
.col8 { width: 75% }
|
||||
.columns { position: relative; width: auto; margin: 0 -20px; display:flex; flex-direction: column; }
|
||||
.columns > [class*="col"] { padding: 0 20px; position: relative }
|
||||
.columns.welcome {min-height:330px}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 768px){
|
||||
/*.columns:not(#blocks) .col3:last-child{width: 100%;}*/
|
||||
@media (min-width: 768px){
|
||||
.columns { flex-direction: row; flex-wrap: wrap }
|
||||
.columns.welcome {min-height:none}
|
||||
|
||||
|
||||
.col2 { max-width: 50%; flex: 0 0 50% }
|
||||
.col3 { max-width: 33.33%; flex: 0 0 33.33% }
|
||||
.col4 { max-width: 25%; flex: 0 0 25% }
|
||||
.col8 { max-width: 75%; flex: 0 0 75% }
|
||||
.col9 { max-width: 66.65%; flex: 0 0 66.65% }
|
||||
}
|
||||
|
||||
/* @media (min-width: 480px) and (max-width: 768px){
|
||||
.col3,
|
||||
.col4 { width: 50% }
|
||||
.col8 { width: 100% }
|
||||
.col4 { width: 50%; flex: 0 0 50% }
|
||||
.col8,
|
||||
.col9 { width: 50%; flex: 0 0 50% }
|
||||
}
|
||||
@media (max-width: 479px){
|
||||
.columns > [class*="col"] { float:none; width: 100%; }
|
||||
}
|
||||
.frontpage { margin-top:27% }
|
||||
.columns > [class*="col"] { width: 100%; }
|
||||
} */
|
||||
|
||||
.table { display: table; height: 480px }
|
||||
.cell { display: table-cell; vertical-align: middle }
|
||||
|
||||
@media (max-width: 479px){
|
||||
.table { height: 320px }
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
[class*="col"].border:not(:first-child) {
|
||||
border-left: 1px solid rgba(150,150,150,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* welcome */
|
||||
.col3.bg { /*min-height: 120px;*/ width: 32%; margin: 1.3% 1.3% 0 0; float: left; padding: 0; opacity:0 }
|
||||
.ie8 .col3.bg { filter: alpha(opacity=0); }
|
||||
|
||||
.col3.bg:nth-child(3),
|
||||
.col3.bg:nth-child(6),
|
||||
|
|
@ -244,10 +311,15 @@ h1, h3, [class*="col"] > h4 {margin: 0 0 20px}
|
|||
|
||||
/*.replay { display: none; }*/
|
||||
|
||||
@media (max-width: 768px){
|
||||
.columns.welcome .col2.table { width: 100% !important; float: left }
|
||||
.columns.welcome .col2:nth-child(2) { position: absolute; top: 0; z-index: -1 }
|
||||
#blocks { width: auto }
|
||||
.frontpage { margin-top: 30%; }
|
||||
|
||||
.columns.welcome .col2:nth-child(2) { position: absolute; top: 0; z-index: -1; left: 20%; opacity: 0.5 }
|
||||
.kute-logo {
|
||||
margin-top: 12%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.columns.welcome .col2:nth-child(2) { position: relative; top: auto; left: auto; z-index: auto; opacity: 1 }
|
||||
}
|
||||
|
||||
/* STYLING CONTENT
|
||||
|
|
@ -275,20 +347,27 @@ hr {
|
|||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* share */
|
||||
#share {position: fixed; top: 0px; right: 0px; padding:10px 20px; background: #2e2e2e;}
|
||||
#share .icon {font-size: 24px; line-height: 1}
|
||||
|
||||
.d-block {display: block;}
|
||||
.d-flex {display: flex;}
|
||||
.d-none {display: none;}
|
||||
|
||||
.align-self-center {align-self: center;}
|
||||
.align-items-center {align-items: center;}
|
||||
.justify-content-space {justify-content: space-between;}
|
||||
.justify-content-even {justify-content: space-evenly;}
|
||||
|
||||
|
||||
|
||||
/* buttons */
|
||||
.btns .btn {opacity: 0; float: left; line-height: 1; margin: 0 3px 3px 0}
|
||||
.ie8 .btns .btn {filter: alpha(opacity=0);}
|
||||
.btns .btn { float: left; line-height: 1; margin: 0 3px 3px 0}
|
||||
.btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
|
||||
.bg-gray { color:#fff; background-color: #555; fill: #555 }
|
||||
.btn.active { background-color: #2196F3 }
|
||||
.featurettes .btn, .featurettes .btn:hover, .featurettes .btn:active, .featurettes .btn:focus,
|
||||
.btn:hover, .btn:active, .btn:focus { color: #fff; }
|
||||
.btn:hover, .btn:active, .btn:focus { text-decoration: none; background-color: #777}
|
||||
.btn-olive, .bg-olive {background-color: #9C27B0; color: #fff; fill: #9C27B0} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #673AB7 }
|
||||
.btn-olive, .bg-olive {background-color: #9C27B0; color: #fff; fill: #9C27B0} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #FF5722 }
|
||||
.btn-indigo, .bg-indigo { background-color: #673AB7; color: #fff; fill: #673AB7} .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus { background-color: #ffd626; color:#000 }
|
||||
.btn-green, .bg-green { background-color: #4CAF50; color: #fff; fill: #4CAF50} .btn-green:hover, .btn-green:active, .btn-green:focus { background-color: #9C27B0 }
|
||||
.btn-red, .bg-red { background-color: #e91b1f; color: #fff; fill: #e91b1f} .btn-red:hover, .btn-red:active, .btn-red:focus { background-color: #4CAF50 }
|
||||
|
|
@ -316,7 +395,7 @@ hr {
|
|||
|
||||
.btn-group { position: relative; display: inline-block }
|
||||
.btn-group ul {
|
||||
background: #555; max-height: 300px; width: 200px; color: #ccc;
|
||||
background: #555; width: 200px; color: #ccc;
|
||||
position: absolute; bottom: -9999em; left: 0; list-style: none;
|
||||
overflow: auto; padding: 0; z-index: 5
|
||||
}
|
||||
|
|
@ -333,7 +412,7 @@ hr {
|
|||
}
|
||||
.nav .btn-group ul {bottom: auto; top: -999em}
|
||||
.nav .btn-group.open ul {
|
||||
top: 43px;
|
||||
top: 36px;
|
||||
}
|
||||
@media (max-width: 768px){
|
||||
.nav .btn-group.open ul {
|
||||
|
|
@ -388,6 +467,7 @@ pre {
|
|||
border-radius: 4px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
}
|
||||
pre.language-javascript:after,
|
||||
pre.language-clike:after,
|
||||
|
|
@ -420,4 +500,7 @@ kbd {
|
|||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
font-weight: bold
|
||||
}
|
||||
}
|
||||
|
||||
.kute-logo,
|
||||
#rectangle {transform-origin: 50% 50%;}
|
||||
BIN
demo/assets/img/apple-touch-icon.png
Normal file
BIN
demo/assets/img/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
demo/assets/img/favicon.ico
Normal file
BIN
demo/assets/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
56
demo/assets/img/home.svg
Normal file
56
demo/assets/img/home.svg
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{display:none;}
|
||||
.st1{display:none;fill:#2196F3;}
|
||||
</style>
|
||||
<path id="rectangle" class="st0" 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"/>
|
||||
<circle id="circle" class="st0" cx="367.7" cy="377.3" r="210.9"/>
|
||||
<path id="star" class="st0" 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="kute-head" class="st1" 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" class="st0" 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" class="st1" 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="mouth-happy" class="st0" 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" class="st0" 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" class="st0" d="M123.1,221.8c-11.5-9.7-35.1-9.7-46.6,0C65.6,231.2,51,214.7,62,205
|
||||
c19.9-16.8,55.7-16.8,75.6,0C148.6,214.4,133.8,231.5,123.1,221.8z"/>
|
||||
<path id="eye-right-closed" class="st0" 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.8
|
||||
c19.9-16.8,55.7-16.8,75.6,0C365.4,214.4,350.7,231.2,339.7,221.8z"/>
|
||||
<path id="eye-right_1_" class="st0" 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_1_" class="st0" 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"/>
|
||||
<path id="drop-initial" class="st0" d="M505.2,327.1"/>
|
||||
<path id="polygon" d="M447,45.4H153L6.1,300L153,554.6h294L593.9,300L447,45.4z"/>
|
||||
<path id="cat" class="st0" 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.4
|
||||
c5.4,20.5,15.1,42.7,13.6,64.3c-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.4
|
||||
c-12.9,2-25.3,7.4-29.6,9.6c-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.7
|
||||
c-8.8-6-16.5-9.8-16.5-9.8c13.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.1
|
||||
c0,0,25.4-45.8,14.7-60.1c-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.7
|
||||
c0,0-7.4-41.3-27.3-39.7c-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.7
|
||||
c0.9,16.2,15.9,31.2,25.6,42.3l18.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.5
|
||||
c-0.4,1.9-0.8,4-1,6.1c-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.4
|
||||
c-16.5,13.9-25.4,34.4-25.4,53.8c0,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.6
|
||||
c6.8,9.7,14.8,18.6,24.1,26c0,0-24.2,13.8-33,32.7s-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.6
|
||||
c-5.7,9.7-12.8,22.2-7.3,31.4c1.8,2.9,4.8,5.6,9.8,7.7c20.8,8.8,41.2,2.3,50.8-8.4c2.9-3.2,4.8-6.6,5.6-10.3
|
||||
c1.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.2c0.1,0.9,0.4,1.7,0.6,2.4c2,4.5,9.9,17.5,34.8,14.5
|
||||
c12.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.6c-0.8-1.8-1.5-4.1-2.3-6.8c-3.1-8.5-7.7-21.6-10.7-33
|
||||
h0.1c0,0,1.3,0.3,3.4,0.8c11.7,2.8,50.3,11.5,53.1,9.3c3.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.5
|
||||
c14.2-19.8,40.4-58.3,46.4-80.4c7.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.9
|
||||
c8.9-5,25.9-8.4,30.1,4.7c0,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"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
27
demo/assets/img/ms.svg
Normal file
27
demo/assets/img/ms.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" id="multi-morph-example" viewBox="0 0 550 550">
|
||||
<path id="w21" class="st0" d="M192,470.9L0.2,444.6v-98.7V287H108h84V470.9z"/>
|
||||
<path id="w22" class="st0" d="M480,288l-0.1,224l-138.7-19.5L224,476V288h128H480z"/>
|
||||
<path id="w23" class="st0" d="M0.2,256L0,100l99.5-13.5L192,73.9V256H87H0.2z"/>
|
||||
<path id="w24" class="st0" d="M224,69.2l147.7-21.5L479.9,32v224H352H224V69.2z"/>
|
||||
<path id="w11" class="st1" 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="w12" class="st2" 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="w13" class="st3" 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.4L146.4,184.4L146.4,184.4z"/>
|
||||
<path id="w14" class="st4" 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" d="M192,471.9L0.2,445.6V288h87.3h52.3H192V471.9z"/>
|
||||
<path id="s22" class="st0" d="M480,288l-0.1,224L224,476V288H480z"/>
|
||||
<path id="s23" class="st0" d="M0.2,256L0,100l88.7-12.1l103.3-14V256H0.2z"/>
|
||||
<path id="s24" d="M224,69.2L479.9,32v224H354.7h-69.4H224V69.2z"/>
|
||||
<path id="s11" class="st1" 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" class="st5" 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" class="st6" 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" class="st4" 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"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
9
demo/assets/img/rectangle.svg
Normal file
9
demo/assets/img/rectangle.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
<path id="rectangle" class="st0" 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" 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>
|
||||
|
After Width: | Height: | Size: 770 B |
29
demo/assets/img/social.svg
Normal file
29
demo/assets/img/social.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" id="complex-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
|
||||
<path id="symbol-left" d="M155.9,333.4h-55.6c-3.4,0-5.9-1.5-7.3-3.8c-1.5-2.4-1.5-5.5,0-8.5l59.1-104.3c0.1-0.1,0.1-0.2,0-0.3
|
||||
l-37.6-65.1c-1.6-3.1-1.8-6.2-0.3-8.5c1.4-2.3,4.2-3.5,7.6-3.5h55.6c8.5,0,12.7,5.5,15.5,10.4c0,0,38,66.3,38.2,66.7
|
||||
c-2.3,4-60.1,106.2-60.1,106.2C168.2,327.8,164.2,333.4,155.9,333.4z"/>
|
||||
<path id="symbol-left-clone" class="st0" d="M155.9,333.4h-55.6c-3.4,0-5.9-1.5-7.3-3.8c-1.5-2.4-1.5-5.5,0-8.5l59.1-104.3
|
||||
c0.1-0.1,0.1-0.2,0-0.3l-37.6-65.1c-1.6-3.1-1.8-6.2-0.3-8.5c1.4-2.3,4.2-3.5,7.6-3.5h55.6c8.5,0,12.7,5.5,15.5,10.4
|
||||
c0,0,38,66.3,38.2,66.7c-2.3,4-60.1,106.2-60.1,106.2C168.2,327.8,164.2,333.4,155.9,333.4z"/>
|
||||
<path id="symbol-right" class="st0" d="M419,75.3L295.8,293.1c-0.1,0.1-0.1,0.3,0,0.4l78.4,143.3c1.6,3.1,1.6,6.2,0.1,8.6
|
||||
c-1.4,2.3-4,3.6-7.4,3.6h-55.6c-8.5,0-12.8-5.7-15.5-10.6c0,0-78.8-144.6-79.1-145c3.9-7,123.8-219.5,123.8-219.5
|
||||
c3-5.4,6.6-10.6,14.9-10.6h56.2c3.4,0,6,1.3,7.4,3.6C420.5,69.1,420.5,72.2,419,75.3L419,75.3z"/>
|
||||
<path id="eye-right" class="st0" 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.1
|
||||
c0,16.2-5.3,30.5-13.5,39.2c-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.2
|
||||
c-7.9-8.7-13-22.8-13-38.7c0-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 id="eye-left" class="st0" 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 id="mouth" 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 id="rectangle-container" class="st2" 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 id="circle-container" class="st0" d="M0,256c0,100.9,59.8,165.3,72,177.9c11.2,11.6,77.7,78.1,184,78.1
|
||||
c14.5,0,115.8-1.7,190.7-85.3C510.1,356,512,274.1,512,256c0-18.9-2.1-96.7-61-165.9C375.7,1.8,269.4,0,256,0
|
||||
C241,0,141.3,1.7,66.6,83.7C1.9,154.8,0,237.9,0,256z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
11
demo/assets/js/backgroundPosition.js
Normal file
11
demo/assets/js/backgroundPosition.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* BACKGROUND POSITION EXAMPLE */
|
||||
var bgPos = document.getElementById('bgPos'),
|
||||
bgBox = bgPos.querySelector('.example-box'),
|
||||
bgb = bgPos.querySelector('.btn'),
|
||||
bpTween = KUTE.to(bgBox, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
|
||||
|
||||
bgb.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!bpTween.playing && bpTween.start();
|
||||
},false);
|
||||
/* BACKGROUND POSITION EXAMPLE */
|
||||
12
demo/assets/js/borderRadius.js
Normal file
12
demo/assets/js/borderRadius.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
/* RADIUS EXAMPLES */
|
||||
var radiusBtn = document.getElementById('radiusBtn');
|
||||
var allRadius = KUTE.to('#allRadius',{borderRadius:80},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
radiusBtn.addEventListener('click',function(){
|
||||
if (!allRadius.playing) { allRadius.start(); tlRadius.start(); trRadius.start(); blRadius.start(); brRadius.start(); }
|
||||
}, false);
|
||||
/* RADIUS EXAMPLES */
|
||||
49
demo/assets/js/boxModel.js
Normal file
49
demo/assets/js/boxModel.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* BOX MODEL EXAMPLE */
|
||||
var boxModel = document.getElementById('boxModel'),
|
||||
btb = boxModel.querySelector('.btn'),
|
||||
box = boxModel.querySelector('.example-box-model');
|
||||
|
||||
// built the tween objects
|
||||
var bm1 = KUTE.to(box,{width:250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onWidth});
|
||||
var bm2 = KUTE.to(box,{height:250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onHeight});
|
||||
var bm3 = KUTE.to(box,{left:250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onLeft});
|
||||
var bm4 = KUTE.to(box,{top:-250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onTop, onComplete: onComplete});
|
||||
|
||||
var bm5 = KUTE.to(box,{marginTop:50},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onMarginTop});
|
||||
var bm6 = KUTE.to(box,{marginBottom:50},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onMarginBottom});
|
||||
var bm7 = KUTE.to(box,{paddingTop:15},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onPadding});
|
||||
var bm8 = KUTE.to(box,{marginTop:50,marginLeft:50,marginBottom:70},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onMargin, onComplete: onComplete});
|
||||
|
||||
// chain the bms
|
||||
try{
|
||||
bm1.chain(bm2);
|
||||
bm2.chain(bm3);
|
||||
bm3.chain(bm4);
|
||||
bm4.chain(bm5);
|
||||
bm5.chain(bm6);
|
||||
bm6.chain(bm7);
|
||||
bm7.chain(bm8);
|
||||
}catch(e){
|
||||
console.error(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
//callback functions
|
||||
function onWidth() { box.innerHTML = 'WIDTH<br>'+parseInt(box.offsetWidth)+'px'; }
|
||||
function onHeight() { box.innerHTML = 'HEIGHT<br>'+parseInt(box.offsetHeight)+'px'; }
|
||||
function onLeft() { box.innerHTML = 'LEFT<br>'+parseInt(box.offsetLeft)+'px'; }
|
||||
function onTop() { box.innerHTML = 'TOP<br>'+parseInt(box.offsetTop)+'px'; }
|
||||
|
||||
function onMarginTop() { box.innerHTML = parseInt(box.style.marginTop)+'px'+'<br>MARGIN'; }
|
||||
function onMarginBottom() { box.innerHTML = 'MARGIN<br>'+parseInt(box.style.marginBottom)+'px'; }
|
||||
function onPadding() { box.innerHTML = parseInt(box.style.paddingTop)+'px<br>PADDING'; }
|
||||
function onMargin() { box.innerHTML = 'MARGIN<br>'+parseInt(box.style.marginTop)+'px'; }
|
||||
|
||||
function onComplete() { box.innerHTML = 'BOX<br> MODEL '; }
|
||||
|
||||
btb.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing
|
||||
!bm5.playing && !bm6.playing && !bm7.playing && !bm8.playing
|
||||
&& bm1.start();
|
||||
},false);
|
||||
/* BOX MODEL EXAMPLE */
|
||||
25
demo/assets/js/clipProperty.js
Normal file
25
demo/assets/js/clipProperty.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
/* CLIP EXAMPLE */
|
||||
var clipExample = document.getElementById('clip'),
|
||||
clipElement = clipExample.querySelector('.example-box'),
|
||||
clpbtn = clipExample.querySelector('.btn');
|
||||
|
||||
var clp1 = KUTE.to(clipElement, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
|
||||
var clp2 = KUTE.to(clipElement, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
|
||||
var clp3 = KUTE.to(clipElement, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
|
||||
var clp4 = KUTE.to(clipElement, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});
|
||||
|
||||
//chain some clps
|
||||
try{
|
||||
clp1.chain(clp2);
|
||||
clp2.chain(clp3);
|
||||
clp3.chain(clp4);
|
||||
}catch(e){
|
||||
console.error(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
clpbtn.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!clp1.playing && !clp2.playing && !clp3.playing && !clp4.playing && clp1.start();
|
||||
},false);
|
||||
/* CLIP EXAMPLE */
|
||||
39
demo/assets/js/colorProperties.js
Normal file
39
demo/assets/js/colorProperties.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
/* COLORS EXAMPLE */
|
||||
var colBox = document.getElementById('colBox'),
|
||||
colBoxElement = colBox.querySelector('.example-box'),
|
||||
colbtn = colBox.querySelector('.btn');
|
||||
|
||||
var colTween1 = KUTE.to(colBoxElement, {color: '#9C27B0'}, {duration: 1000});
|
||||
var colTween2 = KUTE.to(colBoxElement, {backgroundColor: '#069'}, {duration: 1000});
|
||||
var colTween3 = KUTE.to(colBoxElement, {color: '#fff'}, {duration: 1000});
|
||||
var colTween4 = KUTE.to(colBoxElement, {backgroundColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween5 = KUTE.to(colBoxElement, {borderColor: '#069'}, {duration: 1000});
|
||||
var colTween6 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween7 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween8 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween9 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween10 = KUTE.to(colBoxElement, {outlineColor: '#9C27B0'}, {duration: 1000, repeat: 1, yoyo: true});
|
||||
|
||||
|
||||
try {
|
||||
colTween1.chain(colTween2);
|
||||
colTween2.chain(colTween3);
|
||||
colTween3.chain(colTween4);
|
||||
colTween4.chain(colTween5);
|
||||
colTween5.chain(colTween6);
|
||||
colTween6.chain(colTween7);
|
||||
colTween7.chain(colTween8);
|
||||
colTween8.chain(colTween9);
|
||||
colTween9.chain(colTween10);
|
||||
} catch(e){
|
||||
console.error(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
|
||||
colbtn.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing
|
||||
!colTween5.playing && !colTween6.playing && !colTween7.playing && !colTween8.playing
|
||||
!colTween9.playing && !colTween10.playing && colTween1.start();
|
||||
},false);
|
||||
/* COLORS EXAMPLE */
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
// some regular checking
|
||||
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
|
||||
isIE8 = isIE === 8,
|
||||
isIE9 = isIE === 9;
|
||||
|
||||
|
||||
/* RADIUS EXAMPLES */
|
||||
var radiusBtn = document.getElementById('radiusBtn');
|
||||
var allRadius = KUTE.to('#allRadius',{borderRadius:80},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
|
||||
radiusBtn.addEventListener('click',function(){
|
||||
if (!allRadius.playing) { allRadius.start(); tlRadius.start(); trRadius.start(); blRadius.start(); brRadius.start(); }
|
||||
}, false);
|
||||
/* RADIUS EXAMPLES */
|
||||
|
||||
|
||||
/* BOX MODEL EXAMPLE */
|
||||
var boxModel = document.getElementById('boxModel'),
|
||||
btb = boxModel.querySelector('.btn'),
|
||||
box = boxModel.querySelector('.example-box-model');
|
||||
|
||||
// built the tween objects
|
||||
var bm1 = KUTE.to(box,{marginTop:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginTop});
|
||||
var bm2 = KUTE.to(box,{marginBottom:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginBottom});
|
||||
var bm3 = KUTE.to(box,{paddingTop:15},{ yoyo: true, repeat: 1, duration: 1500, update: onPadding});
|
||||
var bm4 = KUTE.to(box,{marginTop:50,marginLeft:50,marginBottom:70},{ yoyo: true, repeat: 1, duration: 1500, update: onMargin, complete: onComplete});
|
||||
|
||||
// chain the bms
|
||||
bm1.chain(bm2);
|
||||
bm2.chain(bm3);
|
||||
bm3.chain(bm4);
|
||||
|
||||
|
||||
//callback functions
|
||||
function onMarginTop() { box.innerHTML = parseInt(box.style.marginTop)+'px'+'<br>MARGIN'; }
|
||||
function onMarginBottom() { box.innerHTML = 'MARGIN<br>'+parseInt(box.style.marginBottom)+'px'; }
|
||||
function onPadding() { box.innerHTML = parseInt(box.style.paddingTop)+'px<br>PADDING'; }
|
||||
function onMargin() { box.innerHTML = 'MARGIN<br>'+parseInt(box.style.marginTop)+'px'; }
|
||||
|
||||
function onComplete() { box.innerHTML = 'BOX<br> MODEL '; }
|
||||
|
||||
btb.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing && bm1.start();
|
||||
},false);
|
||||
/* BOX MODEL EXAMPLE */
|
||||
|
||||
|
||||
/* TEXT PROPERTIES EXAMPLE */
|
||||
var textProperties = document.getElementById('textProperties'),
|
||||
heading = textProperties.querySelector('h1'),
|
||||
button = textProperties.querySelectorAll('.btn')[0],
|
||||
tbt = textProperties.querySelectorAll('.btn')[1],
|
||||
|
||||
// let's split the heading text by character
|
||||
chars = heading.innerHTML.split('');
|
||||
|
||||
// wrap the splits into spans and build an object with these spans
|
||||
heading.innerHTML = '<span style="filter: alpha(opacity:0)">' + chars.join('</span><span>') + '</span>';
|
||||
var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;
|
||||
|
||||
|
||||
// built the tween objects
|
||||
var buttonTween = KUTE.fromTo(button,
|
||||
{width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40},
|
||||
{width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20}),
|
||||
headingTween = KUTE.fromTo(heading, {opacity:0}, {opacity:1}),
|
||||
tps = KUTE.allFromTo(charsObject,
|
||||
{ height: 50, fontSize:80, letterSpacing: 20},
|
||||
{ height: 35, fontSize:50, letterSpacing: 0},
|
||||
{ offset: 250, duration: 500, easing: 'easingCubicOut'});
|
||||
|
||||
tps.tweens[tps.tweens.length-1].chain(buttonTween);
|
||||
|
||||
tbt.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if (!headingTween.playing && !tps.playing ) {
|
||||
if (isIE8) { button.style.filter ="alpha(opacity=0)"; heading.style.filter ="alpha(opacity=0)"; } else { button.style.opacity = ''; heading.style.opacity = ''; }
|
||||
headingTween.start();
|
||||
tps.start();
|
||||
}
|
||||
},false);
|
||||
/* TEXT PROPERTIES EXAMPLE */
|
||||
|
||||
|
||||
/* COLORS EXAMPLE */
|
||||
var colBox = document.getElementById('colBox'),
|
||||
colBoxElement = colBox.querySelector('.example-box'),
|
||||
colbtn = colBox.querySelector('.btn');
|
||||
|
||||
var colTween1 = KUTE.to(colBoxElement, {borderColor: '#069'}, {duration: 1000});
|
||||
var colTween2 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween3 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween4 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween5 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
|
||||
var colTween6 = KUTE.to(colBoxElement, {outlineColor: '#9C27B0'}, {duration: 1000, repeat: 1, yoyo: true});
|
||||
|
||||
colTween1.chain(colTween2);
|
||||
colTween2.chain(colTween3);
|
||||
colTween3.chain(colTween4);
|
||||
colTween4.chain(colTween5);
|
||||
colTween5.chain(colTween6);
|
||||
|
||||
|
||||
colbtn.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing && !colTween5.playing && !colTween6.playing && colTween1.start();
|
||||
},false);
|
||||
/* COLORS EXAMPLE */
|
||||
|
||||
|
||||
/* CLIP EXAMPLE */
|
||||
var clipExample = document.getElementById('clip'),
|
||||
clipElement = clipExample.querySelector('.example-box'),
|
||||
clpbtn = clipExample.querySelector('.btn');
|
||||
|
||||
var clp1 = KUTE.to(clipElement, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
|
||||
var clp2 = KUTE.to(clipElement, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
|
||||
var clp3 = KUTE.to(clipElement, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
|
||||
var clp4 = KUTE.to(clipElement, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});
|
||||
|
||||
//chain some clps
|
||||
clp1.chain(clp2);
|
||||
clp2.chain(clp3);
|
||||
clp3.chain(clp4);
|
||||
|
||||
clpbtn.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!clp1.playing && !clp2.playing && !clp3.playing && !clp4.playing && clp1.start();
|
||||
},false);
|
||||
/* CLIP EXAMPLE */
|
||||
|
||||
|
||||
/* BACKGROUND POSITION EXAMPLE */
|
||||
var bgPos = document.getElementById('bgPos'),
|
||||
bgBox = bgPos.querySelector('.example-box'),
|
||||
bgb = bgPos.querySelector('.btn'),
|
||||
bpTween = KUTE.to(bgBox, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
|
||||
|
||||
bgb.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!bpTween.playing && bpTween.start();
|
||||
},false);
|
||||
/* BACKGROUND POSITION EXAMPLE */
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
// some regular checking
|
||||
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
|
||||
isIE8 = isIE === 8,
|
||||
isIE9 = isIE === 9;
|
||||
|
||||
/* EASINGS EXAMPLES */
|
||||
var featurettes = document.querySelectorAll('.featurettes'), l=featurettes.length,
|
||||
esProp1 = isIE && isIE < 9 ? { left:0 } : { translate: 0},
|
||||
esProp2 = isIE && isIE < 9 ? { left:250 } : { translate: 250},
|
||||
tweenEasingElements = [], easings = [], startEasingTween = [], easingSelectButton = [], tweenEasing1 = [], tweenEasing2 = [];
|
||||
|
||||
// populate tween objects, triggers, elements
|
||||
for (var i=0; i<l; i++) {
|
||||
tweenEasingElements.push(featurettes[i].querySelectorAll('.easing-example'));
|
||||
easings.push(featurettes[i].querySelector('.easings'));
|
||||
startEasingTween.push(featurettes[i].querySelector('.startEasingTween'));
|
||||
easingSelectButton.push(featurettes[i].querySelector('.easingSelectButton'));
|
||||
tweenEasing1.push(KUTE.fromTo(featurettes[i].querySelectorAll('.easing-example')[0], esProp1, esProp2, { duration: 1000, easing: 'linear', repeat: 1, yoyo: true}));
|
||||
tweenEasing2.push(KUTE.fromTo(featurettes[i].querySelectorAll('.easing-example')[1], esProp1, esProp2, { duration: 1000, easing: 'linear', repeat: 1, yoyo: true}));
|
||||
}
|
||||
|
||||
// override core processEasing to be able to use predefined bezier and physics functions
|
||||
KUTE.processEasing = function (fn) { //process easing function
|
||||
if ( typeof fn === 'function') {
|
||||
return fn;
|
||||
} else if ( typeof fn === 'string' ) {
|
||||
if ( /easing|linear/.test(fn) ) {
|
||||
return window.Easing[fn]; // regular Robert Penner Easing Functions
|
||||
} else if ( /bezier/.test(fn) ) {
|
||||
var bz = fn.replace(/bezier|\s|\(|\)/g,'').split(',');
|
||||
return window.Bezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 ); //bezier fn
|
||||
} else if ( /physics/.test(fn) ) {
|
||||
return window.Physics[fn].apply(this); // predefined physics bezier based fn functions
|
||||
} else {
|
||||
return window.Ease[fn].apply(this); // predefined bezier based fn functions
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// update tween objects and update dropdown
|
||||
for (var j=0; j<l; j++) {
|
||||
function cHandler(e){
|
||||
var es = e.target.innerHTML, g = window,
|
||||
_j = easingSelectButton.indexOf(e.target.parentNode.parentNode.querySelector('.easingSelectButton'));
|
||||
easingSelectButton[_j].innerHTML = es;
|
||||
tweenEasingElements[_j][1].innerHTML = es;
|
||||
if (es === 'gravity') {
|
||||
tweenEasing2[_j].options.easing = g.gravity({elasticity:200,bounciness:600});
|
||||
} else if (es === 'forceWithGravity') {
|
||||
tweenEasing2[_j].options.easing = g.forceWithGravity({elasticity:100,bounciness:600});
|
||||
} else if (es === 'spring') {
|
||||
tweenEasing2[_j].options.easing = g.spring({friction:100,frequency:600});
|
||||
} else if (es === 'bounce') {
|
||||
tweenEasing2[_j].options.easing = g.bounce({friction:100,frequency:600});
|
||||
} else if (es === 'bezier') {
|
||||
tweenEasing2[_j].options.easing = g.BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
|
||||
} else if (es === 'multiPointBezier') {
|
||||
tweenEasing2[_j].options.easing = g.BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
|
||||
} else {
|
||||
tweenEasing2[_j].options.easing = KUTE.processEasing(es) || KUTE.processEasing('linear');
|
||||
}
|
||||
}
|
||||
easings[j].addEventListener('click', cHandler, false);
|
||||
}
|
||||
|
||||
// attach click handlers to start buttons
|
||||
for (var k=0; k<l; k++) {
|
||||
function sHandler(e){
|
||||
var _k = startEasingTween.indexOf(e.target);
|
||||
e.preventDefault();
|
||||
!tweenEasing1[_k].playing && tweenEasing1[_k].start();
|
||||
!tweenEasing2[_k].playing && tweenEasing2[_k].start();
|
||||
}
|
||||
startEasingTween[k].addEventListener('click', sHandler, false);
|
||||
}
|
||||
|
||||
/* EASINGS EXAMPLES */
|
||||
|
|
@ -1,273 +0,0 @@
|
|||
// some regular checking
|
||||
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
|
||||
isIE8 = isIE === 8,
|
||||
isIE9 = isIE === 9;
|
||||
|
||||
|
||||
/* TRANSFORMS EXAMPLES */
|
||||
var translateExamples = document.getElementById('translate-examples'),
|
||||
translateBtn = translateExamples.querySelector('.btn'),
|
||||
tr2d = translateExamples.getElementsByTagName('div')[0],
|
||||
trx = translateExamples.getElementsByTagName('div')[1],
|
||||
trry = translateExamples.getElementsByTagName('div')[2],
|
||||
trz = translateExamples.getElementsByTagName('div')[3],
|
||||
tr2dTween = KUTE.to(tr2d, {translate:[170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
trryTween = KUTE.to(trry, {translate3d:[0,170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
trzTween = KUTE.to(trz, {translate3d:[0,0,-100]}, {perspective:200, easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
|
||||
translateBtn.addEventListener('click', function(){
|
||||
!tr2dTween.playing && tr2dTween.start();
|
||||
!trxTween.playing && trxTween.start();
|
||||
!trryTween.playing && trryTween.start();
|
||||
!trzTween.playing && trzTween.start();
|
||||
}, false);
|
||||
|
||||
var rotExamples = document.getElementById('rotExamples'),
|
||||
rotBtn = rotExamples.querySelector('.btn'),
|
||||
r2d = rotExamples.querySelectorAll('div')[0],
|
||||
rx = rotExamples.querySelectorAll('div')[1],
|
||||
ry = rotExamples.querySelectorAll('div')[2],
|
||||
rz = rotExamples.querySelectorAll('div')[3],
|
||||
r2dTween = KUTE.to(r2d, {rotate:-720}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
rxTween = KUTE.to(rx, {rotateX:180}, {easing:'linear', yoyo:true, repeat: 1, duration:1500}),
|
||||
ryTween = KUTE.to(ry, {rotateY:-180,scale:1.5}, {perspective:200, easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
rzTween = KUTE.to(rz, {rotateZ:360}, {easing:'easingBounceOut', yoyo:true, repeat: 1, duration:1500});
|
||||
rotBtn.addEventListener('click', function(){
|
||||
!r2dTween.playing && r2dTween.start();
|
||||
!rxTween.playing && rxTween.start();
|
||||
!ryTween.playing && ryTween.start();
|
||||
!rzTween.playing && rzTween.start();
|
||||
}, false);
|
||||
|
||||
var skewExamples = document.getElementById('skewExamples'),
|
||||
skewBtn = skewExamples.querySelector('.btn'),
|
||||
sx = skewExamples.querySelectorAll('div')[0],
|
||||
sy = skewExamples.querySelectorAll('div')[1],
|
||||
sxTween = KUTE.to(sx, {skewX:-25}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
syTween = KUTE.to(sy, {skewY:25}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500});
|
||||
skewBtn.addEventListener('click', function(){
|
||||
!sxTween.playing && sxTween.start();
|
||||
!syTween.playing && syTween.start();
|
||||
}, false);
|
||||
|
||||
var mixTransforms = document.getElementById('mixTransforms'),
|
||||
skewBtn = mixTransforms.querySelector('.btn'),
|
||||
mt1 = mixTransforms.querySelectorAll('div')[0],
|
||||
mt2 = mixTransforms.querySelectorAll('div')[1],
|
||||
pp = KUTE.property('perspective'),
|
||||
tfp = KUTE.property('transform'),
|
||||
tfo = KUTE.property('transformOrigin'),
|
||||
mt1Tween = KUTE.to(mt1, {translateX:200,rotateX:360,rotateY:15,rotateZ:5}, { perspective:400, easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
mt2Tween = KUTE.to(mt2, {translateX:-200,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500});
|
||||
|
||||
mt1.style[tfo] = '50% 50% 0px'; mt1.style[tfp] = 'perspective(400px) translateX(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)';
|
||||
mt2.style[tfo] = '50% 50% -200px'; mt2.parentNode.style[pp] = '400px';
|
||||
skewBtn.addEventListener('click', function(){
|
||||
!mt1Tween.playing && mt1Tween.start();
|
||||
!mt2Tween.playing && mt2Tween.start();
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
/* TRANSFORMS EXAMPLES */
|
||||
|
||||
|
||||
/* CHAINED TWEENS EXAMPLE */
|
||||
var chainedTweens = document.getElementById('chainedTweens'),
|
||||
el1 = chainedTweens.querySelectorAll('.example-item')[0],
|
||||
el2 = chainedTweens.querySelectorAll('.example-item')[1],
|
||||
el3 = chainedTweens.querySelectorAll('.example-item')[2],
|
||||
ctb = chainedTweens.querySelector('.btn');
|
||||
|
||||
// built the tween objects for element1
|
||||
var tween11 = KUTE.fromTo(el1, {translateX:0, rotateX: 0}, {translateX:100, rotateX: 25}, {perspective:100, duration: 2000});
|
||||
var tween12 = KUTE.fromTo(el1, {translateY:0, rotateY: 0}, {translateY:20, rotateY: 15}, {perspective:100, duration: 2000});
|
||||
var tween13 = KUTE.fromTo(el1, {translate3d:[100,20,0], rotateX: 25, rotateY:15}, {translate3d:[0,0,0], rotateX: 0, rotateY:0}, {perspective:100, duration: 2000});
|
||||
|
||||
// chain tweens
|
||||
tween11.chain(tween12);
|
||||
tween12.chain(tween13);
|
||||
|
||||
// built the tween objects for element2
|
||||
var tween21 = KUTE.fromTo(el2, {translateX:0, translateY:0, rotateX: 0, rotateY:0 }, {translateX:150, translateY:0, rotateX: 25, rotateY:0}, {perspective:100, duration: 2000});
|
||||
var tween22 = KUTE.fromTo(el2, {translateX:150, translateY:0, rotateX: 25, rotateY: 0}, {translateX:150, translateY:20, rotateX: 25, rotateY: 15}, {perspective:100, duration: 2000});
|
||||
var tween23 = KUTE.fromTo(el2, {translate3d:[150,20,0], rotateX: 25, rotateY:15}, {translate3d:[0,0,0], rotateX: 0, rotateY:0}, {perspective:100, duration: 2000});
|
||||
|
||||
// chain tweens
|
||||
tween21.chain(tween22);
|
||||
tween22.chain(tween23);
|
||||
|
||||
// built the tween objects for element3
|
||||
var tween31 = KUTE.to(el3,{translateX:200, rotateX: 25}, {perspective:100, duration: 2000});
|
||||
var tween32 = KUTE.to(el3,{translate3d:[200,20,0], rotateY: 15}, {perspective:100, duration: 2000});
|
||||
var tween33 = KUTE.to(el3,{translate3d:[0,0,0], rotateX: 0, rotateY:0}, {perspective:100, duration: 2000});
|
||||
|
||||
// chain tweens
|
||||
tween31.chain(tween32); tween32.chain(tween33);
|
||||
|
||||
ctb.addEventListener('click',function(e){
|
||||
e.preventDefault();
|
||||
!tween11.playing && !tween12.playing && !tween13.playing && tween11.start();
|
||||
!tween21.playing && !tween22.playing && !tween23.playing && tween21.start();
|
||||
!tween31.playing && !tween32.playing && !tween33.playing && tween31.start();
|
||||
},false);
|
||||
/* CHAINED TWEENS EXAMPLE */
|
||||
|
||||
|
||||
/* BOX MODEL EXAMPLE */
|
||||
var boxModel = document.getElementById('boxModel'),
|
||||
btb = boxModel.querySelector('.btn'),
|
||||
box = boxModel.querySelector('.example-box');
|
||||
|
||||
// built the tween objects
|
||||
var bm1 = KUTE.to(box,{width:250},{ yoyo: true, repeat: 1, duration: 1500, update: onWidth});
|
||||
var bm2 = KUTE.to(box,{height:250},{ yoyo: true, repeat: 1, duration: 1500, update: onHeight});
|
||||
var bm3 = KUTE.to(box,{left:250},{ yoyo: true, repeat: 1, duration: 1500, update: onLeft});
|
||||
var bm4 = KUTE.to(box,{top:-250},{ yoyo: true, repeat: 1, duration: 1500, update: onTop, complete: onComplete});
|
||||
|
||||
// chain the bms
|
||||
bm1.chain(bm2);
|
||||
bm2.chain(bm3);
|
||||
bm3.chain(bm4);
|
||||
|
||||
|
||||
//callback functions
|
||||
function onWidth() { box.innerHTML = 'WIDTH<br>'+parseInt(box.offsetWidth)+'px'; }
|
||||
function onHeight() { box.innerHTML = 'HEIGHT<br>'+parseInt(box.offsetHeight)+'px'; }
|
||||
function onLeft() { box.innerHTML = 'LEFT<br>'+parseInt(box.offsetLeft)+'px'; }
|
||||
function onTop() { box.innerHTML = 'TOP<br>'+parseInt(box.offsetTop)+'px'; }
|
||||
|
||||
function onComplete() { box.innerHTML = 'BOX<br>MODEL'; }
|
||||
|
||||
btb.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing && bm1.start();
|
||||
},false);
|
||||
/* BOX MODEL EXAMPLE */
|
||||
|
||||
|
||||
/* COLORS EXAMPLE */
|
||||
var colBox = document.getElementById('colBox'),
|
||||
colBoxElement = colBox.querySelector('.example-box'),
|
||||
colbtn = colBox.querySelector('.btn');
|
||||
|
||||
var colTween1 = KUTE.to(colBoxElement, {color: '#9C27B0'}, {duration: 1000});
|
||||
var colTween2 = KUTE.to(colBoxElement, {backgroundColor: '#069'}, {duration: 1000, keepHex: true});
|
||||
var colTween3 = KUTE.to(colBoxElement, {color: '#fff'}, {duration: 1000});
|
||||
var colTween4 = KUTE.to(colBoxElement, {backgroundColor: '#9C27B0'}, {duration: 1000, keepHex: true});
|
||||
|
||||
colTween1.chain(colTween2);
|
||||
colTween2.chain(colTween3);
|
||||
colTween3.chain(colTween4);
|
||||
|
||||
colbtn.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing && colTween1.start();
|
||||
},false);
|
||||
/* COLORS EXAMPLE */
|
||||
|
||||
|
||||
/* CROSS BROWSER EXAMPLE */
|
||||
// grab an HTML element to build a tween object for it
|
||||
var element = document.getElementById("myElement");
|
||||
|
||||
// create values and options objects
|
||||
var startValues = {}, endValues = {}, options = {};
|
||||
|
||||
// here we define properties that are commonly supported
|
||||
startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
|
||||
|
||||
// here we define the properties according to the target browsers
|
||||
if (isIE8) { // or any other browser that doesn"t support transforms
|
||||
startValues.opacity = 1; endValues.opacity = 0.1;
|
||||
startValues.left = 0; endValues.left = 250;
|
||||
startValues.backgroundColor = '#ffd626'; endValues.backgroundColor = '#ec1e71';
|
||||
} else if (isIE9) { // or any other browser that only support 2d transforms
|
||||
startValues.translate = 0; endValues.translate = 250; // 2d translate on X axis
|
||||
startValues.rotate = 0; endValues.rotate = 180; // 2d rotation on Z axis
|
||||
startValues.scale = 1; endValues.scale = 1.5; // 2d scale
|
||||
} else { // most modern browsers
|
||||
startValues.translate3d = [0,0,0]; endValues.translate3d = [250,0,0]; //3d translation on X axis
|
||||
startValues.rotateZ = 0; endValues.rotateZ = 180; // 3d rotation on Z axis
|
||||
startValues.rotateX = 0; endValues.rotateX = -70; // 3d rotation on X axis
|
||||
startValues.scale = 1; endValues.scale = 1.5; // 2d scale
|
||||
options.perspective = 600; // 3d transform option
|
||||
}
|
||||
|
||||
// common tween options
|
||||
options.easing = "easingSinusoidalInOut";
|
||||
options.yoyo = true;
|
||||
options.repeat = 1;
|
||||
options.duration = 2500;
|
||||
|
||||
// the cached object
|
||||
var myTween = KUTE.fromTo(element, startValues, endValues, options);
|
||||
|
||||
// trigger buttons
|
||||
var startButton = document.getElementById('startButton'),
|
||||
stopButton = document.getElementById('stopButton'),
|
||||
playPauseButton = document.getElementById('playPauseButton');
|
||||
|
||||
// add handlers for the trigger buttons
|
||||
startButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if (!myTween.playing) { myTween.start(); }
|
||||
}, false);
|
||||
stopButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if (myTween.playing) { myTween.stop(); }
|
||||
}, false);
|
||||
playPauseButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if (!myTween.paused && myTween.playing) {
|
||||
myTween.pause(); playPauseButton.innerHTML = 'Resume';
|
||||
playPauseButton.className = playPauseButton.className.replace('btn-orange','btn-olive');
|
||||
} else {
|
||||
myTween.resume();
|
||||
playPauseButton.innerHTML = 'Pause';
|
||||
playPauseButton.className = playPauseButton.className.replace('btn-olive','btn-orange');
|
||||
}
|
||||
}, false);
|
||||
|
||||
/* CROSS BROWSER EXAMPLE */
|
||||
|
||||
|
||||
/* MULTI TWEENS EXAMPLE */
|
||||
var tweenMulti = KUTE.allFromTo('.example-multi',
|
||||
{translate:[0,0], rotate: 0},
|
||||
{translate:[0,-150], rotate: 360},
|
||||
{transformOrigin: '10% 10%', offset: 300, duration: 1000, easing: 'easingCubicOut', repeat: 1, repeatDelay: 1000, yoyo: true}
|
||||
);
|
||||
function startMultiTween() {
|
||||
!tweenMulti.tweens[0].playing && !tweenMulti.tweens[tweenMulti.tweens.length-1].playing && tweenMulti.start();
|
||||
}
|
||||
/* MULTI TWEENS EXAMPLE */
|
||||
|
||||
|
||||
/* EASINGS EXAMPLE */
|
||||
var esProp1 = isIE && isIE < 9 ? { left:0 } : { translate: 0},
|
||||
esProp2 = isIE && isIE < 9 ? { left:250 } : { translate: 250},
|
||||
tweenEasingElements = document.querySelectorAll('.easing-example'),
|
||||
easings = document.getElementById('easings'),
|
||||
startEasingTween = document.getElementById('startEasingTween'),
|
||||
easingSelectButton = document.getElementById('easingSelectButton'),
|
||||
tweenEasing1 = KUTE.fromTo(tweenEasingElements[0], esProp1, esProp2,
|
||||
{ duration: 1000, easing: 'linear', repeat: 1, yoyo: true}),
|
||||
tweenEasing2 = KUTE.fromTo(tweenEasingElements[1], esProp1, esProp2,
|
||||
{ duration: 1000, easing: 'linear', repeat: 1, yoyo: true});
|
||||
|
||||
easings.addEventListener('click',function(e){
|
||||
if (!e.target.className){
|
||||
var es = e.target.innerHTML, g = window;
|
||||
easingSelectButton.innerHTML = es;
|
||||
tweenEasingElements[1].innerHTML = es;
|
||||
tweenEasing2.options.easing = KUTE.processEasing(es) || KUTE.processEasing('linear');
|
||||
}
|
||||
}, false);
|
||||
|
||||
startEasingTween.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
!tweenEasing1.playing && tweenEasing1.start();
|
||||
!tweenEasing2.playing && tweenEasing2.start();
|
||||
}, false);
|
||||
/* EASINGS EXAMPLE */
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
var boxShadow = document.getElementById('boxShadow'),
|
||||
boxBtn = boxShadow.querySelector('.btn'),
|
||||
boxElement = boxShadow.getElementsByTagName('div')[0];
|
||||
|
||||
// tween to a string value
|
||||
var myBSTween1 = KUTE.to(boxElement, {boxShadow: '0px 0px 15px 10px #CDDC39'}, {duration:1000, easing: 'easingCubicInOut'});
|
||||
|
||||
// or a fromTo with string and array, hex and rgb
|
||||
var myBSTween2 = KUTE.fromTo(boxElement, {boxShadow: [0, 0, 15, 10, '#CDDC39']}, {boxShadow: '0px 0px 25px 25px rgb(0,66,99)'}, { duration:2000, easing: 'easingCubicInOut'});
|
||||
var myBSTween3 = KUTE.to(boxElement, {boxShadow: '15px 15px 0px 0px rgb(0,66,99)'}, {duration:2000, easing: 'easingCubicInOut'});
|
||||
var myBSTween4 = KUTE.to(boxElement, {boxShadow: '-15px 15px 0px 10px #E91E63'}, {duration:2000, easing: 'easingCubicInOut'});
|
||||
var myBSTween5 = KUTE.to(boxElement, {boxShadow: '0px 0px 0px 0px rgb(0,0,0)'}, {duration:2000, easing: 'easingCubicInOut'});
|
||||
var myBSTween6 = KUTE.to(boxElement, {boxShadow: [5, 5, 5, '#99A52A', 'inset']}, {duration:2000, easing: 'easingCubicInOut', repeat: 1, yoyo: true, complete: removeInset});
|
||||
myBSTween1.chain(myBSTween2);
|
||||
myBSTween2.chain(myBSTween3);
|
||||
myBSTween3.chain(myBSTween4);
|
||||
myBSTween4.chain(myBSTween5);
|
||||
myBSTween5.chain(myBSTween6);
|
||||
|
||||
function removeInset() {
|
||||
boxElement.style.boxShadow = '0px 0px 0px 0px rgb(0,0,0)';
|
||||
}
|
||||
|
||||
boxBtn.addEventListener('click', function(){
|
||||
!myBSTween1.playing && !myBSTween2.playing && !myBSTween3.playing &&
|
||||
!myBSTween4.playing && !myBSTween5.playing && !myBSTween6.playing && myBSTween1.start();
|
||||
}, false);
|
||||
18
demo/assets/js/filterEffects.js
Normal file
18
demo/assets/js/filterEffects.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
/* FILTER EFFECTS EXAMPLES */
|
||||
var filterExamples = document.getElementById('filter-examples'),
|
||||
filterBtn = filterExamples.querySelector('.btn'),
|
||||
fe1 = filterExamples.getElementsByTagName('div')[0],
|
||||
fe2 = filterExamples.getElementsByTagName('div')[1],
|
||||
fe3 = filterExamples.getElementsByTagName('div')[2],
|
||||
fe4 = filterExamples.getElementsByTagName('div')[3],
|
||||
fe1Tween = KUTE.to(fe1, {filter :{ url: '#mySVGFilter', blur: 0.05, saturate: 10 }}, {easing: 'easingCubicOut', duration: 1500, repeat:1, yoyo: true}),
|
||||
fe2Tween = KUTE.to(fe2, {filter :{ url: '#mySVGFilter', sepia: 50, invert: 80 }}, {easing: 'easingCubicOut', duration: 1500, repeat:1, yoyo: true}),
|
||||
fe3Tween = KUTE.to(fe3, {filter :{ url: '#mySVGFilter', saturate: 150, brightness: 60 }}, {easing: 'easingCubicOut', duration: 1500, repeat:1, yoyo: true}),
|
||||
fe4Tween = KUTE.to(fe4, {filter :{ url: '#mySVGFilter', opacity: 40, hueRotate: 45, dropShadow:[-10,-10,5,{r:0,g:0,b:0,a:1}] }}, {easing: 'easingCubicOut', duration: 1500, repeat:1, yoyo: true});
|
||||
filterBtn.addEventListener('click', function(){
|
||||
!fe1Tween.playing && fe1Tween.start();
|
||||
!fe2Tween.playing && fe2Tween.start();
|
||||
!fe3Tween.playing && fe3Tween.start();
|
||||
!fe4Tween.playing && fe4Tween.start();
|
||||
}, false);
|
||||
|
|
@ -1,110 +1,68 @@
|
|||
// vars
|
||||
var textOpened = false,
|
||||
block = document.getElementById('blocks'),
|
||||
bs = block.querySelectorAll('.bg'),
|
||||
h2 = document.querySelector('h2'),
|
||||
lead = document.querySelector('.lead'),
|
||||
btns = document.querySelector('.btns').querySelectorAll('.btn'),
|
||||
b = block.querySelector('.bg'),
|
||||
isIE = /ie/.test(document.documentElement.className),
|
||||
isIE8 = /ie8/.test(document.documentElement.className),
|
||||
isIE10 = /MSIE|10.0/.test(navigator.userAgent),
|
||||
replay = document.querySelector('.btn.replay');
|
||||
var frontpage = document.getElementsByClassName('frontpage'),
|
||||
rectangle = document.getElementById('rectangle'),
|
||||
star = document.getElementById('star'),
|
||||
hexagon = document.getElementById('hexagon'),
|
||||
cat = document.getElementById('cat'),
|
||||
circle = document.getElementById('circle'),
|
||||
head = document.getElementById('head'),
|
||||
winkyFace = document.getElementById('winky-face'),
|
||||
dropInitial = document.getElementById('drop-initial'),
|
||||
drop = document.getElementById('drop'),
|
||||
mouth = document.getElementById('mouth'),
|
||||
eyeLeft = document.getElementById('eye-left'),
|
||||
eyeRight = document.getElementById('eye-right'),
|
||||
heading = document.querySelector('h2.nomargin'),
|
||||
plead = document.querySelector('p.lead')
|
||||
|
||||
var t0 = KUTE.to(rectangle,{translateX:0, opacity:1 }, { easing:'easingCubicOut'}),
|
||||
t1 = KUTE.fromTo(rectangle,{path:rectangle, attr: {fill: rectangle.getAttribute('fill') }}, {path:star, attr: {fill: star.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t2 = KUTE.fromTo(rectangle,{path:star, rotateZ: 0, attr: {fill: rectangle.getAttribute('fill') }}, {path:hexagon, rotateZ: 360, attr: {fill: hexagon.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t3 = KUTE.fromTo(rectangle,{path:hexagon, attr: {fill: rectangle.getAttribute('fill') }}, {path:cat, attr: {fill: cat.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t4 = KUTE.fromTo(rectangle,{path:cat, attr: {fill: rectangle.getAttribute('fill') }}, {path:circle, attr: {fill: circle.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t5 = KUTE.fromTo(rectangle,{path:circle, attr: {fill: rectangle.getAttribute('fill') }}, {path:head, attr: {fill: head.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t6 = KUTE.fromTo(dropInitial,{path: dropInitial,opacity:1},{path: drop,opacity:1}, {morphPrecision: 5, easing:'easingCubicOut', onComplete: mergeLogo}),
|
||||
t7 = KUTE.to(mouth,{opacity:1}),
|
||||
t8 = KUTE.to(eyeLeft,{opacity:1}),
|
||||
t9 = KUTE.to(eyeRight,{opacity:1}),
|
||||
t10 = KUTE.fromTo(winkyFace,{opacity:0,translateY:50},{opacity:1,translateY:0},{easing:'easingCubicOut'}),
|
||||
t11 = KUTE.to(eyeLeft,{path:'#eye-left-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}),
|
||||
t12 = KUTE.to(eyeRight,{path:'#eye-right-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}),
|
||||
t13 = KUTE.to(mouth,{path:'#mouth-happy'}, {morphPrecision: 5, easing:'easingCubicOut', duration:3500}),
|
||||
loop1 = KUTE.to(rectangle,{ attr: {fill: '#52aef7' }}, {duration: 1500}),
|
||||
loop2 = KUTE.to(rectangle,{ attr: {fill: '#f98f6d' }}, {duration: 1500}),
|
||||
loop3 = KUTE.to(rectangle,{ attr: {fill: '#f95054' }}, {duration: 1500}),
|
||||
loop4 = KUTE.to(rectangle,{ attr: {fill: '#ffd626' }}, {duration: 1500}),
|
||||
loop5 = KUTE.to(rectangle,{ attr: {fill: '#d661ea' }}, {duration: 1500}),
|
||||
showText = KUTE.to(heading,{opacity: 1},{duration: 3000}),
|
||||
showText1 = KUTE.fromTo(heading,{ text: ''},{ text:heading.getAttribute('data-text')},{duration: 1500}),
|
||||
showText2 = KUTE.fromTo(plead,{ text:''}, { text:plead.getAttribute('data-text')},{duration: 3500, onComplete: textComplete}),
|
||||
showBTNS = KUTE.allFromTo('.btns .btn',{opacity: 0, translate3d: [150,50,0]}, {opacity: 1, translate3d: [0,0,0]},{duration: 500, offset: 250, delay: 500, easing: 'easingBackOut'})
|
||||
|
||||
// resize and show the blocks
|
||||
window.addEventListener('load',resizeHandler,false);
|
||||
window.addEventListener('load',showBlocks,false);
|
||||
window.addEventListener('resize',resizeHandler,false);
|
||||
replay.addEventListener('click',runOnClick,false);
|
||||
|
||||
function resizeHandler(e) {
|
||||
var css = window.getComputedStyle(b,null),
|
||||
bw = parseInt(css.width), i = 0;
|
||||
for (i;i<9;i++){
|
||||
bs[i].style.minHeight = bw+'px';
|
||||
if (e.type==='load'){
|
||||
bs[i].style.left = -bw+'px';
|
||||
}
|
||||
}
|
||||
function mergeLogo(){
|
||||
rectangle.setAttribute('d', rectangle.getAttribute('d')+ drop.getAttribute('d') )
|
||||
dropInitial.style.opacity = 0
|
||||
}
|
||||
function textComplete(){
|
||||
heading.removeAttribute('data-text')
|
||||
plead.removeAttribute('data-text')
|
||||
showBTNS.start()
|
||||
}
|
||||
|
||||
function showBlocks() {
|
||||
var i = 0, dl, css = window.getComputedStyle(b),
|
||||
bw = parseInt(css.width), d = isIE || (/%/.test(css.width)) ? 300 : bw*3, ra, fn;
|
||||
for (i;i<9;i++){
|
||||
if ( i === 0 || i === 3 || i === 6 ) {
|
||||
dl = 200 + i*bw;
|
||||
} else if ( i === 1 || i === 4 || i === 7 ) {
|
||||
dl = 400 + i*bw;
|
||||
} else if ( i === 2 || i === 5 || i === 8 ) {
|
||||
dl = 600 + i*bw;
|
||||
}
|
||||
fn = i === 0 ? openTheAnimations : null;
|
||||
ra = i === 8 ? runAnimations : null;
|
||||
KUTE.to(bs[i], {opacity:1,left:0}, {duration: d, delay: dl, complete: ra, easing: 'easingQuadraticOut', start: fn}).start();
|
||||
}
|
||||
}
|
||||
t0.chain(t1)
|
||||
t1.chain(t2)
|
||||
t2.chain(t3)
|
||||
t3.chain(t4)
|
||||
t4.chain([t5,t6])
|
||||
t6.chain([t7,t8,t9])
|
||||
t9.chain([t10,t11,t12,t13])
|
||||
|
||||
function runOnClick() {
|
||||
if ( !/animating/.test(block.className) ) {
|
||||
runAnimations();
|
||||
}
|
||||
}
|
||||
t8.chain([loop1,showText,showText1])
|
||||
showText1.chain(showText2)
|
||||
|
||||
function doBlockAnimations() {
|
||||
var i = 0;
|
||||
for (i;i<9;i++){
|
||||
var rd = getRandomInt(-300,300), rs = getRandomInt(0.1,5), sc = parseFloat(rs*0.5),
|
||||
fn = i===8 ? closeTheAnimations : null,
|
||||
t1 = KUTE.to(bs[i], { translate:rd}, { duration:1500, easing: 'easingQuadraticInOut', delay: 1500 }),
|
||||
t2 = KUTE.to(bs[i], { rotate:720}, { duration:1500, easing: 'easingQuadraticOut' }),
|
||||
t3 = KUTE.fromTo(bs[i], { translate:rd, borderRadius: '0%', scale:1, rotate:720}, { borderRadius: '100%', translate:rd, scale:rs, rotate:0}, { duration:1000, easing: 'easingQuadraticOut' }),
|
||||
t4 = KUTE.to(bs[i], { scale: sc}, { duration:1000, easing: 'easingQuadraticIn' }),
|
||||
t5 = KUTE.fromTo(bs[i], { translate:rd, borderRadius: '100%', scale:sc }, { translate:0, borderRadius: '0%', scale:1 }, { delay: 100, duration:1500, easing: 'easingBounceOut' }),
|
||||
t6 = KUTE.to(bs[i], { backgroundColor: '#fff'}, { easing: 'easingCircularOut', delay: 550+i*50, duration:450, yoyo: true, repeat: 1, complete: fn });
|
||||
|
||||
|
||||
t1.start();
|
||||
t1.chain(t2);
|
||||
t2.chain(t3);
|
||||
t3.chain(t4);
|
||||
t4.chain(t5);
|
||||
t5.chain(t6);
|
||||
loop1.chain(loop2)
|
||||
loop2.chain(loop3)
|
||||
loop3.chain(loop4)
|
||||
loop4.chain(loop5)
|
||||
loop5.chain(loop1)
|
||||
|
||||
}
|
||||
}
|
||||
function openTheAnimations() {
|
||||
if (!/animating/.test(block.className)){
|
||||
replay.style.display = 'none';
|
||||
block.className += ' animating';
|
||||
}
|
||||
}
|
||||
function closeTheAnimations() {
|
||||
if (/animating/.test(block.className)){
|
||||
replay.style.display = 'inline';
|
||||
block.className = block.className.replace( ' animating', '');
|
||||
}
|
||||
}
|
||||
|
||||
function runAnimations() {
|
||||
var fn = !textOpened ? openText : null,
|
||||
t1 = KUTE.fromTo(block,{left:0},{left:150},{duration:1000, easing: 'easingCubicIn', start: openTheAnimations}).start(),
|
||||
t2 = KUTE.fromTo(block,{left:150},{left:0},{duration:2500, easing: 'easingElasticOut', start: openTheAnimations}),
|
||||
t3 = KUTE.fromTo(block,{rotateZ:0,rotateY:-10},{rotateZ:-20,rotateY:25},{duration:2500, easing: 'easingQuadraticInOut'}).start(),
|
||||
t4 = KUTE.fromTo(block,{rotateZ:-20,rotateY:385},{rotateZ:0,rotateY:-10},{duration:3500, delay: 3600, easing: 'easingQuadraticInOut', start: fn});
|
||||
|
||||
t1.chain(t2);
|
||||
t3.chain(t4);
|
||||
|
||||
doBlockAnimations();
|
||||
}
|
||||
|
||||
function openText(){
|
||||
var hd = KUTE.to(h2, {text: 'Welcome Developers!'}, {delay: 4500, duration:2000, easing: 'easingCubicInOut'}).start(),
|
||||
ld = KUTE.to(lead, {text: 'KUTE.js is a Javascript animation engine with <strong>top performance</strong>, memory efficient & modular code. It delivers a whole bunch of tools to help you create great custom animations.'}, {duration:4000, easing: 'easingCubicInOut'});
|
||||
btnst = KUTE.allFromTo(btns, {rotate: 45, opacity: 0 }, { rotate: 0, opacity: 1 }, {transformOrigin: '250px center 0px', offset: 200, duration:700, easing: 'easingCubicInOut'});
|
||||
hd.chain(ld);
|
||||
ld.chain(btnst);
|
||||
textOpened = true;
|
||||
}
|
||||
t0.start()
|
||||
|
|
@ -7,9 +7,14 @@ var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40,fillOpacity:0.3}}
|
|||
var coordinatesTween2 = KUTE.to('#circle', {attr: {cx:110,cy:40}}, { duration: 400, easing: 'linear'});
|
||||
var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75,fillOpacity:1}}, { easing: 'easingCubicOut'});
|
||||
|
||||
coordinatesTween1.chain(coordinatesTween2);
|
||||
coordinatesTween2.chain(coordinatesTween3);
|
||||
coordinatesTween3.chain(radiusTween);
|
||||
try{
|
||||
coordinatesTween1.chain(coordinatesTween2);
|
||||
coordinatesTween2.chain(coordinatesTween3);
|
||||
coordinatesTween3.chain(radiusTween);
|
||||
}catch(e){
|
||||
console.error(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
|
||||
var circleBtn = document.getElementById('circleBtn');
|
||||
circleBtn.addEventListener('click', function(){
|
||||
|
|
@ -23,9 +28,15 @@ var closingGradient = KUTE.to('#gradient',{attr: {x1:'49%', x2:'49%', y1:'49%',
|
|||
var rotatingGradient1 = KUTE.to('#gradient',{attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}}, {easing: 'easingCubicInOut'});
|
||||
var rotatingGradient2 = KUTE.to('#gradient',{attr: {x1:'0%', x2:'51%', y1:'100%', y2:'0%'}}, {easing: 'easingCubicInOut'});
|
||||
var openingGradient = KUTE.to('#gradient',{attr: {x1:'0%', x2:'0%', y1:'0%', y2:'100%'}}, {duration: 1500, easing: 'easingCubicInOut'});
|
||||
closingGradient.chain(rotatingGradient1);
|
||||
rotatingGradient1.chain(rotatingGradient2);
|
||||
rotatingGradient2.chain(openingGradient);
|
||||
|
||||
try{
|
||||
closingGradient.chain(rotatingGradient1);
|
||||
rotatingGradient1.chain(rotatingGradient2);
|
||||
rotatingGradient2.chain(openingGradient);
|
||||
}catch(e){
|
||||
console.error(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
gradBtn.addEventListener('click', function(){
|
||||
!closingGradient.playing && !rotatingGradient1.playing && !rotatingGradient2.playing && !openingGradient.playing && closingGradient.start();
|
||||
});
|
||||
2
demo/assets/js/kute-bezier.min.js
vendored
2
demo/assets/js/kute-bezier.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js | © dnp_theme | Bezier Plugin | MIT-License
|
||||
!function(a,b){if("function"==typeof define&&define.amd)define(["kute.js"],b);else if("object"==typeof module&&"function"==typeof require)module.exports=b(require("kute.js"));else{if("undefined"==typeof a.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js");b(a.KUTE)}}(this,function(a){"use strict";var b="undefined"!=typeof global?global:window;b.Bezier=function(a,b,d,e){return c.pB(a,b,d,e)};var c=b.Bezier.prototype;c.ni=4,c.nms=.001,c.sp=1e-7,c.smi=10,c.ksts=11,c.ksss=1/(c.ksts-1),c.f32as="Float32Array"in b,c.msv=c.f32as?new Float32Array(c.ksts):new Array(c.ksts),c.A=function(a,b){return 1-3*b+3*a},c.B=function(a,b){return 3*b-6*a},c.C=function(a){return 3*a},c.pB=function(a,b,d,e){this._p=!1;var f=this;return function(g){return f._p||c.pc(a,d,b,e),a===b&&d===e?g:0===g?0:1===g?1:c.cB(c.gx(g,a,d),b,e)}},c.cB=function(a,b,d){return((c.A(b,d)*a+c.B(b,d))*a+c.C(b))*a},c.gS=function(a,b,d){return 3*c.A(b,d)*a*a+2*c.B(b,d)*a+c.C(b)},c.bS=function(a,b,d,e,f){var g,h,i=0,j=c.sp,k=c.smi;do h=b+(d-b)/2,g=c.cB(h,e,f)-a,g>0?d=h:b=h;while(Math.abs(g)>j&&++i<k);return h},c.nri=function(a,b,d,e){var f=0,g=c.ni;for(f;f<g;++f){var h=c.gS(b,d,e);if(0===h)return b;var i=c.cB(b,d,e)-a;b-=i/h}return b},c.csv=function(a,b){var d=0,e=c.ksts;for(d;d<e;++d)c.msv[d]=c.cB(d*c.ksss,a,b)},c.gx=function(a,b,d){for(var e=0,f=1,g=c.ksts-1;f!=g&&c.msv[f]<=a;++f)e+=c.ksss;--f;var h=(a-c.msv[f])/(c.msv[f+1]-c.msv[f]),i=e+h*c.ksss,j=c.gS(i,b,d),k=e+c.ksss;return j>=c.nms?c.nri(a,i,b,d):0===j?i:c.bS(a,e,k,b,d)},c.pc=function(a,b,d,e){this._p=!0,a==d&&b==e||c.csv(a,b)},b.Ease={},b.Ease.easeIn=function(){return c.pB(.42,0,1,1)},b.Ease.easeOut=function(){return c.pB(0,0,.58,1)},b.Ease.easeInOut=function(){return c.pB(.5,.16,.49,.86)},b.Ease.easeInSine=function(){return c.pB(.47,0,.745,.715)},b.Ease.easeOutSine=function(){return c.pB(.39,.575,.565,1)},b.Ease.easeInOutSine=function(){return c.pB(.445,.05,.55,.95)},b.Ease.easeInQuad=function(){return c.pB(.55,.085,.68,.53)},b.Ease.easeOutQuad=function(){return c.pB(.25,.46,.45,.94)},b.Ease.easeInOutQuad=function(){return c.pB(.455,.03,.515,.955)},b.Ease.easeInCubic=function(){return c.pB(.55,.055,.675,.19)},b.Ease.easeOutCubic=function(){return c.pB(.215,.61,.355,1)},b.Ease.easeInOutCubic=function(){return c.pB(.645,.045,.355,1)},b.Ease.easeInQuart=function(){return c.pB(.895,.03,.685,.22)},b.Ease.easeOutQuart=function(){return c.pB(.165,.84,.44,1)},b.Ease.easeInOutQuart=function(){return c.pB(.77,0,.175,1)},b.Ease.easeInQuint=function(){return c.pB(.755,.05,.855,.06)},b.Ease.easeOutQuint=function(){return c.pB(.23,1,.32,1)},b.Ease.easeInOutQuint=function(){return c.pB(.86,0,.07,1)},b.Ease.easeInExpo=function(){return c.pB(.95,.05,.795,.035)},b.Ease.easeOutExpo=function(){return c.pB(.19,1,.22,1)},b.Ease.easeInOutExpo=function(){return c.pB(1,0,0,1)},b.Ease.easeInCirc=function(){return c.pB(.6,.04,.98,.335)},b.Ease.easeOutCirc=function(){return c.pB(.075,.82,.165,1)},b.Ease.easeInOutCirc=function(){return c.pB(.785,.135,.15,.86)},b.Ease.easeInBack=function(){return c.pB(.6,-.28,.735,.045)},b.Ease.easeOutBack=function(){return c.pB(.175,.885,.32,1.275)},b.Ease.easeInOutBack=function(){return c.pB(.68,-.55,.265,1.55)},b.Ease.slowMo=function(){return c.pB(0,.5,1,.5)},b.Ease.slowMo1=function(){return c.pB(0,.7,1,.3)},b.Ease.slowMo2=function(){return c.pB(0,.9,1,.1)}});
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
/* KUTE.js - The Light Tweening Engine
|
||||
* package - Box Shadow Plugin
|
||||
* desc - adds support for boxShadow property with an array of values [h-shadow, v-shadow, blur, spread, color, inset]
|
||||
* examples
|
||||
* var bShadowTween1 = KUTE.to('selector', {boxShadow: '1px 1px 1px #069'}); // accepting string value
|
||||
* var bShadowTween2 = KUTE.to('selector', {boxShadow: [1, 1, 1, '#069', 'inset'] }); // accepting array value
|
||||
* by dnp_theme
|
||||
* Licensed under MIT-License
|
||||
*/
|
||||
|
||||
(function (root,factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['kute.js'], factory);
|
||||
} else if(typeof module == 'object' && typeof require == 'function') {
|
||||
module.exports = factory(require('kute.js'));
|
||||
} else if ( typeof root.KUTE !== 'undefined' ) {
|
||||
factory(root.KUTE);
|
||||
} else {
|
||||
throw new Error("Box Shadow Plugin require KUTE.js.");
|
||||
}
|
||||
}(this, function (KUTE) {
|
||||
'use strict';
|
||||
|
||||
// add a reference to KUTE object
|
||||
var g = typeof global !== 'undefined' ? global : window, K = KUTE,
|
||||
// add a reference to KUTE utilities
|
||||
prepareStart = K.prepareStart, parseProperty = K.parseProperty,
|
||||
property = K.property, getCurrentStyle = K.getCurrentStyle, trueColor = K.truC,
|
||||
DOM = K.dom, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolation functions
|
||||
|
||||
// the preffixed boxShadow property, mostly for legacy browsers
|
||||
// maybe the browser is supporting the property with its vendor preffix
|
||||
// box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
|
||||
_boxShadow = property('boxShadow'), // note we're using the KUTE.property() autopreffix utility
|
||||
colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi, // a full RegEx for color strings
|
||||
|
||||
// utility function to process values accordingly
|
||||
// numbers must be integers and color must be rgb object
|
||||
processBoxShadowArray = function(shadow){
|
||||
var newShadow, i;
|
||||
|
||||
if (shadow.length === 3) { // [h-shadow, v-shadow, color]
|
||||
newShadow = [shadow[0], shadow[1], 0, 0, shadow[2], 'none'];
|
||||
} else if (shadow.length === 4) { // [h-shadow, v-shadow, color, inset] | [h-shadow, v-shadow, blur, color]
|
||||
newShadow = /inset|none/.test(shadow[3]) ? [shadow[0], shadow[1], 0, 0, shadow[2], shadow[3]] : [shadow[0], shadow[1], shadow[2], 0, shadow[3], 'none'];
|
||||
} else if (shadow.length === 5) { // [h-shadow, v-shadow, blur, color, inset] | [h-shadow, v-shadow, blur, spread, color]
|
||||
newShadow = /inset|none/.test(shadow[4]) ? [shadow[0], shadow[1], shadow[2], 0, shadow[3], shadow[4]] : [shadow[0], shadow[1], shadow[2], shadow[3], shadow[4], 'none'];
|
||||
} else if (shadow.length === 6) { // ideal [h-shadow, v-shadow, blur, spread, color, inset]
|
||||
newShadow = shadow;
|
||||
}
|
||||
|
||||
// make sure the values are ready to tween
|
||||
for (i=0;i<4;i++){
|
||||
newShadow[i] = parseFloat(newShadow[i]);
|
||||
}
|
||||
// also the color must be a rgb object
|
||||
newShadow[4] = trueColor(newShadow[4]);
|
||||
return newShadow;
|
||||
};
|
||||
|
||||
// for the .to() method, you need to prepareStart the boxShadow property
|
||||
// which means you need to read the current computed value
|
||||
prepareStart.boxShadow = function(property,value){
|
||||
var cssBoxShadow = getCurrentStyle(this.element,_boxShadow);
|
||||
return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
|
||||
}
|
||||
|
||||
// the parseProperty for boxShadow
|
||||
// registers the K.dom['boxShadow'] function
|
||||
// returns an array of 6 values with the following format
|
||||
// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
|
||||
parseProperty['boxShadow'] = function(property,value,element){
|
||||
if ( !('boxShadow' in DOM) ) {
|
||||
|
||||
// the DOM update function for boxShadow registers here
|
||||
// we only enqueue it if the boxShadow property is used to tween
|
||||
DOM['boxShadow'] = function(element,property,startValue,endValue,progress) {
|
||||
|
||||
// let's start with the numbers | set unit | also determine inset
|
||||
var numbers = [], px = 'px', // the unit is always px
|
||||
inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false;
|
||||
for (var i=0; i<4; i++){
|
||||
numbers.push( unit( startValue[i], endValue[i], px, progress ) );
|
||||
}
|
||||
|
||||
// now we handle the color
|
||||
var colorValue = color(startValue[4], endValue[4], progress);
|
||||
|
||||
// the final piece of the puzzle, the DOM update
|
||||
element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
|
||||
};
|
||||
}
|
||||
|
||||
// parseProperty for boxShadow, builds basic structure with ready to tween values
|
||||
if (typeof value === 'string'){
|
||||
var shadowColor, inset = 'none';
|
||||
// make sure to always have the inset last if possible
|
||||
inset = /inset/.test(value) ? 'inset' : inset;
|
||||
value = /inset/.test(value) ? value.replace(/(\s+inset|inset+\s)/g,'') : value;
|
||||
|
||||
// also getComputedStyle often returns color first "rgb(0, 0, 0) 15px 15px 6px 0px inset"
|
||||
shadowColor = value.match(colRegEx);
|
||||
value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
|
||||
|
||||
value = processBoxShadowArray(value);
|
||||
} else if (value instanceof Array){
|
||||
value = processBoxShadowArray(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
return this;
|
||||
}));
|
||||
2
demo/assets/js/kute-physics.min.js
vendored
2
demo/assets/js/kute-physics.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js | © dnp_theme | Physics Plugin | MIT-License
|
||||
!function(a,b){if("function"==typeof define&&define.amd)define(["kute.js"],b);else if("object"==typeof module&&"function"==typeof require)module.exports=b(require("kute.js"));else{if("undefined"==typeof a.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");b(a.KUTE)}}(this,function(a){"use strict";var b="undefined"!=typeof global?global:window;b.spring=function(a){a=a||{};var b=Math.max(1,(a.frequency||300)/20),d=Math.pow(20,(a.friction||200)/100),e=a.anticipationStrength||0,f=(a.anticipationSize||0)/1e3;return function(a){var g,h,i,j,k,l,m,n,o=1-f;return l=a/o-f/o,a<f?(n=f/o-f/o,m=0/o-f/o,k=Math.acos(1/c.A1(a,n)),i=(Math.acos(1/c.A1(a,m))-k)/(b*-f),g=c.A1):(g=c.A2,k=0,i=1),h=g(l,f,e,d),j=b*(a-f)*i+k,1-h*Math.cos(j)}};var c=b.spring.prototype;c.A1=function(a,b,c){var d,e,f,g;return f=b/(1-b),g=0,e=(f-.8*g)/(f-g),d=(.8-e)/f,d*a*c/100+e},c.A2=function(a,b,c,d){return Math.pow(d/10,-a)*(1-a)},b.bounce=function(a){a=a||{};var b=Math.max(1,(a.frequency||300)/20),c=Math.pow(20,(a.friction||200)/100);return function(a){var d=Math.pow(c/10,-a)*(1-a),e=b*a*1+Math.PI/2;return d*Math.cos(e)}},b.gravity=function(a){var b,c,e,f,g,h;return a=a||{},b=(a.bounciness||400)/1250,e=(a.elasticity||200)/1e3,g=a.initialForce||!1,f=100,c=[],h=function(){var a,c;for(a=Math.sqrt(2/f),c={a:-a,b:a,H:1},g&&(c.a=0,c.b=2*c.b);c.H>.001;)h=c.b-c.a,c={a:c.b,b:c.b+h*b,H:c.H*b*b};return c.b}(),function(){var a,d,i,j;for(d=Math.sqrt(2/(f*h*h)),i={a:-d,b:d,H:1},g&&(i.a=0,i.b=2*i.b),c.push(i),a=h,j=[];i.b<1&&i.H>.001;)a=i.b-i.a,i={a:i.b,b:i.b+a*b,H:i.H*e},j.push(c.push(i));return j}(),function(b){var e,f,i;for(f=0,e=c[f];!(b>=e.a&&b<=e.b)&&(f+=1,e=c[f]););return i=e?d.getPointInCurve(e.a,e.b,e.H,b,a,h):g?0:1}};var d=b.gravity.prototype;d.getPointInCurve=function(a,b,c,d,e,f){var g,h;return f=b-a,h=2/f*d-1-2*a/f,g=h*h*c-c+1,e.initialForce&&(g=1-g),g},b.forceWithGravity=function(a){var c=a||{};return c.initialForce=!0,b.gravity(c)},b.BezierMultiPoint=function(a){a=a||{};var b=a.points,c=!1,d=[];return function(){var a,c;for(a in b){if(c=parseInt(a),c>=b.length-1)break;e.fn(b[c],b[c+1],d)}return d}(),function(a){return 0===a?0:1===a?1:e.yForX(a,d,c)}};var e=b.BezierMultiPoint.prototype;e.fn=function(a,b,c){var d=function(c){return e.Bezier(c,a,a.cp[a.cp.length-1],b.cp[0],b)};return c.push(d)},e.Bezier=function(a,b,c,d,e){return{x:Math.pow(1-a,3)*b.x+3*Math.pow(1-a,2)*a*c.x+3*(1-a)*Math.pow(a,2)*d.x+Math.pow(a,3)*e.x,y:Math.pow(1-a,3)*b.y+3*Math.pow(1-a,2)*a*c.y+3*(1-a)*Math.pow(a,2)*d.y+Math.pow(a,3)*e.y}},e.yForX=function(a,b,c){var d,e,f,g,h,i,j,k,l=0,m=b.length;for(d=null,l;l<m&&(e=b[l],a>=e(0).x&&a<=e(1).x&&(d=e),null===d);l++);if(!d)return c?0:1;for(k=1e-4,g=0,i=1,h=(i+g)/2,j=d(h).x,f=0;Math.abs(a-j)>k&&f<100;)a>j?g=h:i=h,h=(i+g)/2,j=d(h).x,f++;return d(h).y},b.Physics={physicsInOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-c/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+c/1e3,y:1}]}]})},physicsIn:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-c/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+c/1e3,y:1}]}]})},physicsBackOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+c/1e3,y:1.3}]}]})},physicsBackIn:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-c/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-c/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+c/1e3,y:1.45}]}]})}}});
|
||||
|
|
@ -1,382 +0,0 @@
|
|||
// minifill.js | MIT | dnp_theme
|
||||
(function(){
|
||||
|
||||
// all repeated strings get a single reference
|
||||
// document | window | element + corrections
|
||||
var Doc = 'Document', doc = document, DOCUMENT = this[Doc] || this.HTMLDocument, // IE8
|
||||
WIN = 'Window', win = window, WINDOW = this.constructor || this[WIN] || Window, // old Safari
|
||||
HTMLELEMENT = 'HTMLElement', documentElement = 'documentElement', ELEMENT = Element,
|
||||
|
||||
// classList related
|
||||
className = 'className', add = 'add', classList = 'classList', remove = 'remove', contains = 'contains',
|
||||
|
||||
// object | array related
|
||||
prototype = 'prototype', indexOf = 'indexOf', length = 'length',
|
||||
|
||||
// performance
|
||||
now = 'now', performance = 'performance',
|
||||
|
||||
// getComputedStyle
|
||||
getComputedStyle = 'getComputedStyle', currentStyle = 'currentStyle', fontSize = 'fontSize',
|
||||
|
||||
// event related
|
||||
EVENT = 'Event', CustomEvent = 'CustomEvent', IE8EVENTS = '_events',
|
||||
etype = 'type', target = 'target', currentTarget = 'currentTarget', relatedTarget = 'relatedTarget',
|
||||
cancelable = 'cancelable', bubbles = 'bubbles', cancelBubble = 'cancelBubble', cancelImmediate = 'cancelImmediate', detail = 'detail',
|
||||
addEventListener = 'addEventListener', removeEventListener = 'removeEventListener', dispatchEvent = 'dispatchEvent';
|
||||
|
||||
|
||||
// Element
|
||||
if (!win[HTMLELEMENT]) { win[HTMLELEMENT] = win[ELEMENT]; }
|
||||
|
||||
// Array[prototype][indexOf]
|
||||
if (!Array[prototype][indexOf]) {
|
||||
Array[prototype][indexOf] = function(searchElement) {
|
||||
if (this === undefined || this === null) {
|
||||
throw new TypeError(this + ' is not an object');
|
||||
}
|
||||
|
||||
var arraylike = this instanceof String ? this.split('') : this,
|
||||
lengthValue = Math.max(Math.min(arraylike[length], 9007199254740991), 0) || 0,
|
||||
index = Number(arguments[1]) || 0;
|
||||
|
||||
index = (index < 0 ? Math.max(lengthValue + index, 0) : index) - 1;
|
||||
|
||||
while (++index < lengthValue) {
|
||||
if (index in arraylike && arraylike[index] === searchElement) {
|
||||
return index;
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
};
|
||||
}
|
||||
|
||||
// Date[now]
|
||||
if(!Date[now]){ Date[now] = function() { return new Date().getTime(); }; }
|
||||
|
||||
// performance[now]
|
||||
(function(){
|
||||
if (performance in win == false) { win[performance] = {}; }
|
||||
|
||||
if (now in win[performance] == false){
|
||||
var nowOffset = Date[now]();
|
||||
|
||||
window[performance][now] = function(){
|
||||
return Date[now]() - nowOffset;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
// getComputedStyle
|
||||
if (!(getComputedStyle in win)) {
|
||||
function getComputedStylePixel(element, property, fontSizeValue) {
|
||||
|
||||
// Internet Explorer sometimes struggles to read currentStyle until the element's document is accessed.
|
||||
var value = element.document && element[currentStyle][property].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/) || [0, 0, ''],
|
||||
size = value[1],
|
||||
suffix = value[2],
|
||||
rootSize;
|
||||
|
||||
fontSizeValue = !fontSizeValue ? fontSizeValue : /%|em/.test(suffix) && element.parentElement ? getComputedStylePixel(element.parentElement, 'fontSize', null) : 16;
|
||||
rootSize = property == 'fontSize' ? fontSizeValue : /width/i.test(property) ? element.clientWidth : element.clientHeight;
|
||||
|
||||
return suffix == '%' ? size / 100 * rootSize :
|
||||
suffix == 'cm' ? size * 0.3937 * 96 :
|
||||
suffix == 'em' ? size * fontSizeValue :
|
||||
suffix == 'in' ? size * 96 :
|
||||
suffix == 'mm' ? size * 0.3937 * 96 / 10 :
|
||||
suffix == 'pc' ? size * 12 * 96 / 72 :
|
||||
suffix == 'pt' ? size * 96 / 72 :
|
||||
size;
|
||||
}
|
||||
|
||||
function setShortStyleProperty(style, property) {
|
||||
var borderSuffix = property == 'border' ? 'Width' : '',
|
||||
t = property + 'Top' + borderSuffix,
|
||||
r = property + 'Right' + borderSuffix,
|
||||
b = property + 'Bottom' + borderSuffix,
|
||||
l = property + 'Left' + borderSuffix;
|
||||
|
||||
style[property] = (style[t] == style[r] && style[t] == style[b] && style[t] == style[l] ? [ style[t] ] :
|
||||
style[t] == style[b] && style[l] == style[r] ? [ style[t], style[r] ] :
|
||||
style[l] == style[r] ? [ style[t], style[r], style[b] ] :
|
||||
[ style[t], style[r], style[b], style[l] ]).join(' ');
|
||||
}
|
||||
|
||||
// <CSSStyleDeclaration>
|
||||
function CSSStyleDeclaration(element) {
|
||||
var style = this,
|
||||
currentStyleValue = element[currentStyle],
|
||||
fontSizeValue = getComputedStylePixel(element, fontSize),
|
||||
unCamelCase = function (match) {
|
||||
return '-' + match.toLowerCase();
|
||||
},
|
||||
property;
|
||||
|
||||
for (property in currentStyleValue) {
|
||||
Array.prototype.push.call(style, property == 'styleFloat' ? 'float' : property.replace(/[A-Z]/, unCamelCase));
|
||||
|
||||
if (property == 'width') {
|
||||
style[property] = element.offsetWidth + 'px';
|
||||
} else if (property == 'height') {
|
||||
style[property] = element.offsetHeight + 'px';
|
||||
} else if (property == 'styleFloat') {
|
||||
style.float = currentStyleValue[property];
|
||||
} else if (/margin.|padding.|border.+W/.test(property) && style[property] != 'auto') {
|
||||
style[property] = Math.round(getComputedStylePixel(element, property, fontSizeValue)) + 'px';
|
||||
} else if (/^outline/.test(property)) {
|
||||
// errors on checking outline
|
||||
try {
|
||||
style[property] = currentStyleValue[property];
|
||||
} catch (error) {
|
||||
style.outlineColor = currentStyleValue.color;
|
||||
style.outlineStyle = style.outlineStyle || 'none';
|
||||
style.outlineWidth = style.outlineWidth || '0px';
|
||||
style.outline = [style.outlineColor, style.outlineWidth, style.outlineStyle].join(' ');
|
||||
}
|
||||
} else {
|
||||
style[property] = currentStyleValue[property];
|
||||
}
|
||||
}
|
||||
|
||||
setShortStyleProperty(style, 'margin');
|
||||
setShortStyleProperty(style, 'padding');
|
||||
setShortStyleProperty(style, 'border');
|
||||
|
||||
style[fontSize] = Math.round(fontSizeValue) + 'px';
|
||||
}
|
||||
|
||||
CSSStyleDeclaration[prototype] = {
|
||||
constructor: CSSStyleDeclaration,
|
||||
// <CSSStyleDeclaration>.getPropertyPriority
|
||||
getPropertyPriority: function () {
|
||||
throw new Error('DOM Exception 9');
|
||||
},
|
||||
// <CSSStyleDeclaration>.getPropertyValue
|
||||
getPropertyValue: function (property) {
|
||||
return this[property.replace(/-\w/g, function (match) {
|
||||
return match[1].toUpperCase();
|
||||
})];
|
||||
},
|
||||
// <CSSStyleDeclaration>.item
|
||||
item: function (index) {
|
||||
return this[index];
|
||||
},
|
||||
// <CSSStyleDeclaration>.removeProperty
|
||||
removeProperty: function () {
|
||||
throw new Error('DOM Exception 7');
|
||||
},
|
||||
// <CSSStyleDeclaration>.setProperty
|
||||
setProperty: function () {
|
||||
throw new Error('DOM Exception 7');
|
||||
},
|
||||
// <CSSStyleDeclaration>.getPropertyCSSValue
|
||||
getPropertyCSSValue: function () {
|
||||
throw new Error('DOM Exception 9');
|
||||
}
|
||||
};
|
||||
|
||||
// <Global>.getComputedStyle
|
||||
win[getComputedStyle] = function(element) {
|
||||
return new CSSStyleDeclaration(element);
|
||||
};
|
||||
}
|
||||
|
||||
// Element.prototype.classList by thednp
|
||||
if( !(classList in ELEMENT[prototype]) ) {
|
||||
var ClassLIST = function(elem){
|
||||
var classArr = elem[className].replace(/^\s+|\s+$/g,'').split(/\s+/) || [];
|
||||
|
||||
// methods
|
||||
hasClass = this[contains] = function(classNAME){
|
||||
return classArr[indexOf](classNAME) > -1;
|
||||
},
|
||||
addClass = this[add] = function(classNAME){
|
||||
if (!hasClass(classNAME)) {
|
||||
classArr.push(classNAME);
|
||||
elem[className] = classArr.join(' ');
|
||||
}
|
||||
},
|
||||
removeClass = this[remove] = function(classNAME){
|
||||
if (hasClass(classNAME)) {
|
||||
classArr.splice(classArr[indexOf](classNAME),1);
|
||||
elem[className] = classArr.join(' ');
|
||||
}
|
||||
},
|
||||
toggleClass = this.toggle = function(classNAME){
|
||||
if ( hasClass(classNAME) ) { removeClass(classNAME); }
|
||||
else { addClass(classNAME); }
|
||||
};
|
||||
}
|
||||
Object.defineProperty(ELEMENT[prototype], classList, { get: function () { return new ClassLIST(this); } });
|
||||
}
|
||||
|
||||
// Event
|
||||
if (!win[EVENT]||!WINDOW[prototype][EVENT]) {
|
||||
win[EVENT] = WINDOW[prototype][EVENT] = DOCUMENT[prototype][EVENT] = ELEMENT[prototype][EVENT] = function(type, eventInitDict) {
|
||||
if (!type) { throw new Error('Not enough arguments'); }
|
||||
var event,
|
||||
bubblesValue = eventInitDict && eventInitDict[bubbles] !== undefined ? eventInitDict[bubbles] : false,
|
||||
cancelableValue = eventInitDict && eventInitDict[cancelable] !== undefined ? eventInitDict[cancelable] : false;
|
||||
if ( 'createEvent' in doc ) {
|
||||
event = doc.createEvent(EVENT);
|
||||
event.initEvent(type, bubblesValue, cancelableValue);
|
||||
} else {
|
||||
event = doc.createEventObject();
|
||||
event[etype] = type;
|
||||
event[bubbles] = bubblesValue;
|
||||
event[cancelable] = cancelableValue;
|
||||
}
|
||||
return event;
|
||||
};
|
||||
}
|
||||
|
||||
// CustomEvent
|
||||
if (!(CustomEvent in win) || !(CustomEvent in WINDOW[prototype])) {
|
||||
win[CustomEvent] = WINDOW[prototype][CustomEvent] = DOCUMENT[prototype][CustomEvent] = Element[prototype][CustomEvent] = function(type, eventInitDict) {
|
||||
if (!type) {
|
||||
throw Error('CustomEvent TypeError: An event name must be provided.');
|
||||
}
|
||||
var event = new Event(type, eventInitDict);
|
||||
event[detail] = eventInitDict && eventInitDict[detail] || null;
|
||||
return event;
|
||||
};
|
||||
}
|
||||
|
||||
// addEventListener | removeEventListener
|
||||
if (!win[addEventListener]||!WINDOW[prototype][addEventListener]) {
|
||||
win[addEventListener] = WINDOW[prototype][addEventListener] = DOCUMENT[prototype][addEventListener] = ELEMENT[prototype][addEventListener] = function() {
|
||||
var element = this,
|
||||
type = arguments[0],
|
||||
listener = arguments[1];
|
||||
|
||||
if (!element[IE8EVENTS]) { element[IE8EVENTS] = {}; }
|
||||
|
||||
if (!element[IE8EVENTS][type]) {
|
||||
element[IE8EVENTS][type] = function (event) {
|
||||
var list = element[IE8EVENTS][event[etype]].list,
|
||||
events = list.slice(),
|
||||
index = -1,
|
||||
lengthValue = events[length],
|
||||
eventElement;
|
||||
|
||||
event.preventDefault = function() {
|
||||
if (event[cancelable] !== false) {
|
||||
event.returnValue = false;
|
||||
}
|
||||
};
|
||||
|
||||
event.stopPropagation = function() {
|
||||
event[cancelBubble] = true;
|
||||
};
|
||||
|
||||
event.stopImmediatePropagation = function() {
|
||||
event[cancelBubble] = true;
|
||||
event[cancelImmediate] = true;
|
||||
};
|
||||
|
||||
event[currentTarget] = element;
|
||||
event[relatedTarget] = event[relatedTarget] || event.fromElement || null;
|
||||
event[target] = event[target] || event.srcElement || element;
|
||||
event.timeStamp = new Date().getTime();
|
||||
|
||||
if (event.clientX) {
|
||||
event.pageX = event.clientX + doc[documentElement].scrollLeft;
|
||||
event.pageY = event.clientY + doc[documentElement].scrollTop;
|
||||
}
|
||||
|
||||
while (++index < lengthValue && !event[cancelImmediate]) {
|
||||
if (index in events) {
|
||||
eventElement = events[index];
|
||||
|
||||
if (list[indexOf](eventElement) !== -1 && typeof eventElement === 'function') {
|
||||
eventElement.call(element, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
element[IE8EVENTS][type].list = [];
|
||||
|
||||
if (element.attachEvent) {
|
||||
element.attachEvent('on' + type, element[IE8EVENTS][type]);
|
||||
}
|
||||
}
|
||||
|
||||
element[IE8EVENTS][type].list.push(listener);
|
||||
};
|
||||
|
||||
win[removeEventListener] = WINDOW[prototype][removeEventListener] = DOCUMENT[prototype][removeEventListener] = ELEMENT[prototype][removeEventListener] = function() {
|
||||
var element = this,
|
||||
type = arguments[0],
|
||||
listener = arguments[1],
|
||||
index;
|
||||
|
||||
if (element[IE8EVENTS] && element[IE8EVENTS][type] && element[IE8EVENTS][type].list) {
|
||||
index = element[IE8EVENTS][type].list[indexOf](listener);
|
||||
|
||||
if (index !== -1) {
|
||||
element[IE8EVENTS][type].list.splice(index, 1);
|
||||
|
||||
if (!element[IE8EVENTS][type].list[length]) {
|
||||
if (element.detachEvent) {
|
||||
element.detachEvent('on' + type, element[IE8EVENTS][type]);
|
||||
}
|
||||
delete element[IE8EVENTS][type];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Event dispatcher
|
||||
if (!win[dispatchEvent]||!WINDOW[prototype][dispatchEvent]||!DOCUMENT[prototype][dispatchEvent]||!ELEMENT[prototype][dispatchEvent]) {
|
||||
win[dispatchEvent] = WINDOW[prototype][dispatchEvent] = DOCUMENT[prototype][dispatchEvent] = ELEMENT[prototype][dispatchEvent] = function (event) {
|
||||
if (!arguments[length]) {
|
||||
throw new Error('Not enough arguments');
|
||||
}
|
||||
|
||||
if (!event || typeof event[etype] !== 'string') {
|
||||
throw new Error('DOM Events Exception 0');
|
||||
}
|
||||
|
||||
var element = this, type = event[etype];
|
||||
|
||||
try {
|
||||
if (!event[bubbles]) {
|
||||
event[cancelBubble] = true;
|
||||
|
||||
var cancelBubbleEvent = function (event) {
|
||||
event[cancelBubble] = true;
|
||||
|
||||
(element || win).detachEvent('on' + type, cancelBubbleEvent);
|
||||
};
|
||||
|
||||
this.attachEvent('on' + type, cancelBubbleEvent);
|
||||
}
|
||||
|
||||
this.fireEvent('on' + type, event);
|
||||
} catch (error) {
|
||||
event[target] = element;
|
||||
|
||||
do {
|
||||
event[currentTarget] = element;
|
||||
|
||||
if (IE8EVENTS in element && typeof element[IE8EVENTS][type] === 'function') {
|
||||
element[IE8EVENTS][type].call(element, event);
|
||||
}
|
||||
|
||||
if (typeof element['on' + type] === 'function') {
|
||||
element['on' + type].call(element, event);
|
||||
}
|
||||
|
||||
element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
|
||||
} while (element && !event[cancelBubble]);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
}
|
||||
}());
|
||||
23
demo/assets/js/opacityProperty.js
Normal file
23
demo/assets/js/opacityProperty.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/* OPACITY EXAMPLE */
|
||||
var opacityProperty = document.getElementById('opacityProperty'),
|
||||
button = opacityProperty.getElementsByClassName('btn')[0],
|
||||
heart = opacityProperty.getElementsByClassName('example-box')[0],
|
||||
// fade out
|
||||
fadeOutTween = KUTE.to(heart,{opacity:0},{duration:2000}),
|
||||
// fade in
|
||||
fadeInTween = KUTE.to(heart,{opacity:1},{duration:2000}),
|
||||
|
||||
isHidden = true;
|
||||
|
||||
button.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if ( !isHidden && !fadeOutTween.playing && !fadeInTween.playing ) {
|
||||
fadeOutTween.start();
|
||||
isHidden = !isHidden;
|
||||
|
||||
} else if ( isHidden && !fadeOutTween.playing && !fadeInTween.playing ) {
|
||||
fadeInTween.start();
|
||||
isHidden = !isHidden;
|
||||
}
|
||||
},false);
|
||||
/* OPACITY EXAMPLE */
|
||||
113
demo/assets/js/perf-matrix.js
Normal file
113
demo/assets/js/perf-matrix.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
// testing grounds
|
||||
"use strict";
|
||||
|
||||
var mobileType = '',
|
||||
isMobile = {
|
||||
Windows: function() {
|
||||
var checkW = /IEMobile|Windows Mobile/i.test(navigator.userAgent);
|
||||
mobileType += checkW ? 'Windows Phones.' : '';
|
||||
return checkW;
|
||||
},
|
||||
Android: function() {
|
||||
var checkA = /Android/i.test(navigator.userAgent);
|
||||
mobileType += checkA ? 'Android Phones.' : '';
|
||||
return checkA;
|
||||
},
|
||||
BlackBerry: function() {
|
||||
var checkB = /BlackBerry/i.test(navigator.userAgent);
|
||||
mobileType += checkB ? 'BlackBerry.' : '';
|
||||
return checkB;
|
||||
},
|
||||
iOS: function() {
|
||||
var checkI = /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||
mobileType += checkI ? 'Apple iPhone, iPad or iPod.' : '';
|
||||
return checkI;
|
||||
},
|
||||
any: function() {
|
||||
return ( isMobile.Windows() || isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() );
|
||||
}
|
||||
},
|
||||
checkMOBS = isMobile.any();
|
||||
|
||||
// protect phones, older / low end devices
|
||||
if (document.body.offsetWidth < 1200 || checkMOBS) {
|
||||
var explain = '';
|
||||
explain += checkMOBS && mobileType !== '' ? ('For safety reasons, this page does not work with ' + mobileType) : '';
|
||||
explain += !checkMOBS && document.body.offsetWidth < 1200 && mobileType === '' ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
|
||||
var warning = '<div style="padding: 20px;">';
|
||||
warning +='<h1 class="text-danger">Warning!</h1>';
|
||||
warning +='<p class="lead text-danger">This web page is only for high-end desktop computers.</p>';
|
||||
warning +='<p class="text-danger">We do not take any responsibility and we are not liable for any damage caused through use of this website, be it indirect, special, incidental or consequential damages to your devices.</p>';
|
||||
warning +='<p class="text-info">'+explain+'</p>';
|
||||
warning +='</div>';
|
||||
document.body.innerHTML = warning;
|
||||
throw new Error('This page is only for high-end desktop computers. ' + explain);
|
||||
}
|
||||
|
||||
// the variables
|
||||
var infoContainer = document.getElementById('info');
|
||||
var container = document.getElementById('container');
|
||||
var tws = [];
|
||||
|
||||
for (var i=0; i<21; i++){
|
||||
container.innerHTML +=
|
||||
'<div class="cube">'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'<div class="cube__side"></div>'
|
||||
+'</div>'
|
||||
}
|
||||
|
||||
var collection = document.getElementsByClassName('cube');
|
||||
var lastIdx = collection.length-1;
|
||||
|
||||
function complete(){
|
||||
infoContainer.style.display = 'block';
|
||||
container.style.display = 'none';
|
||||
}
|
||||
|
||||
var engine = document.getElementById('kute'),
|
||||
fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 },
|
||||
fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }},
|
||||
toCSS = { rotate3d: [ 360,0,0 ], perspective:600 },
|
||||
toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }},
|
||||
ops = { duration: 2000, repeat: 5 }
|
||||
|
||||
// since our engines don't do sync, we make it our own here
|
||||
if (engine.src.indexOf('kute.min.js')>-1) {
|
||||
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromCSS,toCSS,ops) ) })
|
||||
}
|
||||
if (engine.src.indexOf('kute-extra.min.js')>-1) {
|
||||
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromMX,toMX,ops) ) })
|
||||
}
|
||||
|
||||
|
||||
function startTest(){
|
||||
infoContainer.style.display = 'none';
|
||||
container.style.display = 'block'
|
||||
|
||||
!tws[0].playing && startKUTE();
|
||||
}
|
||||
|
||||
|
||||
function startKUTE() {
|
||||
var now = window.performance.now(), count = tws.length;
|
||||
for (var t=0; t<count; t++){
|
||||
tws[t].start(now)
|
||||
}
|
||||
}
|
||||
|
||||
// the start button handle
|
||||
document.getElementById('start').addEventListener('click', startTest, false);
|
||||
|
|
@ -51,23 +51,23 @@ function random(min, max) {
|
|||
|
||||
// the variables
|
||||
var container = document.getElementById('container');
|
||||
|
||||
// vendor prefix handle for Tween.js
|
||||
var transformProperty = KUTE.property('transform'), tws = [];
|
||||
|
||||
var tws = [];
|
||||
|
||||
function complete(){
|
||||
document.getElementById('info').style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
tws = [];
|
||||
if (engine==='tween') {
|
||||
stop()
|
||||
}
|
||||
}
|
||||
|
||||
function updateLeft(){
|
||||
this.div.style['left'] = Math.floor(this.left) +'px';
|
||||
function updateLeft(obj){
|
||||
obj.div.style.left = obj.left +'px';
|
||||
}
|
||||
|
||||
function updateTranslate(){
|
||||
this.div.style[transformProperty] = 'translate3d('+ Math.floor(this.x * 10) / 10 + 'px,0px,0px)';
|
||||
function updateTranslate(obj){
|
||||
obj.div.style.transform = 'translate3d('+ ((obj.x * 10) / 10 >>0) + 'px,0px,0px)';
|
||||
}
|
||||
|
||||
function buildObjects(){
|
||||
|
|
@ -88,9 +88,13 @@ function buildObjects(){
|
|||
|
||||
createTest(count,property,engine,repeat);
|
||||
// since our engines don't do sync, we make it our own here
|
||||
if (engine==='tween'||engine==='kute') {
|
||||
if (engine==='kute') {
|
||||
document.getElementById('info').style.display = 'none';
|
||||
start();
|
||||
startKUTE();
|
||||
}
|
||||
if (engine==='tween') {
|
||||
document.getElementById('info').style.display = 'none';
|
||||
startTWEEN();
|
||||
}
|
||||
} else {
|
||||
|
||||
|
|
@ -108,11 +112,26 @@ function buildObjects(){
|
|||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
var now = window.performance.now(), count = tws.length;
|
||||
for (var t =0; t<count; t++){
|
||||
tws[t].start(now+count/16)
|
||||
}
|
||||
function animate( time ) {
|
||||
requestAnimationFrame( animate );
|
||||
TWEEN.update( time );
|
||||
}
|
||||
|
||||
function stop(){
|
||||
cancelAnimationFrame(animate)
|
||||
}
|
||||
|
||||
function startKUTE() {
|
||||
var now = window.performance.now(), count = tws.length;
|
||||
for (var t =0; t<count; t++){
|
||||
tws[t].start(now+count/16)
|
||||
}
|
||||
}
|
||||
function startTWEEN() {
|
||||
for (var t in TWEEN._tweens){
|
||||
TWEEN._tweens[t].start()
|
||||
}
|
||||
animate()
|
||||
}
|
||||
|
||||
function createTest(count, property, engine, repeat) {
|
||||
|
|
@ -136,13 +155,19 @@ function createTest(count, property, engine, repeat) {
|
|||
fromValues = engine==="tween" ? { left: left, div: div } : { left: left };
|
||||
toValues = { left: toLeft }
|
||||
} else {
|
||||
div.style[transformProperty] = 'translate3d('+left + 'px,0px,0px)';
|
||||
if (engine==="kute"){
|
||||
fromValues = { translateX: left }
|
||||
toValues = { translateX: toLeft }
|
||||
} else if ((engine==="gsap") || (engine==="tween")) {
|
||||
// fromValues = { translateX: left }
|
||||
// toValues = { translateX: toLeft }
|
||||
fromValues = { transform: {translate3d: [left,0,0] }}
|
||||
toValues = { transform: {translate3d: [toLeft,0,0] }}
|
||||
// fromValues = { transform: {translateX: left }}
|
||||
// toValues = { transform: {translateX: toLeft }}
|
||||
} else if ( engine==="gsap" ) {
|
||||
fromValues = engine==='gsap' ? { x: left } : { x: left, div : div }
|
||||
toValues = { x: toLeft }
|
||||
} else if (engine==="tween") {
|
||||
fromValues = { x: left, div : div }
|
||||
toValues = { x: toLeft }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,7 +175,7 @@ function createTest(count, property, engine, repeat) {
|
|||
|
||||
// perf test
|
||||
if (engine==='kute') {
|
||||
tws.push(KUTE.fromTo(div, fromValues, toValues, { easing: 'easingQuadraticInOut', repeat: repeat, yoyo: true, duration: 1000, complete: fn }));
|
||||
tws.push(KUTE.fromTo(div, fromValues, toValues, { easing: KUTE.Easing.easingQuadraticInOut, repeat: repeat, yoyo: true, duration: 1000, onComplete: fn }));
|
||||
} else if (engine==='gsap') {
|
||||
if (property==="left"){
|
||||
TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
|
||||
|
|
@ -165,17 +190,9 @@ function createTest(count, property, engine, repeat) {
|
|||
update = updateTranslate;
|
||||
}
|
||||
|
||||
tws.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));
|
||||
TWEEN.add(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));
|
||||
}
|
||||
}
|
||||
if (engine==='tween') {
|
||||
var animate = function( time ) {
|
||||
requestAnimationFrame( animate );
|
||||
TWEEN.update( time );
|
||||
}
|
||||
animate();
|
||||
}
|
||||
|
||||
}
|
||||
// the start button handle
|
||||
document.getElementById('start').addEventListener('click', buildObjects, false);
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
(function(){
|
||||
|
||||
// invalidate for unsupported browsers
|
||||
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
|
||||
if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
|
||||
// invalidate for unsupported browsers
|
||||
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
|
||||
if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
|
||||
|
||||
// basic morph, only fromTo and allFromTo should work
|
||||
var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { morphIndex: 127 });
|
||||
// the range slider
|
||||
var rangeSlider = document.querySelector('input[type="range"');
|
||||
|
||||
// the range slider
|
||||
var rangeSlider = document.querySelector('input[type="range"');
|
||||
// basic morph, only fromTo and allFromTo should work
|
||||
var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { duration: 2500, /*repeat: Infinity, yoyo: true,*/ } );
|
||||
|
||||
rangeSlider.addEventListener('input',function(){
|
||||
var tick = 0.00001; // we need a value that's slightly above 0, math is hard in JavaScript
|
||||
KUTE.update.call(morphTween, this.value * morphTween.options.duration + tick)
|
||||
})
|
||||
var progressBar = new KUTE.ProgressBar(rangeSlider,morphTween)
|
||||
|
||||
}())
|
||||
document.getElementById('rectangle').addEventListener('click',function(){
|
||||
!morphTween.playing && morphTween.start()
|
||||
})
|
||||
82
demo/assets/js/sampleComponent.js
Normal file
82
demo/assets/js/sampleComponent.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
// Component Util
|
||||
// returns browser prefix
|
||||
function getPrefix() {
|
||||
const prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
|
||||
|
||||
let thePrefix;
|
||||
for (let i = 0, pfl = prefixes.length; i < pfl; i++) {
|
||||
if (`${prefixes[i]}Transform` in document.body.style) { thePrefix = prefixes[i]; break; }
|
||||
}
|
||||
return thePrefix;
|
||||
}
|
||||
|
||||
// returns prefixed property | property
|
||||
function trueProperty(property) {
|
||||
const prefixRequired = (!(property in document.body.style)) ? true : false; // is prefix required for property | prefix
|
||||
|
||||
const prefix = getPrefix();
|
||||
return prefixRequired ? prefix + (property.charAt(0).toUpperCase() + property.slice(1)) : property;
|
||||
}
|
||||
|
||||
// some old browsers like to use preffixed properties
|
||||
var transformProperty = trueProperty('transform');
|
||||
|
||||
// value 0 means that browser doesn't support any transform
|
||||
// value 1 means that browser supports at least 2D transforms
|
||||
var browserVersion = transformProperty in document.body.style ? 1 : 0
|
||||
|
||||
// Component usual imports
|
||||
var numbers = KUTE.Interpolate.numbers;
|
||||
var getInlineStyle = KUTE.Process.getInlineStyle;
|
||||
var scope = window._KUTE;
|
||||
|
||||
// Component Functions
|
||||
function getMove(tweenProp,value){
|
||||
var currentTransform = getInlineStyle(this.element);
|
||||
var left = this.element.style.left;
|
||||
var top = this.element.style.top;
|
||||
var x = browserVersion && currentTransform.translate ? currentTransform.translate[0]
|
||||
: isFinite(left*1) ? left
|
||||
: defaultValues.move[0];
|
||||
var y = browserVersion && currentTransform.translate ? currentTransform.translate[1]
|
||||
: isFinite(top*1) ? top
|
||||
: defaultValues.move[1];
|
||||
return [x,y]
|
||||
}
|
||||
function prepareMove(tweenProp,value){
|
||||
var x = isFinite(value*1) ? parseInt(value) : parseInt(value[0]) || 0;
|
||||
var y = parseInt(value[1]) || 0;
|
||||
return [ x, y ]
|
||||
}
|
||||
function onStartMove(tweenProp,value){
|
||||
if (!scope[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
if (browserVersion){
|
||||
scope[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[transformProperty] = 'translate('+numbers(a[0],b[0],v)+'px,'+numbers(a[1],b[1],v)+'px)';
|
||||
};
|
||||
} else {
|
||||
scope[tweenProp] = function (elem, a, b, v) {
|
||||
if (a[0]||b[0]) {
|
||||
elem.style.left = numbers(a[0],b[0],v)+'px';
|
||||
}
|
||||
if (a[1]||b[1]) {
|
||||
elem.style.top = numbers(a[1],b[1],v)+'px';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// the component object
|
||||
var crossBrowserMoveOptions = {
|
||||
component: 'crossBrowserMove',
|
||||
property: 'move',
|
||||
defaultValue: [0,0],
|
||||
Interpolate: numbers,
|
||||
functions: {
|
||||
prepareStart: getMove,
|
||||
prepareProperty: prepareMove,
|
||||
onStart: onStartMove
|
||||
}
|
||||
};
|
||||
KUTE.Components.crossBrowserMove = new KUTE.Animation(crossBrowserMoveOptions)
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
// common demo JS
|
||||
function getRandomInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
//scroll top?
|
||||
// scroll top?
|
||||
var toTop = document.getElementById('toTop'),
|
||||
toTopTween = KUTE.to( 'window', { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } );
|
||||
toTopTween = KUTE.to( window, { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } );
|
||||
|
||||
function topHandler(e){
|
||||
e.preventDefault();
|
||||
toTopTween.start();
|
||||
toTopTween.start();
|
||||
}
|
||||
toTop.addEventListener('click',topHandler,false);
|
||||
|
||||
|
|
@ -18,22 +18,25 @@ toTop.addEventListener('click',topHandler,false);
|
|||
var toggles = document.querySelectorAll('[data-function="toggle"]');
|
||||
|
||||
function closeToggles(el){
|
||||
el.classList.remove('open');
|
||||
el.classList.remove('open');
|
||||
}
|
||||
|
||||
function classToggles(el){
|
||||
el.classList.toggle('open');
|
||||
el.classList.toggle('open');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e){
|
||||
var target = e.target.parentNode.tagName === 'LI' || e.target.parentNode.classList && e.target.parentNode.classList.contains('btn-group') ? e.target : e.target.parentNode,
|
||||
parent = target.parentNode;
|
||||
for (var i = 0, l = toggles.length; i<l; i++ ){
|
||||
if ( (parent && parent.tagName === 'LI' || parent && parent.classList && parent.classList.contains('btn-group')) && toggles[i] === target ) {
|
||||
classToggles(parent);
|
||||
} else {
|
||||
closeToggles(toggles[i].parentNode);
|
||||
}
|
||||
if (e && !e.target.classList) {return;}
|
||||
|
||||
var target = e.target.parentNode.tagName === 'LI' || e.target.parentNode.classList && e.target.parentNode.classList.contains('btn-group') ? e.target : e.target.parentNode,
|
||||
parent = target.parentNode;
|
||||
for (var i = 0, l = toggles.length; i<l; i++ ){
|
||||
if ( (parent && parent.tagName === 'LI' || parent && parent.classList && parent.classList.contains('btn-group')) && toggles[i] === target ) {
|
||||
classToggles(parent);
|
||||
} else {
|
||||
closeToggles(toggles[i].parentNode);
|
||||
}
|
||||
target && /^#$/.test(target.getAttribute('href')) && e.preventDefault();
|
||||
}
|
||||
|
||||
target instanceof Element && target.getAttribute('data-function') && /^#$/.test(target.getAttribute('href')) && e.preventDefault();
|
||||
}, false);
|
||||
13
demo/assets/js/scrollProperty.js
Normal file
13
demo/assets/js/scrollProperty.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* SCROLL EXAMPLE */
|
||||
var scrollProperty = document.getElementById('scrollProperty'),
|
||||
button = scrollProperty.getElementsByClassName('btn')[0],
|
||||
target = scrollProperty.getElementsByClassName('example-item')[0]
|
||||
|
||||
button.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
let scrollTween = target.scrollTop !==0 ?
|
||||
KUTE.to(target,{scroll:0},{duration:2000, easing: "easingCircularOut"}) :
|
||||
KUTE.to(target,{scroll:(target.scrollHeight-target.offsetHeight+10)},{duration:2000, easing: "easingCircularOut"})
|
||||
!scrollTween.playing && scrollTween.start()
|
||||
},false);
|
||||
/* SCROLL EXAMPLE */
|
||||
53
demo/assets/js/shadowProperties.js
Normal file
53
demo/assets/js/shadowProperties.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/* BOX SHADOW EXAMPLE */
|
||||
var boxShadow = document.getElementById('boxShadow'),
|
||||
boxBtn = boxShadow.querySelector('.btn'),
|
||||
boxElement = boxShadow.getElementsByTagName('div')[0];
|
||||
|
||||
// tween to a string value
|
||||
var myBSTween1 = KUTE.to(boxElement, {boxShadow: '0px 0px 10px 10px #CDDC39'}, {duration:1000, easing: 'easingCubicInOut'});
|
||||
|
||||
// or a fromTo with string and array, hex and rgb
|
||||
var myBSTween2 = KUTE.fromTo(boxElement, {boxShadow: [0, 0, 10, 10, '#CDDC39']}, {boxShadow: '10px 10px 10px 10px rgb(0,66,99)'}, { duration:1000, easing: 'easingCubicInOut'});
|
||||
var myBSTween3 = KUTE.to(boxElement, {boxShadow: '10px 10px 10px 10px rgb(0,66,99)'}, {duration:1000, easing: 'easingCubicInOut'});
|
||||
var myBSTween4 = KUTE.to(boxElement, {boxShadow: '-10px -10px 10px 10px #E91E63'}, {duration:1000, easing: 'easingCubicInOut'});
|
||||
var myBSTween5 = KUTE.to(boxElement, {boxShadow: '0px 0px 0px 0px rgb(0,0,0)'}, {duration:1000, easing: 'easingCubicIn'});
|
||||
var myBSTween6 = KUTE.to(boxElement, {boxShadow: [10, 10, 10, '#99A52A', 'inset']}, {duration:2000, easing: 'easingCubicOut', repeat: 1, yoyo: true, onComplete: removeInset});
|
||||
myBSTween1.chain(myBSTween2);
|
||||
myBSTween2.chain(myBSTween3);
|
||||
myBSTween3.chain(myBSTween4);
|
||||
myBSTween4.chain(myBSTween5);
|
||||
myBSTween5.chain(myBSTween6);
|
||||
|
||||
function removeInset() {
|
||||
boxElement.style.boxShadow = '0px 0px 0px 0px rgb(0,0,0)';
|
||||
}
|
||||
|
||||
boxBtn.addEventListener('click', function(){
|
||||
!myBSTween1.playing && !myBSTween2.playing && !myBSTween3.playing &&
|
||||
!myBSTween4.playing && !myBSTween5.playing && !myBSTween6.playing && myBSTween1.start();
|
||||
}, false);
|
||||
/* BOX SHADOW EXAMPLE */
|
||||
|
||||
/* TEXT SHADOW EXAMPLE */
|
||||
var textShadow = document.getElementById('textShadow'),
|
||||
textBtn = textShadow.querySelector('.btn'),
|
||||
textElement = textShadow.getElementsByTagName('div')[0];
|
||||
|
||||
// tween to a string value
|
||||
var myTSTween1 = KUTE.to(textElement, {textShadow: '0px 0px 5px #000'}, {duration:1000, easing: 'easingCubicInOut'});
|
||||
|
||||
// or a fromTo with string and array, hex and rgb
|
||||
var myTSTween2 = KUTE.fromTo(textElement, {textShadow: [0, 0, 5, '#000']}, {textShadow: '10px 10px 10px rgb(0,66,99)'}, { duration:1000, easing: 'easingCubicInOut'});
|
||||
var myTSTween3 = KUTE.to(textElement, {textShadow: '10px 10px 10px rgb(0,66,99)'}, {duration:1000, easing: 'easingCubicInOut'});
|
||||
var myTSTween4 = KUTE.to(textElement, {textShadow: '-10px -10px 10px #E91E63'}, {duration:1000, easing: 'easingCubicInOut'});
|
||||
var myTSTween5 = KUTE.to(textElement, {textShadow: '0px 0px 0px rgb(0,0,0)'}, {duration:2000, easing: 'easingCubicIn'});
|
||||
myTSTween1.chain(myTSTween2);
|
||||
myTSTween2.chain(myTSTween3);
|
||||
myTSTween3.chain(myTSTween4);
|
||||
myTSTween4.chain(myTSTween5);
|
||||
|
||||
textBtn.addEventListener('click', function(){
|
||||
!myTSTween1.playing && !myTSTween2.playing && !myTSTween3.playing &&
|
||||
!myTSTween4.playing && !myTSTween5.playing && myTSTween1.start();
|
||||
}, false);
|
||||
/* TEXT SHADOW EXAMPLE */
|
||||
|
|
@ -1,258 +0,0 @@
|
|||
(function(){
|
||||
|
||||
// invalidate for unsupported browsers
|
||||
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
|
||||
if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
|
||||
|
||||
// basic morph
|
||||
var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
|
||||
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
|
||||
});
|
||||
|
||||
var morphBtn = document.getElementById('morphBtn');
|
||||
morphBtn.addEventListener('click', function(){
|
||||
!morphTween.playing && morphTween.start();
|
||||
}, false);
|
||||
|
||||
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
|
||||
morphIndex: 127,
|
||||
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
|
||||
});
|
||||
|
||||
var morphBtn1 = document.getElementById('morphBtn1');
|
||||
morphBtn1.addEventListener('click', function(){
|
||||
!morphTween1.playing && morphTween1.start();
|
||||
}, false);
|
||||
|
||||
// polygon morph
|
||||
var morphTween21 = KUTE.fromTo('#triangle', {attr: { fill: '#673AB7'}, path: '#triangle' }, { attr: { fill: '#2196F3' }, path: '#square' }, {
|
||||
duration: 1500, easing: 'easingCubicOut',
|
||||
});
|
||||
var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', attr:{ fill: '#2196F3'} }, { path: '#star2', attr:{ fill: 'deeppink' } }, {
|
||||
morphIndex: 9,
|
||||
delay: 500, duration: 1500, easing: 'easingCubicOut'
|
||||
});
|
||||
var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, {
|
||||
delay: 500, duration: 1500, easing: 'easingCubicOut'
|
||||
});
|
||||
|
||||
morphTween21.chain(morphTween22);
|
||||
morphTween22.chain(morphTween23);
|
||||
morphTween23.chain(morphTween21);
|
||||
|
||||
var morphBtn2 = document.getElementById('morphBtn2');
|
||||
morphBtn2.addEventListener('click', function(){
|
||||
if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing ) {
|
||||
morphTween21.start(); morphTween21._dl = 500;
|
||||
morphBtn2.innerHTML = 'Stop';
|
||||
morphBtn2.className = 'btn btn-pink';
|
||||
} else {
|
||||
morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0;
|
||||
morphTween22.playing && morphTween22.stop();
|
||||
morphTween23.playing && morphTween23.stop();
|
||||
morphBtn2.innerHTML = 'Start';
|
||||
morphBtn2.className = 'btn btn-green';
|
||||
}
|
||||
}, false);
|
||||
|
||||
|
||||
// simple multi morph
|
||||
var multiMorphBtn = document.getElementById('multiMorphBtn');
|
||||
var multiMorph1 = KUTE.to('#w11', { path: '#w24', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph2 = KUTE.to('#w13', { path: '#w21', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph3 = KUTE.to('#w14', { path: '#w22', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph4 = KUTE.to('#w12', { path: '#w23', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
multiMorphBtn.addEventListener('click', function(){
|
||||
!multiMorph1.playing && multiMorph1.start();
|
||||
!multiMorph2.playing && multiMorph2.start();
|
||||
!multiMorph3.playing && multiMorph3.start();
|
||||
!multiMorph4.playing && multiMorph4.start();
|
||||
}, false);
|
||||
|
||||
|
||||
// complex multi morph
|
||||
var compliMorphBtn = document.getElementById('compliMorphBtn');
|
||||
var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path: '#eye-left' }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
compliMorphBtn.addEventListener('click', function(){
|
||||
!compliMorph1.playing && compliMorph1.start();
|
||||
!compliMorph2.playing && compliMorph2.start();
|
||||
!compliMorph3.playing && compliMorph3.start();
|
||||
!compliMorph4.playing && compliMorph4.start();
|
||||
}, false);
|
||||
|
||||
|
||||
// draw example
|
||||
var drawBtn = document.getElementById('drawBtn');
|
||||
var drawExample = document.getElementById('draw-example');
|
||||
var drawEls = drawExample.querySelectorAll('*');
|
||||
|
||||
var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
|
||||
var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut", offset: 250});
|
||||
var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
|
||||
var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut", offset: 250});
|
||||
var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250});
|
||||
|
||||
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
|
||||
|
||||
drawBtn.addEventListener('click', function(){
|
||||
!draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing
|
||||
&& !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing
|
||||
&& !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing
|
||||
&& !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing
|
||||
&& !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing
|
||||
|
||||
&& draw1.start();
|
||||
}, false);
|
||||
|
||||
|
||||
// svgTransform examples
|
||||
|
||||
// rotation around shape center point
|
||||
var svgRotate = document.getElementById('svgRotate');
|
||||
var rotateBtn = document.getElementById('rotateBtn');
|
||||
var svgr1 = svgRotate.getElementsByTagName('path')[0];
|
||||
var svgr2 = svgRotate.getElementsByTagName('path')[1];
|
||||
|
||||
var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, { transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
rotateBtn.addEventListener('click', function(){
|
||||
!svgTween11.playing && svgTween11.start();
|
||||
!svgTween12.playing && svgTween12.start();
|
||||
}, false);
|
||||
|
||||
// rotation around shape's parent center point
|
||||
var svgRotate1 = document.getElementById('svgRotate1');
|
||||
var rotateBtn1 = document.getElementById('rotateBtn1');
|
||||
var svgr11 = svgRotate1.getElementsByTagName('path')[0];
|
||||
var svgr21 = svgRotate1.getElementsByTagName('path')[1];
|
||||
var bb = svgr21.getBBox();
|
||||
var translation = [580, 0];
|
||||
var svgBB = svgr21.ownerSVGElement.getBBox();
|
||||
var svgOriginX = (svgBB.width * 50 / 100) - translation[0];
|
||||
var svgOriginY = (svgBB.height * 50 / 100)- translation[1];
|
||||
|
||||
var svgTween111 = KUTE.to(svgr11, { rotate: 360 }, { transformOrigin: (svgBB.width * 50 / 100) + 'px 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
rotateBtn1.addEventListener('click', function(){
|
||||
!svgTween111.playing && svgTween111.start();
|
||||
!svgTween121.playing && svgTween121.start();
|
||||
}, false);
|
||||
|
||||
// translate
|
||||
var svgTranslate = document.getElementById('svgTranslate');
|
||||
var translateBtn = document.getElementById('translateBtn');
|
||||
var svgt1 = svgTranslate.getElementsByTagName('path')[0];
|
||||
var svgt2 = svgTranslate.getElementsByTagName('path')[1];
|
||||
var svgTween21 = KUTE.to(svgt1, { translate: 580 }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween22 = KUTE.to(svgt2, {svgTransform: { translate: [0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
translateBtn.addEventListener('click', function(){
|
||||
!svgTween21.playing && svgTween21.start();
|
||||
!svgTween22.playing && svgTween22.start();
|
||||
}, false);
|
||||
|
||||
// skews in chain
|
||||
var svgSkew = document.getElementById('svgSkew');
|
||||
var skewBtn = document.getElementById('skewBtn');
|
||||
var svgsk1 = svgSkew.getElementsByTagName('path')[0];
|
||||
var svgsk2 = svgSkew.getElementsByTagName('path')[1];
|
||||
var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
|
||||
var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, {transformOrigin: '50% 50% 0px', duration: 2500, easing: "easingCubicInOut"});
|
||||
var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
|
||||
|
||||
var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
|
||||
var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"});
|
||||
var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
|
||||
|
||||
svgTween31.chain(svgTween311);
|
||||
svgTween311.chain(svgTween313);
|
||||
|
||||
svgTween32.chain(svgTween322);
|
||||
svgTween322.chain(svgTween323);
|
||||
|
||||
skewBtn.addEventListener('click', function(){
|
||||
!svgTween31.playing && !svgTween311.playing && !svgTween313.playing && svgTween31.start();
|
||||
!svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start();
|
||||
}, false);
|
||||
|
||||
// scale
|
||||
var svgScale = document.getElementById('svgScale');
|
||||
var scaleBtn = document.getElementById('scaleBtn');
|
||||
var svgs1 = svgScale.getElementsByTagName('path')[0];
|
||||
var svgs2 = svgScale.getElementsByTagName('path')[1];
|
||||
var svgTween41 = KUTE.to(svgs1, { scale: 1.5 }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween42 = KUTE.to(svgs2, {svgTransform: {
|
||||
translate: 580,
|
||||
scale: 0.5,
|
||||
} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
scaleBtn.addEventListener('click', function(){
|
||||
!svgTween41.playing && svgTween41.start();
|
||||
!svgTween42.playing && svgTween42.start();
|
||||
}, false);
|
||||
|
||||
// mixed transforms
|
||||
var svgMixed = document.getElementById('svgMixed');
|
||||
var mixedBtn = document.getElementById('mixedBtn');
|
||||
var svgm1 = svgMixed.getElementsByTagName('path')[0];
|
||||
var svgm2 = svgMixed.getElementsByTagName('path')[1];
|
||||
var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge
|
||||
translate: 250,
|
||||
scale: 1.5,
|
||||
rotate: 320,
|
||||
skewX: -15
|
||||
}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
var svgTween52 = KUTE.to(svgm2, {
|
||||
svgTransform: {
|
||||
translate: 830,
|
||||
scale: 1.5,
|
||||
rotate: 320,
|
||||
skewX: -15
|
||||
}
|
||||
}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
mixedBtn.addEventListener('click', function(){
|
||||
!svgTween51.playing && svgTween51.start();
|
||||
!svgTween52.playing && svgTween52.start();
|
||||
}, false);
|
||||
|
||||
// chained transforms
|
||||
var svgChained = document.getElementById('svgChained');
|
||||
var chainedBtn = document.getElementById('chainedBtn');
|
||||
var svgc = svgChained.getElementsByTagName('path')[0];
|
||||
var svgcTransform = svgc.getAttribute('transform');
|
||||
var resetSVGTransform = function(){
|
||||
svgc.setAttribute('transform',svgcTransform);
|
||||
};
|
||||
|
||||
var svgTween6 = KUTE.fromTo(svgc,
|
||||
{ // from
|
||||
svgTransform: {
|
||||
translate: 0,
|
||||
scale: 0.5,
|
||||
rotate: 45,
|
||||
// skewX: 0
|
||||
},
|
||||
},
|
||||
{ // to
|
||||
svgTransform: {
|
||||
translate: 450,
|
||||
scale: 1.5,
|
||||
rotate: 360,
|
||||
// skewX: -45
|
||||
}
|
||||
},
|
||||
{transformOrigin: [256,256], complete: resetSVGTransform, yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
chainedBtn.addEventListener('click', function(){
|
||||
!svgTween6.playing && svgTween6.start();
|
||||
}, false);
|
||||
}())
|
||||
60
demo/assets/js/svgCubicMorph.js
Normal file
60
demo/assets/js/svgCubicMorph.js
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// basic morph
|
||||
var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
|
||||
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
|
||||
});
|
||||
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
|
||||
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
|
||||
});
|
||||
|
||||
var morphBtn = document.getElementById('morphBtn');
|
||||
morphBtn.addEventListener('click', function(){
|
||||
!morphTween.playing && morphTween.start() && morphTween1.start()
|
||||
}, false);
|
||||
|
||||
// multishape morph
|
||||
var multiMorphBtn = document.getElementById('multiMorphBtn');
|
||||
var multiMorph1 = KUTE.fromTo('#w11', { path: '#w11', attr:{ fill: "rgb(233,27,31)" } }, { path: '#w21', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph2 = KUTE.fromTo('#w12', { path: '#w12', attr:{ fill: "rgb(255,87,34)" } }, { path: '#w22', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph3 = KUTE.fromTo('#w13', { path: '#w13', attr:{ fill: "rgb(76,175,80)" } }, { path: '#w23', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph4 = KUTE.fromTo('#w14', { path: '#w14', attr:{ fill: "rgb(33,150,243)" } }, { path: '#w24', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
var multiMorph11 = KUTE.fromTo('#w111', { path: '#w111', attr:{ fill: "rgb(233,27,31)" } }, { path: '#w211', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph21 = KUTE.fromTo('#w121', { path: '#w121', attr:{ fill: "rgb(255,87,34)" } }, { path: '#w221', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph31 = KUTE.fromTo('#w131', { path: '#w131', attr:{ fill: "rgb(76,175,80)" } }, { path: '#w231', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph41 = KUTE.fromTo('#w141', { path: '#w141', attr:{ fill: "rgb(33,150,243)" } }, { path: '#w241', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
var multiMorph1s = KUTE.fromTo('#s11', { path: '#s11', attr:{ fill: "rgb(233,27,31)" } }, { path: '#s23', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph2s = KUTE.fromTo('#s12', { path: '#s12', attr:{ fill: "rgb(255,87,34)" } }, { path: '#s21', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph3s = KUTE.fromTo('#s13', { path: '#s13', attr:{ fill: "rgb(76,175,80)" } }, { path: '#s24', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph4s = KUTE.fromTo('#s14', { path: '#s14', attr:{ fill: "rgb(33,150,243)" } }, { path: '#s22', attr:{ fill: "#56C5FF" } }, { reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
multiMorphBtn.addEventListener('click', function(){
|
||||
!multiMorph1.playing && multiMorph1.start() && multiMorph11.start() && multiMorph1s.start();
|
||||
!multiMorph2.playing && multiMorph2.start() && multiMorph21.start() && multiMorph2s.start();
|
||||
!multiMorph3.playing && multiMorph3.start() && multiMorph31.start() && multiMorph3s.start();
|
||||
!multiMorph4.playing && multiMorph4.start() && multiMorph41.start() && multiMorph4s.start();
|
||||
}, false);
|
||||
|
||||
// complex multi morph
|
||||
var compliMorphBtn = document.getElementById('compliMorphBtn');
|
||||
var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path: '#eye-left' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
var compliMorph11 = KUTE.fromTo('#rectangle-container1', {path: '#rectangle-container1', attr:{ fill: "#9C27B0"} }, { path: '#circle-container1', attr:{ fill: "#FF5722"} }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph21 = KUTE.fromTo('#symbol-left1', {path: '#symbol-left1'}, { path: '#eye-left1' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph31 = KUTE.fromTo('#symbol-left-clone1', {path: '#symbol-left-clone1'}, { path: '#mouth1' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph41 = KUTE.fromTo('#symbol-right1', {path: '#symbol-right1'}, { path: '#eye-right1' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
var compliMorph12 = KUTE.fromTo('#rectangle-container2', {path: '#rectangle-container2', attr:{ fill: "#e91b1f"} }, { path: '#circle-container2', attr:{ fill: "#FF5722"} }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph22 = KUTE.fromTo('#symbol-left2', {path: '#symbol-left2'}, { path: '#eye-left2' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph32 = KUTE.fromTo('#sample-shape2', {path: '#sample-shape2'}, { path: '#mouth2' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph42 = KUTE.fromTo('#symbol-right2', {path: '#symbol-right2'}, { path: '#eye-right2' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
compliMorphBtn.addEventListener('click', function(){
|
||||
!compliMorph1.playing && compliMorph1.start() && compliMorph11.start() && compliMorph12.start();
|
||||
!compliMorph2.playing && compliMorph2.start() && compliMorph21.start() && compliMorph22.start();
|
||||
!compliMorph3.playing && compliMorph3.start() && compliMorph31.start() && compliMorph32.start();
|
||||
!compliMorph4.playing && compliMorph4.start() && compliMorph41.start() && compliMorph42.start();
|
||||
}, false);
|
||||
29
demo/assets/js/svgDraw.js
Normal file
29
demo/assets/js/svgDraw.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// draw example
|
||||
var drawBtn = document.getElementById('drawBtn');
|
||||
var drawExample = document.getElementById('draw-example');
|
||||
var drawEls = drawExample.querySelectorAll('*');
|
||||
|
||||
var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
|
||||
var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 105%'}, {duration: 2500, easing: "easingCubicOut", offset: 250});
|
||||
var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 105%'}, {draw:'100% 105%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
|
||||
var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 103%'}, {duration: 3500, easing: "easingBackOut", offset: 250});
|
||||
var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 105%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250});
|
||||
|
||||
try{
|
||||
draw1.chain(draw2);
|
||||
draw2.chain(draw3);
|
||||
draw3.chain(draw4);
|
||||
draw4.chain(draw5);
|
||||
}catch(e){
|
||||
console.error(e+"TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
drawBtn.addEventListener('click', function(){
|
||||
!draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing
|
||||
&& !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing
|
||||
&& !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing
|
||||
&& !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing
|
||||
&& !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing
|
||||
|
||||
&& draw1.start();
|
||||
}, false);
|
||||
96
demo/assets/js/svgMorph.js
Normal file
96
demo/assets/js/svgMorph.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
// basic morph
|
||||
var morphTween = KUTE.to('#rectangle', {path: '#star'}, {
|
||||
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
|
||||
});
|
||||
|
||||
var morphBtn = document.getElementById('morphBtn');
|
||||
morphBtn.addEventListener('click', function(){
|
||||
!morphTween.playing && morphTween.start();
|
||||
}, false);
|
||||
|
||||
|
||||
// polygon morph
|
||||
var morphTween21 = KUTE.fromTo('#triangle', {attr: { fill: '#673AB7'}, path: '#triangle' }, { attr: { fill: '#2196F3' }, path: '#square' }, {
|
||||
duration: 1500, easing: 'easingCubicOut'
|
||||
});
|
||||
var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', attr:{ fill: '#2196F3'} }, { path: '#star2', attr:{ fill: 'deeppink' } }, {
|
||||
delay: 500, duration: 1500, easing: 'easingCubicOut'
|
||||
});
|
||||
var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, {
|
||||
delay: 500, duration: 1500, easing: 'easingCubicOut'
|
||||
});
|
||||
var morphTween24 = KUTE.fromTo('#triangle', {path: '#triangle', attr:{ fill: '#673AB7'} }, { path: '#cat', attr:{ fill: 'darkorange' } }, {
|
||||
delay: 500, duration: 1500, easing: 'easingCubicOut'
|
||||
});
|
||||
var morphTween25 = KUTE.fromTo('#triangle', {path: '#cat', attr:{ fill: 'darkorange'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, {
|
||||
delay: 500, duration: 1500, easing: 'easingCubicOut'
|
||||
});
|
||||
|
||||
try{
|
||||
morphTween21.chain(morphTween22);
|
||||
morphTween22.chain(morphTween23);
|
||||
morphTween23.chain(morphTween24);
|
||||
morphTween24.chain(morphTween25);
|
||||
morphTween25.chain(morphTween21);
|
||||
}catch(e){
|
||||
console.error(e+"TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
|
||||
var morphBtn2 = document.getElementById('morphBtn2');
|
||||
morphBtn2.addEventListener('click', function(){
|
||||
if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing && !morphTween24.playing && !morphTween25.playing ) {
|
||||
morphTween21.start(); morphTween21._dl = 500;
|
||||
morphBtn2.innerHTML = 'Stop';
|
||||
morphBtn2.className = 'btn btn-pink';
|
||||
} else {
|
||||
morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0;
|
||||
morphTween22.playing && morphTween22.stop();
|
||||
morphTween23.playing && morphTween23.stop();
|
||||
morphTween24.playing && morphTween24.stop();
|
||||
morphTween25.playing && morphTween25.stop();
|
||||
morphBtn2.innerHTML = 'Start';
|
||||
morphBtn2.className = 'btn btn-green';
|
||||
}
|
||||
}, false);
|
||||
|
||||
|
||||
// simple multi morph
|
||||
var multiMorphBtn = document.getElementById('multiMorphBtn');
|
||||
var multiMorph1 = KUTE.fromTo('#w11', { path: '#w11', attr:{ fill: "rgb(233,27,31)" } }, { path: '#w21', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph2 = KUTE.fromTo('#w12', { path: '#w12', attr:{ fill: "rgb(255,87,34)" } }, { path: '#w22', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph3 = KUTE.fromTo('#w13', { path: '#w13', attr:{ fill: "rgb(76,175,80)" } }, { path: '#w23', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph4 = KUTE.fromTo('#w14', { path: '#w14', attr:{ fill: "rgb(33,150,243)" } }, { path: '#w24', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
var multiMorph1s = KUTE.fromTo('#s11', { path: '#s11', attr:{ fill: "rgb(233,27,31)" } }, { path: '#s23', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph2s = KUTE.fromTo('#s12', { path: '#s12', attr:{ fill: "rgb(255,87,34)" } }, { path: '#s21', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph3s = KUTE.fromTo('#s13', { path: '#s13', attr:{ fill: "rgb(76,175,80)" } }, { path: '#s24', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var multiMorph4s = KUTE.fromTo('#s14', { path: '#s14', attr:{ fill: "rgb(33,150,243)" } }, { path: '#s22', attr:{ fill: "#56C5FF" } }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
multiMorphBtn.addEventListener('click', function(){
|
||||
!multiMorph1.playing && multiMorph1.start() && multiMorph1s.start();
|
||||
!multiMorph2.playing && multiMorph2.start() && multiMorph2s.start();
|
||||
!multiMorph3.playing && multiMorph3.start() && multiMorph3s.start();
|
||||
!multiMorph4.playing && multiMorph4.start() && multiMorph4s.start();
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
// complex multi morph
|
||||
var compliMorphBtn = document.getElementById('compliMorphBtn');
|
||||
var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path: '#eye-left' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
var compliMorph11 = KUTE.fromTo('#rectangle-container1', {path: '#rectangle-container1', attr:{ fill: "#9C27B0"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph21 = KUTE.fromTo('#symbol-left1', {path: '#symbol-left1'}, { path: '#eye-left1' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph31 = KUTE.fromTo('#sample-shape', {path: '#sample-shape'}, { path: '#mouth1' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var compliMorph41 = KUTE.fromTo('#symbol-right1', {path: '#symbol-right1'}, { path: '#eye-right1' }, { duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
compliMorphBtn.addEventListener('click', function(){
|
||||
!compliMorph1.playing && compliMorph1.start() && compliMorph11.start();
|
||||
!compliMorph2.playing && compliMorph2.start() && compliMorph21.start();
|
||||
!compliMorph3.playing && compliMorph3.start() && compliMorph31.start();
|
||||
!compliMorph4.playing && compliMorph4.start() && compliMorph41.start();
|
||||
}, false);
|
||||
155
demo/assets/js/svgTransform.js
Normal file
155
demo/assets/js/svgTransform.js
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
// invalidate for unsupported browsers
|
||||
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
|
||||
if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
|
||||
|
||||
|
||||
// svgTransform examples
|
||||
|
||||
// rotation around shape center point
|
||||
var svgRotate = document.getElementById('svgRotate');
|
||||
var rotateBtn = document.getElementById('rotateBtn');
|
||||
var svgr1 = svgRotate.getElementsByTagName('path')[0];
|
||||
var svgr2 = svgRotate.getElementsByTagName('path')[1];
|
||||
|
||||
var svgTween11 = KUTE.to(svgr1, { transform: {rotateZ: 360} }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
// var svgTween11 = KUTE.to(svgr1, { rotateZ: 360}, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
rotateBtn.addEventListener('click', function(){
|
||||
!svgTween11.playing && svgTween11.start();
|
||||
!svgTween12.playing && svgTween12.start();
|
||||
}, false);
|
||||
|
||||
// rotation around shape's parent center point
|
||||
var svgRotate1 = document.getElementById('svgRotate1');
|
||||
var rotateBtn1 = document.getElementById('rotateBtn1');
|
||||
var svgr11 = svgRotate1.getElementsByTagName('path')[0];
|
||||
var svgr21 = svgRotate1.getElementsByTagName('path')[1];
|
||||
var bb = svgr21.getBBox();
|
||||
var translation = [580, 0];
|
||||
var svgBB = svgr21.ownerSVGElement.getBBox();
|
||||
var svgOriginX = (svgBB.width * 50 / 100) - translation[0];
|
||||
var svgOriginY = (svgBB.height * 50 / 100)- translation[1];
|
||||
|
||||
var svgTween111 = KUTE.to(svgr11, { transform: {rotateZ: 360} }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
rotateBtn1.addEventListener('click', function(){
|
||||
!svgTween111.playing && svgTween111.start();
|
||||
!svgTween121.playing && svgTween121.start();
|
||||
}, false);
|
||||
|
||||
// translate
|
||||
var svgTranslate = document.getElementById('svgTranslate');
|
||||
var translateBtn = document.getElementById('translateBtn');
|
||||
var svgt1 = svgTranslate.getElementsByTagName('path')[0];
|
||||
var svgt2 = svgTranslate.getElementsByTagName('path')[1];
|
||||
var svgTween21 = KUTE.to(svgt1, { transform: {translateX: 580} }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween22 = KUTE.to(svgt2, { svgTransform: { translate: [0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
translateBtn.addEventListener('click', function(){
|
||||
!svgTween21.playing && svgTween21.start();
|
||||
!svgTween22.playing && svgTween22.start();
|
||||
}, false);
|
||||
|
||||
// skews in chain
|
||||
var svgSkew = document.getElementById('svgSkew');
|
||||
var skewBtn = document.getElementById('skewBtn');
|
||||
var svgsk1 = svgSkew.getElementsByTagName('path')[0];
|
||||
var svgsk2 = svgSkew.getElementsByTagName('path')[1];
|
||||
var svgTween31 = KUTE.to(svgsk1, { transform: {skew: [-15,0]} }, { duration: 1500, easing: "easingCubicInOut"});
|
||||
var svgTween311 = KUTE.to(svgsk1, { transform: {skew: [-15,15]} }, { duration: 2500, easing: "easingCubicInOut"});
|
||||
var svgTween313 = KUTE.to(svgsk1, { transform: {skew: [0, 0]} }, { duration: 1500, easing: "easingCubicInOut"});
|
||||
|
||||
var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
|
||||
var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"});
|
||||
var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
|
||||
|
||||
try{
|
||||
svgTween31.chain(svgTween311);
|
||||
svgTween311.chain(svgTween313);
|
||||
|
||||
svgTween32.chain(svgTween322);
|
||||
svgTween322.chain(svgTween323);
|
||||
}catch(e){
|
||||
console.error(e+"TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
|
||||
skewBtn.addEventListener('click', function(){
|
||||
!svgTween31.playing && !svgTween311.playing && !svgTween313.playing && svgTween31.start();
|
||||
!svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start();
|
||||
}, false);
|
||||
|
||||
// scale
|
||||
var svgScale = document.getElementById('svgScale');
|
||||
var scaleBtn = document.getElementById('scaleBtn');
|
||||
var svgs1 = svgScale.getElementsByTagName('path')[0];
|
||||
var svgs2 = svgScale.getElementsByTagName('path')[1];
|
||||
var svgTween41 = KUTE.to(svgs1, { transform: {scale3d: [1.5,1.5,1] } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
var svgTween42 = KUTE.to(svgs2, { svgTransform: { translate: 580, scale: 0.5,} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
scaleBtn.addEventListener('click', function(){
|
||||
!svgTween41.playing && svgTween41.start();
|
||||
!svgTween42.playing && svgTween42.start();
|
||||
}, false);
|
||||
|
||||
// mixed transforms
|
||||
var svgMixed = document.getElementById('svgMixed');
|
||||
var mixedBtn = document.getElementById('mixedBtn');
|
||||
var svgm1 = svgMixed.getElementsByTagName('path')[0];
|
||||
var svgm2 = svgMixed.getElementsByTagName('path')[1];
|
||||
var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge
|
||||
transform: {
|
||||
translateX: 250,
|
||||
scale3d: [1.5,1.5,1],
|
||||
rotateZ: 320,
|
||||
skewX: -15
|
||||
}
|
||||
}, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
var svgTween52 = KUTE.to(svgm2, {
|
||||
svgTransform: {
|
||||
translate: 830,
|
||||
scale: 1.5,
|
||||
rotate: 320,
|
||||
skewX: -15
|
||||
}
|
||||
}, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
mixedBtn.addEventListener('click', function(){
|
||||
!svgTween51.playing && svgTween51.start();
|
||||
!svgTween52.playing && svgTween52.start();
|
||||
}, false);
|
||||
|
||||
// chained transforms
|
||||
var svgChained = document.getElementById('svgChained');
|
||||
var chainedBtn = document.getElementById('chainedBtn');
|
||||
var svgc = svgChained.getElementsByTagName('path')[0];
|
||||
var svgcTransform = svgc.getAttribute('transform');
|
||||
var resetSVGTransform = function(){
|
||||
svgc.setAttribute('transform',svgcTransform);
|
||||
};
|
||||
|
||||
var svgTween6 = KUTE.fromTo(svgc,
|
||||
{ // from
|
||||
svgTransform: {
|
||||
translate: 0,
|
||||
scale: 0.5,
|
||||
rotate: 45,
|
||||
// skewX: 0
|
||||
},
|
||||
},
|
||||
{ // to
|
||||
svgTransform: {
|
||||
translate: 450,
|
||||
scale: 1.5,
|
||||
rotate: 360,
|
||||
// skewX: -45
|
||||
}
|
||||
},
|
||||
{transformOrigin: [256,256], complete: resetSVGTransform, yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
||||
|
||||
chainedBtn.addEventListener('click', function(){
|
||||
!svgTween6.playing && svgTween6.start();
|
||||
}, false);
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// number increment
|
||||
var numText = document.getElementById('numText'),
|
||||
numBtn = document.getElementById('numBtn'),
|
||||
numTween = KUTE.to(numText, {number: 1550}, {duration: 3000, easing: 'easingCubicOut'});
|
||||
numBtn.addEventListener('click', function(){
|
||||
|
||||
if (!numTween.playing) {
|
||||
if (numText.innerHTML === '1550') { numTween.valuesEnd['number'] = 0; } else { numTween.valuesEnd['number'] = 1550; }
|
||||
numTween.start();
|
||||
}
|
||||
}, false);
|
||||
|
||||
// write text
|
||||
var headText = document.getElementById('headText'),
|
||||
headBtn = document.getElementById('headBtn'),
|
||||
headTween = KUTE.to(headText, {text: "This is a <strong>super simple</strong> write text demo."}, {repeat: 1, yoyo: true, duration: 5000, easing: 'easingBounceOut'});
|
||||
headBtn.addEventListener('click', function(){
|
||||
!headTween.playing && headTween.start();
|
||||
}, false);
|
||||
|
||||
// combo wombo
|
||||
var comText = document.getElementById('comText'),
|
||||
comNum = document.getElementById('comNum'),
|
||||
comBtn = document.getElementById('comBtn'),
|
||||
comTween11 = KUTE.to(comNum, {number: 2500}, {duration: 2000, easing: 'easingCubicOut'}),
|
||||
comTween12 = KUTE.to(comText, {text: "People <strong>following</strong> on Github."}, { textChars: 'symbols', duration: 3000, easing: 'easingCubicInOut'}),
|
||||
comTween21 = KUTE.to(comNum, {number: 7500}, {delay: 3000, duration: 2000, easing: 'easingCubicInOut'}),
|
||||
comTween22 = KUTE.to(comText, {text: "More <em class='red'>crazy tricks</em> coming soon."}, {textChars: 'all', delay: 2000, duration: 3000, easing: 'easingCubicInOut'});
|
||||
comTween11.chain(comTween21); comTween12.chain(comTween22);
|
||||
comBtn.addEventListener('click', function(){
|
||||
if (!comTween11.playing && !comTween21.playing && !comTween12.playing && !comTween22.playing) {
|
||||
comTween11.start();
|
||||
comTween12.start();
|
||||
}
|
||||
}, false);
|
||||
27
demo/assets/js/textProperties.js
Normal file
27
demo/assets/js/textProperties.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/* TEXT PROPERTIES EXAMPLE */
|
||||
var textProperties = document.getElementById('textProperties'),
|
||||
heading = textProperties.querySelector('h1'),
|
||||
button = textProperties.querySelectorAll('.btn')[0],
|
||||
|
||||
// let's split the heading text by character
|
||||
chars = heading.innerHTML.split('');
|
||||
|
||||
// wrap the splits into spans and build an object with these spans
|
||||
heading.innerHTML = '<span>' + chars.join('</span><span>') + '</span>';
|
||||
var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;
|
||||
|
||||
|
||||
// built the tween objects
|
||||
var tps = KUTE.allFromTo(charsObject,
|
||||
{ fontSize:50, letterSpacing: 0, color: '#333'},
|
||||
{ fontSize:80, letterSpacing: 10, color: 'red'},
|
||||
{ offset: 75, duration: 250, repeat: 1, yoyo:true, repeatDelay: 150, easing: 'easingCubicOut'});
|
||||
|
||||
|
||||
button.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if ( !tps.playing() ) {
|
||||
tps.start();
|
||||
}
|
||||
},false);
|
||||
/* TEXT PROPERTIES EXAMPLE */
|
||||
61
demo/assets/js/textWrite.js
Normal file
61
demo/assets/js/textWrite.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// number increment
|
||||
var numText = document.getElementById('numText'),
|
||||
numBtn = document.getElementById('numBtn'),
|
||||
numTween = KUTE.to(numText, {number: 1550}, {duration: 3000, easing: 'easingCubicOut'});
|
||||
numBtn.addEventListener('click', function(){
|
||||
|
||||
if (!numTween.playing) {
|
||||
if (numText.innerHTML === '1550') { numTween.valuesEnd['number'] = 0; } else { numTween.valuesEnd['number'] = 1550; }
|
||||
numTween.start();
|
||||
}
|
||||
}, false);
|
||||
|
||||
// write text
|
||||
var headText = document.getElementById('headText'),
|
||||
headBtn = document.getElementById('headBtn'),
|
||||
initText = headText.innerHTML,
|
||||
whichTw = false,
|
||||
nextText = "This is a <strong>super simple</strong> write text demo.",
|
||||
headTween = KUTE.to(headText, {text: nextText}, {textChars: 'alpha', duration: 5000, easing: 'easingBounceOut'}),
|
||||
headTween1 = KUTE.to(headText, {text: initText}, {textChars: 'alpha', duration: 5000, easing: 'easingBounceOut'});
|
||||
headBtn.addEventListener('click', function(){
|
||||
!whichTw && !headTween.playing && !headTween1.playing && (headTween.start(), whichTw = !whichTw);
|
||||
whichTw && !headTween.playing && !headTween1.playing && (headTween1.start(), whichTw = !whichTw);
|
||||
}, false);
|
||||
|
||||
|
||||
// improved write text
|
||||
var textTweenBTN = document.getElementById('textExampleBtn');
|
||||
var textTarget = document.getElementById('textExample');
|
||||
var textOriginal = textTarget.innerHTML;
|
||||
var anotherText = 'This text has a <a href="index.html">link to homepage</a> inside.';
|
||||
var options = {duration: 'auto', textChars: 'alphanumeric'}
|
||||
|
||||
textTweenBTN.addEventListener('click', function(){
|
||||
var newContent = textTarget.innerHTML === textOriginal ? anotherText : textOriginal;
|
||||
!textTarget.playing && KUTE.Util.createTextTweens(textTarget,newContent,options).start()
|
||||
})
|
||||
|
||||
|
||||
// combo wombo
|
||||
var comText = document.getElementById('comText'),
|
||||
comNum = document.getElementById('comNum'),
|
||||
comBtn = document.getElementById('comBtn'),
|
||||
comTween11 = KUTE.to(comNum, {number: 2500}, {duration: 2000, easing: 'easingCubicOut'}),
|
||||
comTween12 = KUTE.to(comText, {text: "People following on Github."}, { textChars: 'symbols', duration: 3000, easing: 'easingCubicInOut'}),
|
||||
comTween21 = KUTE.to(comNum, {number: 7500}, {delay: 3000, duration: 2000, easing: 'easingCubicInOut'}),
|
||||
comTween22 = KUTE.to(comText, {text: "More crazy tricks coming soon."}, {textChars: 'all', delay: 2000, duration: 3000, easing: 'easingCubicInOut'});
|
||||
|
||||
try{
|
||||
comTween11.chain(comTween21);
|
||||
comTween12.chain(comTween22);
|
||||
}catch(e){
|
||||
console.error(`${e} TweenBase doesn't support chain method`)
|
||||
}
|
||||
|
||||
comBtn.addEventListener('click', function(){
|
||||
if (!comTween11.playing && !comTween21.playing && !comTween12.playing && !comTween22.playing) {
|
||||
comTween11.start();
|
||||
comTween12.start();
|
||||
}
|
||||
}, false);
|
||||
134
demo/assets/js/transformFunctions.js
Normal file
134
demo/assets/js/transformFunctions.js
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
|
||||
/* TRANSFORMS EXAMPLES */
|
||||
var translateExamples = document.getElementById('translate-examples'),
|
||||
translateBtn = translateExamples.querySelector('.btn'),
|
||||
tr2d = translateExamples.getElementsByTagName('div')[0],
|
||||
trx = translateExamples.getElementsByTagName('div')[1],
|
||||
trry = translateExamples.getElementsByTagName('div')[2],
|
||||
trz = translateExamples.getElementsByTagName('div')[3],
|
||||
tr2dTween = KUTE.to(tr2d, {translate:[170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500})
|
||||
trryTween = KUTE.to(trry, {translate3d:[0,170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
trzTween = KUTE.to(trz, {perspective:200, translate3d:[0,0,-100]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
|
||||
translateBtn.addEventListener('click', function(){
|
||||
!tr2dTween.playing && tr2dTween.start();
|
||||
!trxTween.playing && trxTween.start();
|
||||
!trryTween.playing && trryTween.start();
|
||||
!trzTween.playing && trzTween.start();
|
||||
}, false);
|
||||
|
||||
var rotExamples = document.getElementById('rotExamples'),
|
||||
rotBtn = rotExamples.querySelector('.btn'),
|
||||
r2d = rotExamples.querySelectorAll('div')[0],
|
||||
rx = rotExamples.querySelectorAll('div')[1],
|
||||
ry = rotExamples.querySelectorAll('div')[2],
|
||||
rz = rotExamples.querySelectorAll('div')[3],
|
||||
r2dTween = KUTE.to(r2d, {rotate:-720}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
rxTween = KUTE.to(rx, {rotateX:180}, {easing:'linear', yoyo:true, repeat: 1, duration:1500}),
|
||||
ryTween = KUTE.to(ry, {perspective:200, rotate3d:[0,-180,0],scale:1.2}, {easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
rzTween = KUTE.to(rz, {rotateZ:360}, {easing:'easingBackOut', yoyo:true, repeat: 1, duration:1500});
|
||||
rotBtn.addEventListener('click', function(){
|
||||
!r2dTween.playing && r2dTween.start();
|
||||
!rxTween.playing && rxTween.start();
|
||||
!ryTween.playing && ryTween.start();
|
||||
!rzTween.playing && rzTween.start();
|
||||
}, false);
|
||||
|
||||
var skewExamples = document.getElementById('skewExamples'),
|
||||
skewBtn = skewExamples.querySelector('.btn'),
|
||||
sx = skewExamples.querySelectorAll('div')[0],
|
||||
sy = skewExamples.querySelectorAll('div')[1],
|
||||
sxTween = KUTE.to(sx, {skewX:-25}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
syTween = KUTE.to(sy, {skew:[0,25]}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500});
|
||||
skewBtn.addEventListener('click', function(){
|
||||
!sxTween.playing && sxTween.start();
|
||||
!syTween.playing && syTween.start();
|
||||
}, false);
|
||||
|
||||
var mixTransforms = document.getElementById('mixTransforms'),
|
||||
mixBtn = mixTransforms.querySelector('.btn'),
|
||||
mt1 = mixTransforms.querySelectorAll('div')[0],
|
||||
mt2 = mixTransforms.querySelectorAll('div')[1],
|
||||
// pp = KUTE.Util.trueProperty('perspective'),
|
||||
// tfp = KUTE.Util.trueProperty('transform'),
|
||||
// tfo = KUTE.Util.trueProperty('transformOrigin'),
|
||||
mt1Tween = KUTE.to(mt1, {perspective:200,translateX:300,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
mt2Tween = KUTE.to(mt2, {translateX:300,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500});
|
||||
|
||||
mixBtn.addEventListener('click', function(){
|
||||
!mt1Tween.playing && mt1Tween.start();
|
||||
!mt2Tween.playing && mt2Tween.start();
|
||||
}, false);
|
||||
|
||||
/* TRANSFORMS EXAMPLES */
|
||||
|
||||
|
||||
/* CHAINED TWEENS EXAMPLE */
|
||||
var chainedTweens = document.getElementById('chainedTweens'),
|
||||
el1 = chainedTweens.querySelectorAll('.example-item')[0],
|
||||
el2 = chainedTweens.querySelectorAll('.example-item')[1],
|
||||
el3 = chainedTweens.querySelectorAll('.example-item')[2],
|
||||
el4 = chainedTweens.querySelectorAll('.example-item')[3],
|
||||
ctb = chainedTweens.querySelector('.btn');
|
||||
|
||||
// built the tween objects for element1
|
||||
var tween11 = KUTE.fromTo(el1, { perspective:400,translateX:0, rotateX: 0}, {perspective:400,translateX:150, rotateX: 25}, {duration: 2000});
|
||||
var tween12 = KUTE.fromTo(el1, { perspective:400,translateY:0, rotateY: 0}, {perspective:400,translateY:20, rotateY: 15}, {duration: 2000});
|
||||
var tween13 = KUTE.fromTo(el1, { perspective:400,translate3d:[150,20,0], rotate3d:[25,15,0]}, {perspective:400,translate3d:[0,0,0], rotate3d:[0,0,0]}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try {
|
||||
tween11.chain(tween12);
|
||||
tween12.chain(tween13);
|
||||
} catch(e) {
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
// built the tween objects for element2
|
||||
var tween21 = KUTE.fromTo(el2, { perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0 }, {perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY:0}, {duration: 2000});
|
||||
var tween22 = KUTE.fromTo(el2, { perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY: 0}, {perspective:400,translateX:150, translateY:20, rotateX: 25, rotateY: 15}, {duration: 2000});
|
||||
var tween23 = KUTE.fromTo(el2, { perspective:400,translate3d:[150,20,0], rotateX: 25, rotateY:15}, {perspective:400,translate3d:[0,0,0], rotateX: 0, rotateY:0}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try{
|
||||
tween21.chain(tween22);
|
||||
tween22.chain(tween23);
|
||||
}catch(e){
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
// built the tween objects for element3
|
||||
var tween31 = KUTE.to(el3,{ perspective:400,translateX:150, rotateX:25}, {duration: 2000});
|
||||
var tween32 = KUTE.to(el3,{ perspective:400,translateX:150,translateY:20, rotateY:15}, {duration: 2000});
|
||||
var tween33 = KUTE.to(el3,{ perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try{
|
||||
tween31.chain(tween32);
|
||||
tween32.chain(tween33);
|
||||
}catch(e){
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
// built the tween objects for element4
|
||||
var tween41 = KUTE.to(el4,{ perspective:400, translate3d:[150,0,0], rotate3d: [25,0,0]}, {duration: 2000});
|
||||
var tween42 = KUTE.to(el4,{ perspective:400, translate3d:[150,20,0], rotate3d:[25,15,0]}, {duration: 2000});
|
||||
var tween43 = KUTE.to(el4,{ perspective:400, translate3d:[0,0,0], rotate3d: [0,0,0]}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try{
|
||||
tween41.chain(tween42);
|
||||
tween42.chain(tween43);
|
||||
}catch(e){
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
|
||||
ctb.addEventListener('click',function(e){
|
||||
e.preventDefault();
|
||||
!tween11.playing && !tween12.playing && !tween13.playing && tween11.start();
|
||||
!tween21.playing && !tween22.playing && !tween23.playing && tween21.start();
|
||||
!tween31.playing && !tween32.playing && !tween33.playing && tween31.start();
|
||||
!tween41.playing && !tween42.playing && !tween43.playing && tween41.start();
|
||||
},false);
|
||||
/* CHAINED TWEENS EXAMPLE */
|
||||
92
demo/assets/js/transformMatrix.js
Normal file
92
demo/assets/js/transformMatrix.js
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
|
||||
/* MATRIX TRANSFORMS EXAMPLES */
|
||||
/* using parent perspective */
|
||||
var matrixExamples = document.getElementById('matrix-examples'),
|
||||
matrixBtn = matrixExamples.querySelector('.btn'),
|
||||
mx1 = matrixExamples.getElementsByTagName('div')[0],
|
||||
mx2 = matrixExamples.getElementsByTagName('div')[1],
|
||||
mx3 = matrixExamples.getElementsByTagName('div')[2],
|
||||
mx4 = matrixExamples.getElementsByTagName('div')[3],
|
||||
mx1Tween = KUTE.to(mx1, {transform: { translate3d:[-50,-50,-50]} }, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
mx2Tween = KUTE.to(mx2, {transform: { perspective: 100, translate3d:[-50,-50,-50], rotateX:180 } }, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
||||
mx3Tween = KUTE.to(mx3, {transform: { translate3d:[-50,-50,-50], skew:[-15,-15] } }, { easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}), // matrix(1, 45, 45, 1, 0, -170)
|
||||
mx4Tween = KUTE.to(mx4, {transform: { translate3d:[-50,-50,-50], rotate3d:[0,-360,0], scaleX: 0.5 } }, { easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
|
||||
|
||||
matrixBtn.addEventListener('click', function(){
|
||||
!mx1Tween.playing && mx1Tween.start();
|
||||
!mx2Tween.playing && mx2Tween.start();
|
||||
!mx3Tween.playing && mx3Tween.start();
|
||||
!mx4Tween.playing && mx4Tween.start();
|
||||
}, false);
|
||||
|
||||
|
||||
/* CHAINED TWEENS EXAMPLE */
|
||||
var chainedTweens = document.getElementById('chainedTweens'),
|
||||
el1 = chainedTweens.querySelectorAll('.example-item')[0],
|
||||
el2 = chainedTweens.querySelectorAll('.example-item')[1],
|
||||
el3 = chainedTweens.querySelectorAll('.example-item')[2],
|
||||
el4 = chainedTweens.querySelectorAll('.example-item')[3],
|
||||
ctb = chainedTweens.querySelector('.btn');
|
||||
|
||||
// built the tween objects for element1
|
||||
var tween11 = KUTE.fromTo(el1, { transform: {perspective:400,translateX:0, rotateX: 0}}, {transform: {perspective:400,translateX:150, rotateX: 25}}, {duration: 2000});
|
||||
var tween12 = KUTE.fromTo(el1, { transform: {perspective:400,translateY:0, rotateY: 0}}, {transform: {perspective:400,translateY:20, rotateY: 15}}, {duration: 2000});
|
||||
var tween13 = KUTE.fromTo(el1, { transform: {perspective:400,translate3d:[150,20,0], rotate3d:[25,15,0]}}, {transform: {perspective:400,translate3d:[0,0,0], rotate3d:[0,0,0]}}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try {
|
||||
tween11.chain(tween12);
|
||||
tween12.chain(tween13);
|
||||
} catch(e) {
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
// built the tween objects for element2
|
||||
var tween21 = KUTE.fromTo(el2, { transform: {perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0 }}, {transform: {perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY:0}}, {duration: 2000});
|
||||
var tween22 = KUTE.fromTo(el2, { transform: {perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY: 0}}, {transform: {perspective:400,translateX:150, translateY:20, rotateX: 25, rotateY: 15}}, {duration: 2000});
|
||||
var tween23 = KUTE.fromTo(el2, { transform: {perspective:400,translate3d:[150,20,0], rotateX: 25, rotateY:15}}, {transform: {perspective:400,translate3d:[0,0,0], rotateX: 0, rotateY:0}}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try{
|
||||
tween21.chain(tween22);
|
||||
tween22.chain(tween23);
|
||||
}catch(e){
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
// built the tween objects for element3
|
||||
var tween31 = KUTE.to(el3,{ transform: {perspective:400,translateX:150, rotateX:25}}, {duration: 2000});
|
||||
var tween32 = KUTE.to(el3,{ transform: {perspective:400,translateX:150,translateY:20, rotateY:15}}, {duration: 2000});
|
||||
var tween33 = KUTE.to(el3,{ transform: {perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0}}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try{
|
||||
tween31.chain(tween32);
|
||||
tween32.chain(tween33);
|
||||
}catch(e){
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
// built the tween objects for element4
|
||||
var tween41 = KUTE.to(el4,{ transform: {perspective:400, translate3d:[150,0,0], rotate3d: [25,0,0]}}, {duration: 2000});
|
||||
var tween42 = KUTE.to(el4,{ transform: {perspective:400, translate3d:[150,20,0], rotate3d:[25,15,0]}}, {duration: 2000});
|
||||
var tween43 = KUTE.to(el4,{ transform: {perspective:400, translate3d:[0,0,0], rotate3d: [0,0,0]}}, {duration: 3000});
|
||||
|
||||
// chain tweens
|
||||
try{
|
||||
tween41.chain(tween42);
|
||||
tween42.chain(tween43);
|
||||
}catch(e){
|
||||
console.warn(e+". TweenBase doesn\'t support chain method")
|
||||
}
|
||||
|
||||
|
||||
ctb.addEventListener('click',function(e){
|
||||
e.preventDefault();
|
||||
!tween11.playing && !tween12.playing && !tween13.playing && tween11.start();
|
||||
!tween21.playing && !tween22.playing && !tween23.playing && tween21.start();
|
||||
!tween31.playing && !tween32.playing && !tween33.playing && tween31.start();
|
||||
!tween41.playing && !tween42.playing && !tween43.playing && tween41.start();
|
||||
},false);
|
||||
/* CHAINED TWEENS EXAMPLE */
|
||||
|
||||
2
demo/assets/js/tween.min.js
vendored
2
demo/assets/js/tween.min.js
vendored
File diff suppressed because one or more lines are too long
221
demo/attr.html
221
demo/attr.html
|
|
@ -1,221 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 10 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 Attributes Plugin for KUTE.js enables animation for any numeric presentation attribute.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animations,tweening engine,animation engine,presentation attributes,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Attributes Plugin | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li class="active"><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Attributes Plugin</h2>
|
||||
<p>The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations
|
||||
in combination with the <a href="svg.html">SVG Plugin</a> as we'll see in the following examples. As a quick refference, the basic synthax goes like this:</p>
|
||||
|
||||
<pre><code class="language-javascript">// basic synthax for unitless attributes
|
||||
var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
|
||||
|
||||
// OR for attributes that are ALWAYS suffixed / have a measurement unit
|
||||
var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
|
||||
</code></pre>
|
||||
|
||||
<p>The Attributes Plugin does support color attributes such as <code>fill</code> or <code>stroke</code> starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. To animate the stroke/fill or transform attribute, the <a href="svg.html">SVG Plugin</a> has some handy solutions for you. Despite the limitations of this plugin, you have access to just
|
||||
about any SVGElement/Element <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">presentation attribute</a> available.</p>
|
||||
|
||||
<h3>Attributes Namespace</h3>
|
||||
<p>Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:</p>
|
||||
<pre><code class="language-javascript">// dashed attribute notation
|
||||
var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
|
||||
|
||||
// non-dashed attribute notation
|
||||
var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
|
||||
</code></pre>
|
||||
<p>The <code>strokeWidth</code> example is very interesting because this attribute along with many others can work with <code>px</code>, <code>%</code> or with no unit/suffix.</p>
|
||||
|
||||
<h3>Color Attributes</h3>
|
||||
<p>Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: <code>fill</code>, <code>stroke</code> and <code>stopColor</code>. If the elements are affected by their CSS counterparts, the effect is not visible,
|
||||
so always make sure you know what you're doing.</p>
|
||||
<pre><code class="language-javascript">// some fill rgb, rgba, hex
|
||||
var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
|
||||
|
||||
// some stopColor or 'stop-color'
|
||||
var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
|
||||
|
||||
<path id="fill" fill="#673AB7" 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"/>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="fillBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>If in this example the <code>fill</code> attribute value would reference a gradient, then <i>rgba(0,0,0,0)</i> is used.</p>
|
||||
|
||||
<h3>Unitless Attributes</h3>
|
||||
<p>In the first example, let's play with the attributes of a <code><circle></code> element: radius and center coordinates.</p>
|
||||
<pre><code class="language-javascript">// radius attribute
|
||||
var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
|
||||
|
||||
// coordinates of the circle center
|
||||
var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
|
||||
</code></pre>
|
||||
<p>A quick demo with the above:
|
||||
<p>
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
|
||||
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="circleBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Suffixed Attributes</h3>
|
||||
<p>Similar to the example on gradients with <a href="svg.html">SVG Plugin</a>, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the <code>%</code> unit
|
||||
is found in the current value and used as unit for the DOM update:</p>
|
||||
<pre><code class="language-javascript">// gradient positions to middle
|
||||
var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
|
||||
|
||||
// gradient positions rotated
|
||||
var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
|
||||
<stop offset="100%" style="stop-color: #2196F3; stop-opacity:1"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#gradient)" 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"/>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="gradBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>This plugin is quite handy and a great addition to the <a href="svg.html">SVG Plugin</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./src/kute-attr.min.js"></script>
|
||||
<!-- KUTE.js Attributes Plugin -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/attr.js"></script>
|
||||
<!-- css plugin examples -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
159
demo/backgroundPosition.html
Normal file
159
demo/backgroundPosition.html
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Background Position component for KUTE.js allows you to animate the background-position property on most browsers.">
|
||||
<meta name="keywords" content="backgroundPosition,background-position,background,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Background Position</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li><a href="colorProperties.html">Color Properties</a></li>
|
||||
<li><a href="boxModel.html">Box Model</a></li>
|
||||
<li><a href="clipProperty.html">Clip Property</a></li>
|
||||
<li class="active"><a href="backgroundPosition.html">Background Position</a></li>
|
||||
<li><a href="textProperties.html">Text Properties</a></li>
|
||||
<li><a href="opacityProperty.html">Opacity Property</a></li>
|
||||
<li><a href="scrollProperty.html">Scroll Property</a></li>
|
||||
<li><a href="textWrite.html">Text Write</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
|
||||
</ul>
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2 class="head-title">Background Position</h2>
|
||||
<p class="condensed lead">The component that animates the CSS property controling the <i>background-position</i> property of a target element.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the position of the background image, simple and effective.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Background Position</b> component enables animation for the CSS <b>backgroundPosition</b> property on most browsers.</p>
|
||||
<p>It can handle an entire set of input values <b>[x,y]</b>, <b>'0% 50%'</b> and even <b>'left center'</b>. The component always updates the values of the position
|
||||
property via <b>%</b> suffix for simplicity reasons and even if <b>px</b> or any other unit is supported.</p>
|
||||
<p>While we might not have much use for this kind of animation, some older browsers will love to show you something if that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Example</h3>
|
||||
|
||||
<p>Here a couple of possible tween objects:</p>
|
||||
|
||||
<pre><code class="language-javascript">// provide the exact values for interpolation
|
||||
let bgPosTween = KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
|
||||
|
||||
// provide the coordinates
|
||||
let bgPosTween = KUTE.to('selector1',{backgroundPosition:"0% 50%"}).start();
|
||||
|
||||
// or provide the position names
|
||||
let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start();
|
||||
</code></pre>
|
||||
|
||||
<div id="bgPos" class="featurettes">
|
||||
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat;"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-orange" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Unfortunatelly this property also has no access at the sub-pixel level, animations are as good as it gets, despite the fact that the <code>%</code> suffix is used.</li>
|
||||
<li>There are thankfully replacements for this forgotten property that strangelly supports CSS3 transitions, you can simply use all kinds of SVG masks and filters
|
||||
and the <a href="htmlAttributes.html">HTML Attributes</a> component for much more animation potential and supreme animation quality.</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>© 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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/backgroundPosition.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
173
demo/borderRadius.html
Normal file
173
demo/borderRadius.html
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The SVG Border Radius component for KUTE.js enables animation for all the radius based CSS3 properties.">
|
||||
<meta name="keywords" content="border-radius,border radius,kute,kute.js,animation,javascript animation,tweening engine,animation engine,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Border Radius</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">Border Radius</h2>
|
||||
<p class="condensed lead">The component that animates the CSS properties that control the radius of the corners of a target element.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the radius for all corners or a specific one for a target element.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Border Radius</b> component provides support for the CSS3 <b>border-radius</b> property and all corner variations.</p>
|
||||
<p>The component accepts any measurement unit but the best results in terms of visual presentation are when you use <b>%</b>, <b>em</b> or any other
|
||||
subpixel units.</p>
|
||||
<p>Even if you don't provide any unit at all, the component will work it out with <b>px</b>.</p>
|
||||
<p>For a quick reference, here are the properties supported:</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Border Radius Properties</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>OK let's have a look at some sample tween objects and a quick demo:</p>
|
||||
|
||||
<pre><code class="language-javascript">KUTE.to('selector1',{borderRadius:'100%'}).start();
|
||||
KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
|
||||
KUTE.to('selector3',{borderTopRightRadius:'5em'}).start();
|
||||
KUTE.to('selector4',{borderBottomLeftRadius:50}).start();
|
||||
KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<div id="allRadius" class="example-item example-box bg-red">ALL</div>
|
||||
<div id="tlRadius" class="example-item example-box bg-pink">TL</div>
|
||||
<div id="trRadius" class="example-item example-box bg-olive">TR</div>
|
||||
<div id="blRadius" class="example-item example-box bg-indigo">BL</div>
|
||||
<div id="brRadius" class="example-item example-box bg-blue">BR</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="radiusBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>A quick reminder here is that the component does not support radius shorthand values, EG <code>border-radius: 50px 20px</code>.</li>
|
||||
<li>The component does not use vendor property preffixes anymore, the major browsers don't need for quite some time now. If you want to support
|
||||
legacy browsers, you still have the utilities available.</li>
|
||||
<li>Early implementations from any browser that have been deprecated are also not supported.</li>
|
||||
<li>This component is bundled with <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>© 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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/borderRadius.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
180
demo/boxModel.html
Normal file
180
demo/boxModel.html
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Box Model component for KUTE.js enables animation for all box model properties.">
|
||||
<meta name="keywords" content="top,left,width,height,kute,kute.js,animation,javascript animation,tweening engine,animation engine,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Box Model</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li><a href="colorProperties.html">Color Properties</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">Box Model</h2>
|
||||
<p class="condensed lead">The component that animates most of the CSS box model properties of a target element on all browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the <b>width</b>, <b>height</b>, <b>borderWidth</b> or spacing for a target element on all browsers.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Box Model</b> component provides support for all box-model properties and all their variations.</p>
|
||||
<p>Unlike other components, this one only works with <b>px</b> measurement unit, simply because these properties have no control at subpixel level. This means that even if you use <b>%</b>
|
||||
as suffix, the computed values are still pixel based in all browsers.</p>
|
||||
<p>Because modern browsers shine with <b>transform</b> animations and box model properties generally come with performance penalties and other animation
|
||||
jank, they can be used as fallback for legacy browsers, for your very special clients of course.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Box Model Properties</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">left</kbd>, <kbd class="bg-blue">top</kbd>, <kbd class="bg-olive">right</kbd> and <kbd class="bg-olive">bottom</kbd> are <code>position</code> based properties for movement on
|
||||
vertical and / or horizontal axis. These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires
|
||||
<code>position:relative</code>. These properties can be used as fallback for browsers with no support for <code>translate</code> properties such as IE8.</li>
|
||||
<li><kbd class="bg-blue">width</kbd>, <kbd class="bg-blue">height</kbd>, <kbd class="bg-olive">minWidth</kbd>, <kbd class="bg-olive">minHeight</kbd>, <kbd class="bg-olive">maxWidth</kbd>,
|
||||
<kbd class="bg-olive">maxHeight</kbd> are properties that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for
|
||||
<code>scale</code> on IE8 again, as well as for other purposes.</li>
|
||||
<li><kbd class="bg-olive">padding</kbd>, <kbd class="bg-olive">margin</kbd>, <kbd class="bg-olive">paddingTop</kbd>, <kbd class="bg-olive">paddingBottom</kbd>, <kbd class="bg-olive">paddingLeft</kbd>,
|
||||
<kbd class="bg-olive">paddingRight</kbd>, <kbd class="bg-olive">marginTop</kbd>, <kbd class="bg-olive">marginBottom</kbd>, <kbd class="bg-olive">marginLeft</kbd> and
|
||||
<kbd class="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin).</li>
|
||||
<li><kbd class="bg-olive">borderWidth</kbd>, <kbd class="bg-olive">borderTopWidth</kbd>, <kbd class="bg-olive">borderRightWidth</kbd>, <kbd class="bg-olive">borderBottomWidth</kbd> are
|
||||
<kbd class="bg-olive">borderLeftWidth</kbd> are properties that allow you to animate the border of an element either on all sides at once or each side separatelly.</li>
|
||||
<li><kbd class="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
|
||||
</ul>
|
||||
<p>The properties marked with different color, namely <kbd class="bg-blue">left</kbd>, <kbd class="bg-blue">top</kbd>, <kbd class="bg-blue">width</kbd> and <kbd class="bg-blue">height</kbd> are part of a lighter
|
||||
version of the component called <i>baseBoxModel.js</i>, since they're the most used and probably most needed in just about every KUTE.js distribution.</p>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>OK let's have a look at some sample tween objects and a quick demo:</p>
|
||||
|
||||
<pre><code class="language-javascript">let tween1 = KUTE.to('selector1',{width:200})
|
||||
let tween2 = KUTE.to('selector1',{height:300})
|
||||
let tween3 = KUTE.to('selector1',{left:250})
|
||||
let tween4 = KUTE.to('selector1',{top:100})
|
||||
let tween5 = KUTE.to('selector1',{marginTop:200})
|
||||
let tween6 = KUTE.to('selector1',{marginBottom:50})
|
||||
let tween7 = KUTE.to('selector1',{padding:30})
|
||||
let tween8 = KUTE.to('selector1',{margin:'5px'})
|
||||
</code></pre>
|
||||
|
||||
<p>We're gonna chain these tweens and start the animation.</p>
|
||||
<div id="boxModel" class="featurettes">
|
||||
<div class="example-box example-box-model bg-lime" style="padding: 0; font-size:26px; line-height: 70px;">BOX<br> MODEL </div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-orange" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Shorthand notations such as <code>margin: "20px 50px"</code> or any other property are not supported.</li>
|
||||
<li>Most box-model properties (except <code>top</code>, <code>left</code>, <code>bottom</code> and <code>right</code>) are layout modifiers and will not
|
||||
produce the best visual experience mainly because they force re-paint on all page layout and they don't support animation under the pixel level.</li>
|
||||
<li>The <i>baseBoxModel</i> component is featured in all distributions, while the full component is featured in <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>© 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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/boxModel.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
154
demo/clipProperty.html
Normal file
154
demo/clipProperty.html
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Clip Property component for KUTE.js allows you to animate the CSS clip property on most browsers.">
|
||||
<meta name="keywords" content="clip,css clip,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Clip Property</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li><a href="colorProperties.html">Color Properties</a></li>
|
||||
<li><a href="boxModel.html">Box Model</a></li>
|
||||
<li class="active"><a href="clipProperty.html">Clip Property</a></li>
|
||||
<li><a href="backgroundPosition.html">Background Position</a></li>
|
||||
<li><a href="textProperties.html">Text Properties</a></li>
|
||||
<li><a href="opacityProperty.html">Opacity Property</a></li>
|
||||
<li><a href="scrollProperty.html">Scroll Property</a></li>
|
||||
<li><a href="textWrite.html">Text Write</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
|
||||
</ul>
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2 class="head-title">Clip Property</h2>
|
||||
<p class="condensed lead">The component that animates the CSS <i>clip</i> property of a target element on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the <b>clip</b> property of a target element when certain conditions are met.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Clip Property</b> component enables animation for the CSS <b>clip</b> property on most browsers.</p>
|
||||
<p>What exactly does it do? Well you can animate the <b>visible</b> rectangular shape of an element that is set to <b>position:absolute</b>.
|
||||
If conditions are not met (more conditions apply, see notes below), the component will update the target element, but the effect is not visible.</p>
|
||||
<p>Generally you can set the CSS rule for this property like this <b>clip: rect(top,right,bottom,left)</b> which forms a rectangular masking shape above
|
||||
a target element making parts of it invisible.</p>
|
||||
<p>While the CSS <b>clip</b> property has been deprecated, it can still be used to emulate a type of scale/reveal animation for legacy browsers in certain cases.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Example</h3>
|
||||
<p>A possible tween object using the property:</p>
|
||||
|
||||
<pre><code class="language-javascript">KUTE.to('selector',{clip:[0,150,100,0]}).start();</code></pre>
|
||||
|
||||
<p>And a quick example here could look like this:</p>
|
||||
|
||||
<div id="clip" class="featurettes" style="min-height: 190px">
|
||||
<div class="example-item example-box bg-red" style="position: absolute; background: url('https://picsum.photos/250/250') center center no-repeat;"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-olive" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The component will produce no effect for target elements that have <code>overflow:visible</code> style rule.</li>
|
||||
<li>Also target elements without <code>position:absolute</code> CSS rule will produce no effect.</li>
|
||||
<li>This property will only work with <code>px</code> unit for the rectangular mask, which is unfortunate.</li>
|
||||
<li>Don't stop here, there are thankfully replacements for this property, you can simply use all kinds of SVG masks and filters in combination
|
||||
with the <a href="htmlAttributes.html">HTML Attributes</a> component for much more animation potential and for no compromise on animation quality.</li>
|
||||
<li>This component is bundled with the <i>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>© 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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/clipProperty.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
171
demo/colorProperties.html
Normal file
171
demo/colorProperties.html
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Color Properties component for KUTE.js enables animation for color based properties and their variations.">
|
||||
<meta name="keywords" content="color,background-color,outline-color,kute,kute.js,animation,javascript animation,tweening engine,animation engine,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Color Properties</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">Color Properties</h2>
|
||||
<p class="condensed lead">The component that animates CSS color properties for <b>Element</b> targets on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate <i>color</i> properties for a target element and updates its CSS style via <b>RGB</b>.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Color Properties</b> component provides support for all color properties and all their variations on most browsers.</p>
|
||||
<p>While with previous versions we used to have a <b>keepHex</b> option to always use the <b>HEX</b> format of the output color, modern browsers outright ignore the option and always
|
||||
deliver colors in <b>RGB</b> format, probably for performance reasons.</p>
|
||||
|
||||
<p>The component supports input values such as <b>HEX</b>, <b>RGB</b> and <b>RGBA</b> for all color properties and most browsers should also work with
|
||||
<a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe colors</a>, eg. <b>color: 'red'</b>.</p>
|
||||
|
||||
<p>For a quick reference, here are all the supported properties:</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Supported Properties</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">color</kbd> allows you to animate the color for a target text element. Eg. <code>color: '#ff0000'</code>.</li>
|
||||
<li><kbd class="bg-olive">backgroundColor</kbd> allows you to animate the <code>background-color</code> for a target element. Eg. <code>backgroundColor: 'rgb(202,150,20)'</code>.</li>
|
||||
<li><kbd class="bg-olive">outlineColor</kbd> allows you to animate the <code>outline-color</code> for a target element. Eg. <code>outline-color: 'cyan'</code>.</li>
|
||||
<li><kbd class="bg-olive">borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a target element. Eg. <code>borderColor: 'rgba(250,100,20,0.5)'</code>.</li>
|
||||
<li><kbd class="bg-olive">borderTopColor</kbd>, <kbd class="bg-olive">borderRightColor</kbd>, <kbd class="bg-olive">borderBottomColor</kbd> and <kbd class="bg-olive">borderLeftColor</kbd> properties allow
|
||||
you to animate the color of the border on each side of a target element. Eg. <code>borderTopColor: 'rgb(0,66,99)'</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>OK let's have a look at some sample tween objects and a quick demo:</p>
|
||||
|
||||
<pre><code class="language-javascript">KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
|
||||
KUTE.to('selector1',{backgroundColor:'#069'}).start();
|
||||
KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
|
||||
</code></pre>
|
||||
|
||||
<div id="colBox" class="featurettes">
|
||||
<div class="example-item example-box bg-olive" style="outline: #fff solid 5px; width: 155px; height: 155px; border:15px solid #9C27B0; line-height: 125px;">Colors</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The component will NOT work with <b>SVGElement</b> targets and their specific color attributes like <code>fill</code> or <code>stroke</code>, for that you can use the
|
||||
<a href="htmlAttributes.html">HTML Attributes</a> component.</li>
|
||||
<li>To simplify your workflow, the value processing can also work with web safe colors like <code>steelblue</code> or <code>darkorange</code>.</li>
|
||||
<li>You can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on legacy browsers and it should fallback to <code>RGB</code>.</li>
|
||||
<li>Some properties like <code>borderColor</code> and its variations or <code>outlineColor</code> won't have any visible effect if no border or outline style is applied to
|
||||
your target element.</li>
|
||||
<li>This component is bundled with the standard <i>kute.js</i> and <i>kute-extra.js</i> distribution files.</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/colorProperties.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
245
demo/css.html
245
demo/css.html
|
|
@ -1,245 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 10 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 CSS Plugin for KUTE.js extends the core engine with additional box model properties, color properties, border-radius, text properties and others.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,css,css3,border-radius,border-color,clip,background-position,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
|
||||
<title>KUTE.js CSS Plugin | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li class="active"><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>CSS Plugin</h2>
|
||||
<p>The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the <a href="examples.html">examples page</a>. The focus is on box model properties like <code>padding</code>, <code>margin</code> or <code>borderWidth</code>, as well as other types of properties like <code>borderRadius</code>, <code>borderColor</code>, <code>backgroundPosition</code>, <code>borderColor</code> or <code>clip</code>.</p>
|
||||
|
||||
|
||||
<h3>Border Radius</h3>
|
||||
<p>In the example below we are doing some animation on the <code>border-radius</code> property. The first box animates all corners, while the other boxes animate each corner at a time. A quick reminder, for radius properties KUTE.js supports
|
||||
<code>px</code>, <code>%</code> and text properties' units such as <code>em</code> or <code>rem</code>.</p>
|
||||
<pre><code class="language-javascript">KUTE.to('selector1',{borderRadius:'100%'}).start();
|
||||
KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
|
||||
KUTE.to('selector3',{borderTopRightRadius:'100%'}).start();
|
||||
KUTE.to('selector4',{borderBottomLeftRadius:'100%'}).start();
|
||||
KUTE.to('selector5',{borderBottomRightRadius:'100%'}).start();
|
||||
</code></pre>
|
||||
|
||||
<p>And here is how it looks like:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<div id="allRadius" class="example-item example-box bg-red">ALL</div>
|
||||
<div id="tlRadius" class="example-item example-box bg-pink">TL</div>
|
||||
<div id="trRadius" class="example-item example-box bg-olive">TR</div>
|
||||
<div id="blRadius" class="example-item example-box bg-indigo">BL</div>
|
||||
<div id="brRadius" class="example-item example-box bg-blue">BR</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="radiusBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>A quick important reminder here is that KUTE.js does not support shorthands for radius properties. Also early implementations by Mozilla's Firefox browser like <code>-moz-border-radius-topleft</code> are not supported because they were depracated
|
||||
with later versions. Download this example <a href='http://codepen.io/thednp/share/zip/VvpypW/'>here</a>.</p>
|
||||
|
||||
<h3>Box Model Properties</h3>
|
||||
<p>The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as <code>outlineWidth</code>, <code>minWidth</code> or <code>maxHeight</code> require a more complex context and we won't insist on them.</p>
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{marginTop:200});
|
||||
var tween2 = KUTE.to('selector1',{marginBottom:50});
|
||||
var tween3 = KUTE.to('selector1',{padding:30});
|
||||
var tween4 = KUTE.to('selector1',{margin:'5%'});
|
||||
</code></pre>
|
||||
<p>We're gonna chain these tweens and start the animation. You can download this example <a href='http://codepen.io/thednp/share/zip/xwqYbX/'>here</a>.</p>
|
||||
<div id="boxModel" class="featurettes">
|
||||
<div class="example-box example-box-model bg-lime" style="padding: 0; font-size:26px; line-height: 70px;">BOX<br> MODEL </div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-orange" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>TIP: the <code>width</code> and <code>height</code> properties used together can be great for <code>scale</code> animation fallback on images for legacy browsers.</p>
|
||||
|
||||
<h3>Text Properties</h3>
|
||||
<p>OK here we're gonna do a cool example for text properties. Basically the below code would work:</p>
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{fontSize:'200%'});
|
||||
var tween2 = KUTE.to('selector1',{lineHeight:24});
|
||||
var tween3 = KUTE.to('selector1',{letterSpacing:50});
|
||||
var tween3 = KUTE.to('selector1',{wordSpacing:50});
|
||||
</code></pre>
|
||||
<p>But our example will feature some more than just that. We're gonna animate each character of a given string, with a small delay. The heading will animate <code>fontSize</code> and <code>letterSpacing</code> properties for each character while
|
||||
the button will animate <code>fontSize</code> and <code>lineHeight</code> properties. Watch this:</p>
|
||||
|
||||
<div id="textProperties" class="featurettes" style="height: 152px">
|
||||
<h1 class="example-item">Howdy!</h1>
|
||||
<a href="javascript:void(0)" class="example-item btn btn-red">Button</a>
|
||||
|
||||
<div class="example-buttons"><a class="btn btn-pink" href="javascript:void(0)">Start</a></div>
|
||||
</div>
|
||||
<p>TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check <code>assets/css/css.css</code> file for more. This
|
||||
example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example <a href='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
|
||||
|
||||
<h3>Color Properties</h3>
|
||||
<p>The next example is about animating all border color properties, since the core engine already supports text <code>color</code> and <code>backgroundColor</code> properties. So check these lines for reference.</p>
|
||||
<pre><code class="language-javascript">KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
|
||||
KUTE.to('selector1',{borderTopColor:'#069'}).start();
|
||||
KUTE.to('selector1',{borderRightColor:'rgba(25,25,25,0.25)'}).start();
|
||||
KUTE.to('selector1',{borderBottomColor:'red'}).start(); // IE9+ browsers
|
||||
KUTE.to('selector1',{borderLeftColor:'#069'}).start();
|
||||
KUTE.to('selector1',{outlineColor:'#069'}).start();
|
||||
</code></pre>
|
||||
<p>Let's get some animation going. Download the example <a href='http://codepen.io/thednp/share/zip/OypvNR/'>here</a>.</p>
|
||||
|
||||
<div id="colBox" class="featurettes">
|
||||
<div class="example-item example-box bg-olive" style="outline: #eee solid 5px; width: 135px; height: 135px; border:15px solid #9C27B0; line-height: 105px; font-size:30px">Colors</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>A quick reminder: you can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on IE8 and it will fallback to <code>RGB</code>.</p>
|
||||
|
||||
<h3>Clip Property</h3>
|
||||
<p>This property allows you to animate the rectangular shape of an element that is set to <code>position:absolute</code>. In CSS this property works like this <code>clip: rect(top,right,bottom,left)</code> forming a rectangular shape that masks an element making parts of it invisible. While the <code>clip</code> property have been deprecated, it can still be used to emulate a scale animation for legacy browsers in certain cases.</p>
|
||||
|
||||
<pre><code class="language-javascript">KUTE.to('selector',{clip:[0,150,100,0]}).start();</code></pre>
|
||||
|
||||
<p>A quick example here could look like this:</p>
|
||||
|
||||
<div id="clip" class="featurettes" style="min-height: 190px">
|
||||
<div class="example-item example-box bg-red" style="position: absolute; background: url('http://img.dummy-image-generator.com/people/dummy-250x250-Eye.jpg') center center no-repeat;"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-olive" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p><strong>Note</strong> that this would produce no effect for elements that have <code>overflow:visible</code> style rule. Download this example <a href='http://codepen.io/thednp/pen/NGpYmM/'>here</a>.</p>
|
||||
|
||||
<h3>Background Position</h3>
|
||||
<p>Another property we can animate with KUTE.js is <code>backgroundPosition</code>. Quick example:</p>
|
||||
<pre><code class="language-javascript">KUTE.to('selector1',{backgroundPosition:[0,50]}).start();</code></pre>
|
||||
<p>A working example would look like this:</p>
|
||||
|
||||
<div id="bgPos" class="featurettes">
|
||||
<div class="example-item example-box" style="background: url('http://img.dummy-image-generator.com/abstract/dummy-400x300-Rope.jpg') center center no-repeat;"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-lime" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Download this example <a href='http://codepen.io/thednp/share/zip/EVWEwJ/'>here</a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./src/kute-css.min.js"></script>
|
||||
<!-- KUTE.js CSS Plugin -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/css.js"></script>
|
||||
<!-- css plugin examples -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
365
demo/easing.html
365
demo/easing.html
|
|
@ -1,365 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="A detailed API documentation on KUTE.js main methods, options and easing functions.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,easing,easing functions,cubic bezier easing,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Easing Functions | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li class="active"><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h2>Easing Functions</h2>
|
||||
<p>The easing functions generally make animations closer to reality and completely eliminate the boring factor for a given context. The most simple example to understand what they do, think of gravity. Dropping an object from a given height,
|
||||
will start moving to the ground with accelerated speed. If the object has some sort of bounciness like a ball, it will jump back up and up again, till the gravity will eventually stick the object to the ground.</p>
|
||||
<p>What scientists observed and put in theory houndreads of years ago, later the pioneers of scripting started to implement the laws of physics into digital animation and came up with this notion of easing to describe the progression of movement.
|
||||
If you care to dig into the concept, <a href="http://upshots.org/actionscript/jsas-understanding-easing" targt="_blank">here's an excellent resource</a> some developers recommend. I would also recommend
|
||||
<a href="https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3"
|
||||
target="_blank">this one</a> too.</p>
|
||||
|
||||
<h3>Core Functions</h3>
|
||||
<p>Modern browsers that support <code>transition</code> can also make use of some generic easing functions via the CSS3 <code>transition-timing-function:ease-out</code> property, but in Javascript animation, we need some special functions. The
|
||||
popular <a href="robertpenner.com/easing/" target="_blank">Robert Penner's easing functions</a> set is the default set included with KUTE.js because it's the fastest set I know in terms of performance. Some functions may lack a bit of
|
||||
accuracy but they cover the most animation needs. Generally the easing functions' names are built with keywords that describe the type of easing, like <em>circular</em> or <em>exponential</em>, and also the type of progression <em>in</em> and/or <em>out</em>.</p>
|
||||
|
||||
<p>To use them, simply set a tween option like so <code>easing: KUTE.Easing.easingSinusoidalInOut</code> or simply <code>easing: 'easingSinusoidalInOut'</code>.</p>
|
||||
<p><kbd>linear</kbd> is the default easing function and just as it sounds, it means that the animation has no acceleration or deceleration over time. While this one is basically boring, it's the fastest in all, and it's very useful when animating
|
||||
opacity or colors because we cannot really distinguish changes in speed for such cases, but mostly for movement.</p>
|
||||
|
||||
<p><kbd>curve</kbd> based functions are the next set of easings we are going to talk about. They are basically the same, the only difference is the number of multipliers applied (better think of it like the more weight an object has, the more
|
||||
acceleration):</p>
|
||||
<ul>
|
||||
<li><strong>Sinusoidal</strong> - multiplier of 1 (super light object, like a feather)</li>
|
||||
<li><strong>Quadratic</strong> - multiplier of 2</li>
|
||||
<li><strong>Cubic</strong> - multiplier of 3</li>
|
||||
<li><strong>Quartic</strong> - multiplier of 4</li>
|
||||
<li><strong>Quintic</strong> - multiplier of 5</li>
|
||||
<li><strong>Circular</strong> - multiplier of 6</li>
|
||||
<li><strong>Exponential</strong> - multiplier of 10 (super heavy object, like a truck)</li>
|
||||
</ul>
|
||||
|
||||
<p>The In / Out explained:</p>
|
||||
<ul>
|
||||
<li><strong>In</strong> - means that the animation starts with very very low speed and gains acceleration over time, but when it reaches the maximum speed, animation stops. These functions are: <kbd>easingSinusoidalIn</kbd>, <kbd>easingQuadraticIn</kbd>,<kbd>easingCubicIn</kbd>,
|
||||
<kbd>easingQuarticIn</kbd>, <kbd>easingQuinticIn</kbd>, <kbd>easingCircularIn</kbd> and <kbd>easingExponentialIn</kbd>.</li>
|
||||
<li><strong>Out</strong> - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: <kbd>easingSinusoidalOut</kbd>, <kbd>easingQuadraticOut</kbd>, <kbd>easingCubicOut</kbd>,
|
||||
<kbd>easingQuarticOut</kbd>, <kbd>easingQuinticOut</kbd>, <kbd>easingCircularOut</kbd> and <kbd>easingExponentialOut</kbd>.</li>
|
||||
<li><strong>InOut</strong> - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: <kbd>easingSinusoidalInOut</kbd>, <kbd>easingQuadraticInOut</kbd>,
|
||||
<kbd>easingCubicInOut</kbd>, <kbd>easingQuarticInOut</kbd>, <kbd>easingQuinticInOut</kbd>, <kbd>easingCircularInOut</kbd> and <kbd>easingExponentialInOut</kbd>.</li>
|
||||
</ul>
|
||||
|
||||
<p><kbd>back</kbd> easing functions describe more complex animations (I would call them <em>reverse gravity</em> easings). They also come with <em>in</em> and/or <em>out</em> types of progression. </p>
|
||||
<ul>
|
||||
<li><kbd>easingBackIn</kbd> would be best described when you throw an object into the air with a small amount of physical power, it will move up decelerating until it stops, then will move to the ground with acceleration.</li>
|
||||
<li><kbd>easingBackOut</kbd> would be best described as the previous function, but viewed in reverse mode.</li>
|
||||
<li><kbd>easingBackInOut</kbd> is a combination of the other two.</li>
|
||||
</ul>
|
||||
|
||||
<p><kbd>elasticity</kbd> easing functions describe the kind of animation where the object is elastic. With <em>in</em> and/or <em>out</em> as well. </p>
|
||||
<ul>
|
||||
<li><kbd>easingElasticOut</kbd> would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.</li>
|
||||
<li><kbd>easingElasticIn</kbd> would be best described as the above function but viewed in reverse mode.</li>
|
||||
<li><kbd>easingElasticInOut</kbd> is simply a combination of the other two.</li>
|
||||
</ul>
|
||||
|
||||
<p><kbd>gravity</kbd> based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With <em>in</em> and/or <em>out</em> as well.</p>
|
||||
<ul>
|
||||
<li><kbd>easingBounceOut</kbd> looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.</li>
|
||||
<li><kbd>easingBounceIn</kbd> looks like the previous viewed in reverse mode</li>
|
||||
<li><kbd>easingBounceInOut</kbd> is a combination of the other two.</li>
|
||||
</ul>
|
||||
|
||||
<p>Core easing functions examples:</p>
|
||||
<div class="featurettes">
|
||||
<div class="example-item easing-example example-box bg-green">Linear</div>
|
||||
<div class="example-item easing-example example-box bg-pink"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
|
||||
<ul class="easings">
|
||||
<li>easingSinusoidalIn</li>
|
||||
<li>easingSinusoidalOut</li>
|
||||
<li>easingSinusoidalInOut</li>
|
||||
<li>easingQuadraticIn</li>
|
||||
<li>easingQuadraticOut</li>
|
||||
<li>easingQuadraticInOut</li>
|
||||
<li>easingCubicIn</li>
|
||||
<li>easingCubicOut</li>
|
||||
<li>easingCubicInOut</li>
|
||||
<li>easingQuarticIn</li>
|
||||
<li>easingQuarticOut</li>
|
||||
<li>easingQuarticInOut</li>
|
||||
<li>easingQuinticIn</li>
|
||||
<li>easingQuinticOut</li>
|
||||
<li>easingQuinticInOut</li>
|
||||
<li>easingCircularIn</li>
|
||||
<li>easingCircularOut</li>
|
||||
<li>easingCircularInOut</li>
|
||||
<li>easingExponentialIn</li>
|
||||
<li>easingExponentialOut</li>
|
||||
<li>easingExponentialInOut</li>
|
||||
<li>easingBackIn</li>
|
||||
<li>easingBackOut</li>
|
||||
<li>easingBackInOut</li>
|
||||
<li>easingElasticIn</li>
|
||||
<li>easingElasticOut</li>
|
||||
<li>easingElasticInOut</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn-blue startEasingTween" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Cubic Bezier Functions</h3>
|
||||
<p>While modern browsers support CSS3 <code>transition</code> with <code>transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5)</code>, in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned
|
||||
in the <a href="features.html">features page</a>, we are using a modified version of the <a href="https://github.com/gre/bezier-easing" target="_blank">cubic-bezier</a> by Gaëtan Renaudeau. I believe this must be most accurate easing functions
|
||||
set.</p>
|
||||
<p>You can use them either with <code>easing: Bezier(mX1, mY1, mX2, mY2)</code> or <code>easing: 'bezier(mX1, mY1, mX2, mY2)'</code>, where mX1, mY1, mX2, mY2 are <em>Float</em> values from 0 to 1. You can find the right values you need
|
||||
<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 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>
|
||||
<li><strong>Quadratic</strong> timing functions: <kbd>easeInQuad</kbd>, <kbd>easeOutQuad</kbd> and <kbd>easeInOutQuad</kbd></li>
|
||||
<li><strong>Cubic</strong> timing functions: <kbd>easeInCubic</kbd>, <kbd>easeOutCubic</kbd> and <kbd>easeInOutCubic</kbd></li>
|
||||
<li><strong>Quartic</strong> timing functions: <kbd>easeInQuart</kbd>, <kbd>easeInQuart</kbd> and <kbd>easeInOutQuart</kbd></li>
|
||||
<li><strong>Quintic</strong> timing functions: <kbd>easeInQuint</kbd>, <kbd>easeOutQuint</kbd> and <kbd>easeInOutQuint</kbd></li>
|
||||
<li><strong>Exponential</strong> timing functions: <kbd>easeInExpo</kbd>, <kbd>easeOutExpo</kbd> and <kbd>easeInOutExpo</kbd></li>
|
||||
<li><strong>Back</strong> timing functions: <kbd>easeInBack</kbd>, <kbd>easeOutBack</kbd> and <kbd>easeInOutBack</kbd></li>
|
||||
<li><strong>Special slow motion</strong> timing functions look <a href="http://cubic-bezier.com/#0,.58,1,.3" target="_blank">like this</a>: <kbd>slowMo</kbd>, <kbd>slowMo1</kbd> and <kbd>slowMo2</kbd></li>
|
||||
</ul>
|
||||
<p>Cubic-bezier easing functions examples:</p>
|
||||
<div class="featurettes">
|
||||
<div class="example-item easing-example example-box bg-green">Linear</div>
|
||||
<div class="example-item easing-example example-box bg-pink"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
|
||||
<ul class="easings">
|
||||
<li>bezier(0.15, 0.7, 0.2, 0.9)</li>
|
||||
<li>bezier(0.25, 0.5, 0.6, 0.7)</li>
|
||||
<li>bezier(0.35, 0.2, 0.9, 0.2)</li>
|
||||
<li>easeIn</li>
|
||||
<li>easeOut</li>
|
||||
<li>easeInOut</li>
|
||||
<li>easeInSine</li>
|
||||
<li>easeOutSine</li>
|
||||
<li>easeInOutSine</li>
|
||||
<li>easeInQuad</li>
|
||||
<li>easeOutQuad</li>
|
||||
<li>easeInOutQuad</li>
|
||||
<li>easeInCubic</li>
|
||||
<li>easeOutCubic</li>
|
||||
<li>easeInOutCubic</li>
|
||||
<li>easeInQuart</li>
|
||||
<li>easeOutQuart</li>
|
||||
<li>easeInOutQuart</li>
|
||||
<li>easeInQuint</li>
|
||||
<li>easeOutQuint</li>
|
||||
<li>easeInOutQuint</li>
|
||||
<li>easeInExpo</li>
|
||||
<li>easeOutExpo</li>
|
||||
<li>easeInOutExpo</li>
|
||||
<li>easeInCirc</li>
|
||||
<li>easeOutCirc</li>
|
||||
<li>easeInOutCirc</li>
|
||||
<li>easeInBack</li>
|
||||
<li>easeOutBack</li>
|
||||
<li>easeInOutBack</li>
|
||||
<li>slowMo</li>
|
||||
<li>slowMo1</li>
|
||||
<li>slowMo2</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn-blue startEasingTween" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Physics Based Functions</h3>
|
||||
<p>KUTE.js also packs the <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> easing functions by Michael Villar and I have to say these functions are amazing in terms of flexibility, control and performance. They allow you
|
||||
to control the friction, bounciness, frequency, elasticity, or multiple bezier points for your animations.</p>
|
||||
<p><span class="text-blue text-strong">NOTE:</span> Starting with KUTE.js v 1.6.0 the Physics 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>You can use them either with regular Javascript invocation as shown below and configure / visualize them on the <a href="http://dynamicsjs.com/" target="_blank">author's website</a>, while you can also use the pack of presets featuring mostly
|
||||
<kbd>bezier</kbd> based functions. Ok now, let's get to it:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>spring</strong> function is basically an <strong>elastic</strong> type of easing that allows you to set <code>frequency:1-1000</code>, <code>friction:1-1000</code>, <code>anticipationSize:0-1000</code> (a kind of delay in miliseconds)
|
||||
and <code>anticipationStrength:0-1000</code> (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: <code>easing: spring({friction:100,frequency:600})</code>.</li>
|
||||
<li><strong>bounce</strong> function is also an <strong>elastic</strong> easing function, but it works different than Robert Penner's version that's basically a <kbd>gravity</kbd> based function. This one here will always come back to the
|
||||
starting values. This function allows you to set <code>frequency:0-1000</code> and <code>friction:0-1000</code>. Usage: <code>easing: bounce({friction:100,frequency:600})</code>.</li>
|
||||
<li><strong>gravity</strong> function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>. Usage: <code>easing: gravity({elasticity:100,bounciness:600})</code>.</li>
|
||||
<li><strong>forceWithGravity</strong> function acts just like <code>gravity</code> except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>.
|
||||
Usage: <code>easing: forceWithGravity({elasticity:100,bounciness:600})</code>.</li>
|
||||
<li><strong>bezier</strong> easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: <code>easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE})</code>, again use the author's website,
|
||||
edit the bezier curve as you wish and copy paste the points array into this function. Here's how a basic <em>easeIn</em> looks like:
|
||||
<pre><code class="language-javascript">// sample bezier based easing
|
||||
easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
|
||||
</code></pre> In other cases, the bezier can handle multiple points as well, basically unlimited:
|
||||
<pre><code class="language-javascript">// multi point bezier easing
|
||||
easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
|
||||
</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The presets can be used both as a string <code>easing:'physicsIn'</code> or <code>easing: Physics.physicsIn(friction:200)</code>. The list is:</p>
|
||||
<ul>
|
||||
<li><strong>curves</strong>: <kbd>physicsIn</kbd>, <kbd>physicsOut</kbd>, <kbd>physicsInOut</kbd> can do all multipliers (from sinusoidal to exponential) via the <code>friction</code> option;</li>
|
||||
<li><strong>back</strong>: <kbd>physicsBackIn</kbd>, <kbd>physicsBackOut</kbd>, <kbd>physicsBackInOut</kbd> also benefit from the <code>friction</code> option.</li>
|
||||
</ul>
|
||||
<p>Physics easing functions examples:</p>
|
||||
<div class="featurettes">
|
||||
<div class="example-item easing-example example-box bg-green">Linear</div>
|
||||
<div class="example-item easing-example example-box bg-pink"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
|
||||
<ul class="easings">
|
||||
<li>physicsIn</li>
|
||||
<li>physicsOut</li>
|
||||
<li>physicsInOut</li>
|
||||
<li>physicsBackIn</li>
|
||||
<li>physicsBackOut</li>
|
||||
<li>physicsBackInOut</li>
|
||||
<li>spring</li>
|
||||
<li>bounce</li>
|
||||
<li>gravity</li>
|
||||
<li>forceWithGravity</li>
|
||||
<li>bezier</li>
|
||||
<li>multiPointBezier</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn-blue startEasingTween" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./assets/js/kute-bezier.min.js"></script>
|
||||
<!-- KUTE.js Bezier Easing -->
|
||||
<script src="./assets/js/kute-physics.min.js"></script>
|
||||
<!-- KUTE.js Physics Easing -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/easing.js"></script>
|
||||
<!-- examples stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,515 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 10 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="Animation examples for KUTE.js core engine with most essential CSS and CSS3 properties, as well as all easing functions.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javscript animation,tweening engine,animation engine,css3 transform,box model,color,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
|
||||
<title>KUTE.js Core Engine Examples | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li class="active"><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
<p>When developing with native Javascript, a very basic syntax goes like this:</p>
|
||||
|
||||
<pre>
|
||||
<code class="language-javascript">// this is the tween object, basically KUTE.method(element, from, to, options);
|
||||
var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});</code>
|
||||
</pre>
|
||||
|
||||
<p>Now the tween object is created, it's a good time for you to know that via Native Javascript we <strong>always</strong> animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements
|
||||
such as <code>querySelectorAll()</code> or <code>getElementsByTagName()</code>, you need to do a <code>for ()</code> loop, or make use of the two new methods: <code>.allTo()</code> or <code>.allFromTo()</code>. Now let's apply the tween
|
||||
control methods:</p>
|
||||
|
||||
<pre><code class="language-javascript">tween.start(); // starts the animation
|
||||
tween.stop(); // stops current tween and all chained tweens animating
|
||||
tween.pause(); // pauses current tween animation
|
||||
tween.play(); // or tween.resume(); resumes current tween animation
|
||||
tween.chain(tween2); // when tween animation finished, you can trigger the start of another tween
|
||||
tween.playing // checks if the tween is currenlty active so we prevent start() when not needed
|
||||
tween.paused // checks if the tween is currenlty active so we can prevent pausing or resume if needed
|
||||
</code></pre>
|
||||
|
||||
<p>The demo for the above example is <a href="http://codepen.io/thednp/pen/Bozbgg" 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>
|
||||
|
||||
<h4>Translations</h4>
|
||||
<p>In the next example the first box is moving to left 250px with <code>translate</code> property, the second box is moving to the right by 200px using <code>translateX</code> and the third box is moving to the bottom using <code>translate3d</code>.
|
||||
The last box also uses <code>translate3d</code> but requires a <code>perspective</code> value for the animation on the Z axis to be effective.</p>
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:-250}); // or translate:[x,y] for both axis
|
||||
var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:200});
|
||||
var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,100,0]});
|
||||
var tween4 = KUTE.fromTo('selector4',{translate3d:[0,0,0]},{translate3d:[0,0,-100]},{parentPerspective: 100});
|
||||
</code></pre>
|
||||
<p>And here is how it looks like:</p>
|
||||
<div id="translate-examples" class="featurettes">
|
||||
<div class="example-item example-box bg-indigo">2D</div>
|
||||
<div class="example-item example-box bg-olive">X</div>
|
||||
<div class="example-item example-box bg-pink">Y</div>
|
||||
<div class="example-item example-box bg-red">Z</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>As you can see in your browsers console, for all animations <code>translate3d</code> is used, as explained in the <a href="features.html">features page</a>. Also the first example that's using the 2D <code>translate</code> for both vertical
|
||||
and horizontal axis even if we only set X axis. You can download this example <a href="http://codepen.io/thednp/share/zip/rOLbyY">here</a>.</p>
|
||||
<p><strong>Remember</strong>: stacking <code>translate</code> and <code>translate3d</code> together may not work and IE9 does not support <code>perspective</code>.</p>
|
||||
|
||||
<h4>Rotations</h4>
|
||||
<p>Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support <code>rotate3d</code>.</p>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
|
||||
var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
|
||||
var tween3 = KUTE.fromTo('selector3',{rotateY:0},{rotateY:160},{perspective:100});
|
||||
var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});
|
||||
</code></pre>
|
||||
|
||||
<p>And here is how it looks like:</p>
|
||||
<div id="rotExamples" class="featurettes">
|
||||
<div class="example-item example-box bg-blue">2D</div>
|
||||
<div class="example-item example-box bg-indigo">X</div>
|
||||
<div data-option-perspective="200" class="example-item example-box bg-olive">Y</div>
|
||||
<div class="example-item example-box bg-pink">Z</div>
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-green" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The <code>rotateX</code> and <code>rotateY</code> are 3D based rotations, so they require a perspective in order to make the browser render proper 3D layers, but in the example they animate different because only the second, Y axis, uses a
|
||||
<code>perspective</code> setting. The rotation on Z axis does not require a perspective. Unlike translations, you can stack all axis rotation for your animation, but we will see that in a later example. You can download this example <a
|
||||
href="http://codepen.io/thednp/share/zip/NGrmMR">here</a>.</p>
|
||||
|
||||
<h4>Skews</h4>
|
||||
<p>KUTE.js supports <code>skewX</code> and <code>skewY</code> so let's animate the two. Since they are 2D transformations, IE9 supports skews.</p>
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
|
||||
var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
|
||||
</code></pre>
|
||||
|
||||
<p>And here is how it looks like:</p>
|
||||
<div id="skewExamples" class="featurettes">
|
||||
<div class="example-item example-box bg-teal">X</div>
|
||||
<div class="example-item example-box bg-green">Y</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-yellow" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>You can download this example <a href='http://codepen.io/thednp/share/zip/wKWbKd/'>here</a>.</p>
|
||||
|
||||
<h4>Mixed Transformations</h4>
|
||||
<p>The current specification does not support animating different transform properties with multiple tween objects at the same time, you must stack them all together into a single object. See the example below:</p>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
|
||||
var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
|
||||
</code></pre>
|
||||
<p>If you check the <a href="http://codepen.io/thednp/pen/avZrYo" target="_blank">test here</a>, you will notice that only the <code>skewY</code> is going to work and no rotation. Now let's do this properly.</p>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo(
|
||||
'selector1', // element
|
||||
{translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
|
||||
{translateX:250, rotateX:360, rotateY:15, rotateZ:5}, // to
|
||||
{perspective:400, perspectiveOrigin: 'center top'} // transform options
|
||||
);
|
||||
var tween2 = KUTE.fromTo(
|
||||
'selector2', // element
|
||||
{translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from values
|
||||
{translateX:-250, rotateX:360, rotateY:15, rotateZ:5}, // to values
|
||||
{parentPerspective:400, parentPerspectiveOrigin: 'center top'} // transform options
|
||||
);
|
||||
</code></pre>
|
||||
<p>Now you can see we are using the specific transform options, the first tween object uses these settings for an element and the second for its parent.</p>
|
||||
|
||||
<div id="mixTransforms" class="featurettes">
|
||||
<div class="example-item example-box bg-pink" style="line-height: 50px; font-size: 25px;">element perspective 400px</div>
|
||||
<div class="example-item example-box bg-orange" style="line-height: 50px; font-size: 25px;">parent perspective 400px</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-olive" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example <a href='http://codepen.io/thednp/share/zip/jbrovv/'>here</a>.</p>
|
||||
|
||||
<h4>Chained Transformations</h4>
|
||||
<p>KUTE.js has the ability to stack transform properties as they come in chained tweens because when we run animations one after another we are kinda expecting a certain degree of continuity. As explained before, the best solution is the <code>.to()</code> method because it has the ability to <strong>stack</strong> properties found in the element's inline styling, mostly from previous tween animation, and use them as start values for the next tween. It also transfers unchanged values to
|
||||
values end for that same reason. OK now, let's see a side by side comparison with 3 elements:</p>
|
||||
<div id="chainedTweens" class="featurettes">
|
||||
<div class="example-item example-box bg-gray" style="font-size: 30px">FROMTO</div>
|
||||
<div class="example-item example-box bg-olive" style="font-size: 30px">FROMTO</div>
|
||||
<div class="example-item example-box bg-indigo" style="font-size: 30px">TO</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>What's this all about?</p>
|
||||
<ul>
|
||||
<li>the first box uses a regular <code class="bg-gray">.fromTo()</code> object, we are doing things normally, we would expect them to work properly but due to the nature of the transforms, this is what it does</li>
|
||||
<li>the second box is also using <code class="bg-olive">.fromTo()</code> object, but using proper values for all tweens at all times, so we fixed that glitch</li>
|
||||
<li>and the last box uses the <code class="bg-indigo">.to()</code> method, and does the chaining easier for most properties, especially for <code>transform</code></li>
|
||||
</ul>
|
||||
|
||||
<p>When coding transformation chains I would highly recommend:</p>
|
||||
<ul>
|
||||
<li>keep the same order of the transform properties, best would be: translation, rotation, skew and scale; an example of the difference shown <a href="http://jsfiddle.net/nvy26bgb/" target="_blank">here</a> for rotations and
|
||||
<a href="http://jsfiddle.net/nvy26bgb/1/"
|
||||
target="_blank">here</a> for rotations and skew;</li>
|
||||
<li>2D and 3D translations would work best in if you provide a value at all times; eg. <code>translate:[x,y]</code> and <code>translate3d:[x,y,z]</code>; for instance using <code>translate:150</code> or <code>translateX:150</code> would mean
|
||||
that all other axis are 0;</li>
|
||||
<li>on larger amount of elements animating chains, the <code>.fromTo()</code> method is fastest, so you will have more work, but can potentially minimize or eliminate any syncronization issues that may occur, as explained in the <a href="features.html">features page</a>;</li>
|
||||
<li>download this example <a href='http://codepen.io/thednp/share/zip/PPWZRL/'>here</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Box Model Properties</h3>
|
||||
<p>KUTE.js core engine supports most used box model properties, and almost all the box model properties via the <a href="css.html">CSS Plugin</a>, so the next example will only animate <code>width</code>, <code>height</code>, <code>top</code> and <code>left</code>.</p>
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{width:200});
|
||||
var tween2 = KUTE.to('selector1',{height:300});
|
||||
var tween3 = KUTE.to('selector1',{left:250});
|
||||
var tween4 = KUTE.to('selector1',{top:100});
|
||||
</code></pre>
|
||||
<p>We're gonna chain these tweens and start the animation. You can download this example <a href='http://codepen.io/thednp/share/zip/xwqYbX/'>here</a>.</p>
|
||||
<div id="boxModel" class="featurettes">
|
||||
<div class="example-item example-box bg-lime" style="line-height: 75px; font-size:30px">BOX MODEL</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-orange" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>TIP: the <code>width</code> and <code>height</code> properties used together can be great for <code>scale</code> animation fallback on images for legacy browsers.</p>
|
||||
|
||||
<h3>Color Properties</h3>
|
||||
<p>The next example is about animating color properties. As for example, check these lines for reference. Additional color properties such as <code>borderColor</code> or <code>borderLeftColor</code> are supported via the <a href="css.html">CSS Plugin</a>.</p>
|
||||
<pre><code class="language-javascript">KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
|
||||
KUTE.to('selector1',{backgroundColor:'#069'}).start();
|
||||
KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
|
||||
</code></pre>
|
||||
<p>Let's get some animation going. Download the example <a href='http://codepen.io/thednp/share/zip/OypvNR/'>here</a>.</p>
|
||||
|
||||
<div id="colBox" class="featurettes">
|
||||
<div class="example-item example-box bg-olive">Colors</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>A quick reminder: you can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on IE8 and it will fallback to <code>RGB</code>.</p>
|
||||
|
||||
<h3>Vertical Scrolling</h3>
|
||||
<p>Another property we can animate with KUTE.js is <code>scrollTop</code>. I works for both the window and any scrollable object. Quick example:</p>
|
||||
<pre><code class="language-javascript">KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
|
||||
KUTE.to('window',{scroll:450}).start(); // for the window
|
||||
</code></pre>
|
||||
<p>The scroll animation could however be influenced by mouse hover effects, usually creating some really nasty bottlenecks, but you can always add some CSS to your page to prevent that:</p>
|
||||
<pre><code class="language-css">/* prevent scroll bottlenecks */
|
||||
body[data-tweening="scroll"],
|
||||
body[data-tweening="scroll"] * { pointer-events: none !important; }
|
||||
</code></pre>
|
||||
<p>A working example would work like <a href="http://codepen.io/thednp/pen/bVqKmp/" target="_blank">this</a>. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.</p>
|
||||
|
||||
|
||||
<h3 id="crossbrowser">Cross Browser Animation Example</h3>
|
||||
<p>Unlike the examples <a href="http://codepen.io/thednp/pens/public/" target="_blank">hosted on Codepen</a>, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers according to their supported properties, so stick around. So, if your target audience uses legacy browsers in a significant percent, check to have the proper polyfills and also make sure you target your browsers, here's a <a href="http://browserhacks.com/" target="_blank">complete reference</a>. Now we are ready:</p>
|
||||
|
||||
<h4>Collect Information And Cache It</h4>
|
||||
<pre><code class="language-javascript">// grab an HTML element to build a tween object for it
|
||||
var element = document.getElementById("myElement");
|
||||
|
||||
// check for IE legacy browsers
|
||||
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false;
|
||||
var isIE8 = isIE === 8;
|
||||
var isIE9 = isIE === 9;
|
||||
|
||||
|
||||
// most browsers have specific checks, so make sure
|
||||
// you include all you need for your target audience
|
||||
|
||||
</code></pre>
|
||||
<h4>Define Properties And Options Objects</h4>
|
||||
<pre><code class="language-javascript">// create values and options objects
|
||||
var startValues = {};
|
||||
var endValues = {};
|
||||
var options = {};
|
||||
|
||||
// here we define properties that are commonly supported
|
||||
startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
|
||||
|
||||
// here we define the properties according to the target browsers
|
||||
if (isIE8) { // or any other browser that doesn"t support transforms
|
||||
startValues.left = 0;
|
||||
endValues.left = 250;
|
||||
// for IE we override color values
|
||||
startValues.backgroundColor = '#CDDC39';
|
||||
endValues.backgroundColor = '#ec1e71';
|
||||
// IE8 also doesn't support RGBA, we set to animate the opacity of the element
|
||||
startValues.opacity = 1;
|
||||
endValues.opacity = 0.2;
|
||||
} else if (isIE9) { // or any other browser that only support 2d transforms
|
||||
startValues.translate = 0; // 2d translate on X axis
|
||||
endValues.translate = 250;
|
||||
startValues.rotate = -180; // 2d rotation on Z axis
|
||||
endValues.rotate = 0;
|
||||
startValues.scale = 1; // 2d scale
|
||||
endValues.scale = 1.5;
|
||||
} else { // most modern browsers
|
||||
startValues.translate3d = [0,0,0]; //3d translation on X axis
|
||||
endValues.translate3d = [250,0,0];
|
||||
startValues.rotateZ = -180; // 3d rotation on Z axis
|
||||
endValues.rotateZ = 0;
|
||||
startValues.rotateX = -20; // 3d rotation on X axis
|
||||
endValues.rotateX = 0;
|
||||
startValues.scale = 1; // 2d scale
|
||||
endValues.scale = 1.5;
|
||||
options.perspective = 400; // 3d transform option
|
||||
}
|
||||
|
||||
// common tween options
|
||||
options.easing = "easingCubicOut";
|
||||
options.duration = 2500;
|
||||
options.yoyo = true;
|
||||
options.repeat = 1;
|
||||
</code></pre>
|
||||
|
||||
<h4>Build Tween Object And Tween Controls</h4>
|
||||
<pre><code class="language-javascript">// the cached object
|
||||
var myTween = KUTE.fromTo(element, startValues, endValues, options);
|
||||
|
||||
// trigger buttons
|
||||
var startButton = document.getElementById('startButton'),
|
||||
stopButton = document.getElementById('stopButton'),
|
||||
playPauseButton = document.getElementById('playPauseButton');
|
||||
|
||||
// add handlers for the trigger buttons
|
||||
startButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if (!myTween.playing) { myTween.start(); } // only start the animation if hasn't started yet
|
||||
}, false);
|
||||
stopButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if (myTween.playing) { myTween.stop(); } // only stop the animation if there is any
|
||||
}, false);
|
||||
playPauseButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
if (!myTween.paused && myTween.playing) {
|
||||
myTween.pause(); playPauseButton.innerHTML = 'Resume';
|
||||
} else {
|
||||
myTween.resume();
|
||||
playPauseButton.innerHTML = 'Pause';
|
||||
}
|
||||
}, false);
|
||||
</code></pre>
|
||||
<h4>Live Demo</h4>
|
||||
<div class="featurettes" id="crossBrowser">
|
||||
<div id="myElement" class="example-item example-box bg-yellow">
|
||||
|
||||
</div>
|
||||
<div class="example-buttons">
|
||||
<a id="playPauseButton" class="btn btn-orange" href="#">Pause</a>
|
||||
<a id="startButton" class="btn btn-blue" href="#">Start</a>
|
||||
<a id="stopButton" class="btn btn-red" href="#">Stop</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Let's explain this code a bit. KUTE.js gives you the internal variables <code>myTween.playing</code> and <code>myTween.paused</code> (both true/false) to help you easily manage the tween control methods all together as in this example
|
||||
here. As said before, KUTE.js version 0.9.5 doesn't stat animating by default, for all the examples on this page you have to start it yourself, unlike their versions hosted on Codepen.</p>
|
||||
<p>Also please know that opacity animation only works on Internet Explorer 8 if the target element uses <code>float: left/right</code>, <code>display: block</code> or <code>display: inline-block</code>.</p>
|
||||
<ul>
|
||||
<li>the <code class="bg-blue">START</code> button will use the <code>.start()</code> method and the animation starts;</li>
|
||||
<li>the <code class="bg-red">STOP</code> button will use the <code>.stop()</code> method and stops the animation; after this the, animation can only be started again</li>
|
||||
<li>the <code class="bg-orange">PAUSE</code> button will use the <code>.pause()</code> method and pauses the animation; this also changes the button's text and functionality;</li>
|
||||
<li>the <code class="bg-olive">RESUME</code> button will use the <code>.resume()</code> method and resumes the animation; this reverses the button's initial state;</li>
|
||||
<li>make sure you work with the conditions properly when you want to pause an animation you MUST check both <code>!myTween.playing</code> and <code>myTween.paused</code> conditions because you could end up with errors.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Tween Object Collections</h3>
|
||||
<p>With KUTE.js 1.5.0 new tween object constructor methods were introduced, and they allow you to create a tween object for each element in a collection, a very handy way to ease and speed up the animation programing workflow. Let's have
|
||||
a little fun.</p>
|
||||
<pre><code class="language-javascript">// a simple .to() for a collection of elements would look like this
|
||||
var myMultiTween1 = KUTE.allTo('selector1',{translate:[0,150]});
|
||||
|
||||
// or a more complex .fromTo() example with the two new options
|
||||
var myMultiTween2 = KUTE.allFromTo(
|
||||
'selector2',
|
||||
{translate:[0,0], rotate: 0},
|
||||
{translate:[0,150], rotate: 360},
|
||||
{transformOrigin: '10% 10%', offset: 200 }
|
||||
);
|
||||
</code></pre>
|
||||
<p>And should looks like this:</p>
|
||||
<div class="featurettes">
|
||||
<div class="example-item example-box example-multi bg-indigo">K</div>
|
||||
<div class="example-item example-box example-multi bg-olive">U</div>
|
||||
<div class="example-item example-box example-multi bg-pink">T</div>
|
||||
<div class="example-item example-box example-multi bg-red">E</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-green" onclick="startMultiTween();" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>As you can see, we also used the new tween options <code>offset</code> and <code>transformOrigin</code> and they make it so much more easy.</p>
|
||||
|
||||
|
||||
<h3>Easing Functions</h3>
|
||||
<p>KUTE.js core engine comes with Robert Penner's easing functions, but it can also work with any other easing functions, including custom functions. In the example below the first box animation uses the <code>linear</code> easing function
|
||||
and the second will use another function you choose.</p>
|
||||
<div class="featurettes">
|
||||
<div class="example-item easing-example example-box bg-green">Linear</div>
|
||||
<div class="example-item easing-example example-box bg-pink"></div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<div class="btn-group">
|
||||
<a id="easingSelectButton" class="btn btn-red" data-function="toggle" href="#">Select</a>
|
||||
<ul id="easings">
|
||||
<li>easingSinusoidalIn</li>
|
||||
<li>easingSinusoidalOut</li>
|
||||
<li>easingSinusoidalInOut</li>
|
||||
<li>easingQuadraticIn</li>
|
||||
<li>easingQuadraticOut</li>
|
||||
<li>easingQuadraticInOut</li>
|
||||
<li>easingCubicIn</li>
|
||||
<li>easingCubicOut</li>
|
||||
<li>easingCubicInOut</li>
|
||||
<li>easingQuarticIn</li>
|
||||
<li>easingQuarticOut</li>
|
||||
<li>easingQuarticInOut</li>
|
||||
<li>easingQuinticIn</li>
|
||||
<li>easingQuinticOut</li>
|
||||
<li>easingQuinticInOut</li>
|
||||
<li>easingCircularIn</li>
|
||||
<li>easingCircularOut</li>
|
||||
<li>easingCircularInOut</li>
|
||||
<li>easingExponentialIn</li>
|
||||
<li>easingExponentialOut</li>
|
||||
<li>easingExponentialInOut</li>
|
||||
<li>easingBackIn</li>
|
||||
<li>easingBackOut</li>
|
||||
<li>easingBackInOut</li>
|
||||
<li>easingElasticIn</li>
|
||||
<li>easingElasticOut</li>
|
||||
<li>easingElasticInOut</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a id="startEasingTween" class="btn btn-blue" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>For more examples and info about the other easing functions, head over to the <a href="easing.html">easing examples</a> page.</p>
|
||||
</div>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/examples.js"></script>
|
||||
<!-- examples stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
376
demo/extend.html
376
demo/extend.html
|
|
@ -1,376 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="A detailed guide how to extend or customize the functionality KUTE.js, with an example for a box-shadow plugin.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,extend,box-shadow animation,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
|
||||
<title>Extending 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li class="active"><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h2>Extend Guide</h2>
|
||||
<p>KUTE.js is a very flexible animation engine that allows you to extend beyond measure. In this tutorial we'll dig into what's best to do to extend/customize the functionality of KUTE.js core, plugins and features.</p>
|
||||
|
||||
<h3>Basic Plugin Template</h3>
|
||||
<p>The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:</p>
|
||||
<pre><code class="language-javascript">/* KUTE.js - The Light Tweening Engine
|
||||
* by dnp_theme
|
||||
* package - pluginName
|
||||
* desc - what your plugin does
|
||||
* pluginName by yourNickname aka YOUR NAME
|
||||
* Licensed under MIT-License
|
||||
*/
|
||||
|
||||
(function (root,factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['kute.js'], factory);
|
||||
} else if(typeof module == 'object' && typeof require == 'function') {
|
||||
module.exports = factory(require('kute.js'));
|
||||
} else if ( typeof root.KUTE !== 'undefined' ) {
|
||||
factory(root.KUTE);
|
||||
} else {
|
||||
throw new Error("pluginName require KUTE.js.");
|
||||
}
|
||||
}(this, function (KUTE) {
|
||||
// your code goes here
|
||||
|
||||
// in this function body
|
||||
|
||||
// the plugin returns this
|
||||
return this;
|
||||
}));
|
||||
</code></pre>
|
||||
<p>As suggested in the above template, your function body could be written with one or more of the examples below.</p>
|
||||
|
||||
<h3>Extend Tween Control</h3>
|
||||
<p>In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check <code>Tween</code> function to get the internal references notation:</p>
|
||||
<pre><code class="language-javascript">//add a reference to _tween function
|
||||
var Tween = KUTE.Tween;
|
||||
|
||||
// let's add a timescale method
|
||||
Tween.prototype.timescale = function(factor){
|
||||
this.options.duration *= factor;
|
||||
return this;
|
||||
}
|
||||
|
||||
// or let's add a reverse method
|
||||
Tween.prototype.reverse = function(){
|
||||
for (var p in this.valuesEnd) {
|
||||
var tmp = this.valuesRepeat[p]; // we cache this object first
|
||||
this.valuesRepeat[p] = this.valuesEnd[p];
|
||||
this.valuesEnd[p] = tmp;
|
||||
this.valuesStart[p] = this.valuesRepeat[p];
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// go back in time
|
||||
Tween.prototype.seek = function (time) {
|
||||
this._startTime -= time;
|
||||
return this;
|
||||
};
|
||||
|
||||
// how about a restart method
|
||||
Tween.prototype.restart = function(){
|
||||
if (this.playing) {
|
||||
this.stop();
|
||||
this.start();
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// methods to queue callbacks with ease
|
||||
Tween.prototype.onUpdate = function(){
|
||||
this.options.update = arguments;
|
||||
return this;
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
<p>For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very specific need.</p>
|
||||
|
||||
<h3>Support For Additional CSS Properties</h3>
|
||||
<p>KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and
|
||||
you'll master it real quick, it's very easy.</p>
|
||||
<p>We need basically 3 functions:</p>
|
||||
<ul>
|
||||
<li><code>KUTE.prepareStart['propertyName']</code> <kbd class="bg-red">required</kbd> a function to get the current value of the property required for the <code>.to()</code> method;</li>
|
||||
<li><code>KUTE.parseProperty['propertyName']</code> <kbd class="bg-red">required</kbd> a function to process the user value / current value to have it ready to tween;</li>
|
||||
<li><code>KUTE.dom['propertyName']</code> <kbd class="bg-red">required</kbd> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
|
||||
<li><code>KUTE.crossCheck['propertyName']</code> <kbd class="bg-green">optional</kbd> a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms
|
||||
and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;</li>
|
||||
<li>also <kbd class="bg-green">optional</kbd> additional functions that will help with value processing.</li>
|
||||
</ul>
|
||||
<p>So let's add support for <kbd class="bg-olive">boxShadow</kbd>! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template
|
||||
and let's break it down to pieces:</p>
|
||||
<pre><code class="language-javascript">// add a reference to global and KUTE object
|
||||
var g = typeof global !== 'undefined' ? global : window, K = KUTE,
|
||||
// add a reference to KUTE utilities
|
||||
prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
|
||||
property = K.property, parseProperty = K.parseProperty, trueColor = K.truC,
|
||||
DOM = K.dom, color = g.Interpolate.color, unit = g.Interpolate.unit; // interpolation functions
|
||||
|
||||
// the preffixed boxShadow property, mostly for legacy browsers
|
||||
// maybe the browser is supporting the property with its vendor preffix
|
||||
// box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
|
||||
var _boxShadow = property('boxShadow'); // note we're using the KUTE.property() autopreffix utility
|
||||
var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi; // a full RegEx for color strings
|
||||
|
||||
// for browsers that don't support the property, use a filter
|
||||
// if (!(_boxShadow in document.body.style)) {return;}
|
||||
</code></pre>
|
||||
<p>Now we have access to the KUTE object, prototypes and it's utility functions, let's write a <code>prepareStart</code> function that will read the current <code>boxShadow</code> value:</p>
|
||||
<pre><code class="language-javascript">// for the .to() method, you need to prepareStart the boxShadow property
|
||||
// which means you need to read the current computed value
|
||||
// if the current computed value is not acceptable, use a default value
|
||||
prepareStart['boxShadow'] = function(property,value){
|
||||
var cssBoxShadow = getCurrentStyle(this.element,'boxShadow'); // where getCurrentStyle() is an accurate method to read the current property value
|
||||
return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow; // if the current value is not valid, use a default one
|
||||
}
|
||||
|
||||
// note that in some cases the window.getComputedStyle(this.element,null) can be faster or more appropriate
|
||||
// we are using a hybrid function that's trying to get proper colors and other stuff
|
||||
// some legacy browsers lack in matters of accuracy so the KUTE.js core methods would suffice
|
||||
|
||||
// also to read the current value of an attribute, replace first line of the above function body with this
|
||||
// var attrValue = element.getAttribute(property);
|
||||
// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types
|
||||
</code></pre>
|
||||
|
||||
<p>Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to <code>this</code> that has the target element, options, start and end values and everything else. This is extremely useful if
|
||||
you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name</p>
|
||||
|
||||
<p>Now we need an utility function that makes sure the structure looks right for the DOM update function.</p>
|
||||
<pre><code class="language-javascript">// utility function to process values accordingly
|
||||
// numbers must be floats/integers and color must be rgb object
|
||||
var processBoxShadowArray = function(shadow){
|
||||
var newShadow;
|
||||
// properly process the shadow based on amount of values
|
||||
if (shadow.length === 3) { // [h-shadow, v-shadow, color]
|
||||
newShadow = [shadow[0], shadow[1], 0, 0, shadow[2], 'none'];
|
||||
} else if (shadow.length === 4) { // [h-shadow, v-shadow, color, inset] | [h-shadow, v-shadow, blur, color]
|
||||
newShadow = /inset|none/.test(shadow[3]) ? [shadow[0], shadow[1], 0, 0, shadow[2], shadow[3]] : [shadow[0], shadow[1], shadow[2], 0, shadow[3], 'none'];
|
||||
} else if (shadow.length === 5) { // [h-shadow, v-shadow, blur, color, inset] | [h-shadow, v-shadow, blur, spread, color]
|
||||
newShadow = /inset|none/.test(shadow[4]) ? [shadow[0], shadow[1], shadow[2], 0, shadow[3], shadow[4]] : [shadow[0], shadow[1], shadow[2], shadow[3], shadow[4], 'none'];
|
||||
} else if (shadow.length === 6) { // ideal [h-shadow, v-shadow, blur, spread, color, inset]
|
||||
newShadow = shadow;
|
||||
}
|
||||
|
||||
// make sure the numbers are ready to tween
|
||||
for (var i=0; i<4; i++){
|
||||
newShadow[i] = parseFloat(newShadow[i]);
|
||||
}
|
||||
// make sure color is an rgb object
|
||||
newShadow[4] = trueColor(newShadow[4]); // where K.truC()/trueColor is a core method to return the true color in rgb object format
|
||||
return newShadow;
|
||||
};
|
||||
</code></pre>
|
||||
|
||||
<p>Next we'll need to write a <code>parseProperty</code> function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the <code>KUTE.dom['boxShadow']</code> function into the
|
||||
KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.</p>
|
||||
|
||||
<pre><code class="language-javascript">// the parseProperty for boxShadow
|
||||
// registers the window.dom['boxShadow'] function
|
||||
// returns an array of 6 values in the following format
|
||||
// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
|
||||
parseProperty['boxShadow'] = function(property,value,element){
|
||||
// the DOM update function for boxShadow registers here
|
||||
// we only enqueue it if the boxShadow property is used to tween
|
||||
if ( !('boxShadow' in DOM) ) {
|
||||
DOM['boxShadow'] = function(element,property,startValue,endValue,progress) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress
|
||||
|
||||
// let's start with the numbers | set unit | also determine inset
|
||||
var numbers = [], px = 'px', // the unit is always px
|
||||
inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false;
|
||||
|
||||
for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers
|
||||
numbers.push( unit(startValue[i], endValue[i], px, progress) );
|
||||
}
|
||||
|
||||
// now we handle the color
|
||||
var colorValue = color(startValue[4],endValue[4],progress);
|
||||
|
||||
// last piece of the puzzle, the DOM update
|
||||
element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
|
||||
};
|
||||
}
|
||||
|
||||
// processProperty for boxShadow, builds basic structure with ready to tween values
|
||||
if (typeof value === 'string'){
|
||||
var shadowColor, inset = 'none';
|
||||
// make sure to always have the inset last if possible
|
||||
inset = /inset/.test(value) ? 'inset' : inset;
|
||||
value = /inset/.test(value) ? value.replace(/(\s+inset|inset+\s)/g,'') : value;
|
||||
|
||||
// also getComputedStyle often returns color first "rgb(0, 0, 0) 15px 15px 6px 0px inset"
|
||||
shadowColor = value.match(colRegEx);
|
||||
value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
|
||||
|
||||
// now we can use the above specific utitlity
|
||||
value = processBoxShadowArray(value);
|
||||
} else if (value instanceof Array){
|
||||
value = processBoxShadowArray(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>And now, we are ready to tween both <code>.to()</code> and <code>.fromTo()</code> methods:</p>
|
||||
<pre><code class="language-javascript">// tween to a string value
|
||||
var myBSTween1 = KUTE.to('selector', {boxShadow: '15px 25px #069'}).start();
|
||||
|
||||
// or a fromTo with string and array, hex and rgb
|
||||
var myBSTween2 = KUTE.fromTo('selector', {boxShadow: [15, 25, 0, '#069']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
|
||||
|
||||
// maybe you want to animate an inset boxShadow?
|
||||
var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
|
||||
</code></pre>
|
||||
<p>You are now ready to demo!</p>
|
||||
<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>
|
||||
<p>This plugin should be compatible with IE9+ and anything that supports <code>boxShadow</code> CSS property. As you can see it can handle pretty much anything you throw at it, but it requires at least 3 values: h-shadow, v-shadow, and color
|
||||
because Safari doesn't work without a color. Also this plugin won't be able to handle multiple instances of <code>boxShadow</code> for same element, because the lack of support on legacy browsers, also the color cannot be RGBA, but hey,
|
||||
it supports both outline and inset shadows and you can fork it anyway to your liking.</p>
|
||||
<p>If you liked this tutorial, feel free to write your own, a great idea would be for <code>textShadow</code>, it's very similar to the above example plugin.</p>
|
||||
|
||||
<h3>Utility Methods</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-lime">KUTE.selector(selector,multi)</kbd> is the selector utility that uses <code>getElementById</code> or <code>querySelector</code> when <code>multi</code> argument is <strong>null</strong> or <strong>false</strong>, BUT
|
||||
when <strong>true</strong>, <code>querySelectorAll</code> is used and returns a HTMLCollection object.</li>
|
||||
<li><kbd class="bg-lime">KUTE.property(propertyName)</kbd> is the <strong>autoPrefix</strong> function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function
|
||||
returns <strong>undefinedPropertyName</strong> and that would be an easy way to detect support for that property on most legacy browsers: <pre><code class="language-javascript">if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }</code></pre></li>
|
||||
<li><kbd class="bg-lime">KUTE.getPrefix()</kbd> returns a vendor preffix even if the browser supports a specific preffixed property or not.</li>
|
||||
<li><kbd class="bg-lime">KUTE.getCurrentStyle(element,property)</kbd> a hybrid <code>getComputedStyle</code> function to get the current value of the property required for the <code>.to()</code> method; it actually checks in <code>element.style</code>,
|
||||
<code>element.currentStyle</code> and <code>window.getComputedStyle(element,null)</code> to make sure it won't miss the property value;</li>
|
||||
<li><kbd class="bg-lime">KUTE.truD(value)</kbd> a function that accepts String and Number and returns a <code>{v: 150, u: 'px'}</code> object for any box model or a single numeric value based property and make it ready to tween. When a second
|
||||
parameter is set to <i>true</i> it will return an object with value and unit specific for rotation angles and skews.</li>
|
||||
<li><kbd class="bg-lime">KUTE.truC(color)</kbd> a function that returns an <code>{r: 150, g: 150, b: 0}</code> color object ready to tween; if the color value is a <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe color</a>,
|
||||
the IE9+ browsers will be able to return the rgb object we need.</li>
|
||||
<li><kbd class="bg-lime">KUTE.htr(hex)</kbd> a function that accepts HEX formatted colors and returns an <code>{r: 150, g: 150, b: 0}</code> color object;</li>
|
||||
<li><kbd class="bg-lime">KUTE.rth(r,g,b)</kbd> a function that accepts numeric values for red, blue and green and returns a HEX format <code>#006699</code> color string.</li>
|
||||
<li><kbd class="bg-lime">Interpolate.number</kbd> is most essential interpolation tool when developing plugins for various properties not supported in the core.</li>
|
||||
<li><kbd class="bg-lime">Interpolate.unit</kbd> is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like <code>width: 250px</code></li>
|
||||
<li><kbd class="bg-lime">Interpolate.color</kbd> is a very fast interpolation function for colors, as used in the above example.</li>
|
||||
<li><kbd class="bg-lime">Interpolate.coords</kbd> is SVG Plugin only, but you can have a look anytime when you're out of ideas.</li>
|
||||
</ul>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
<script src="./assets/js/kute-bs.js"></script>
|
||||
<!-- the boxShadow plugin -->
|
||||
<script src="./assets/js/extend.js"></script>
|
||||
<!-- examples with boxShadow plugin -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="An in-depth overview with all KUTE.js features, browser compatibility and performance.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,kute.js fetures,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
|
||||
<title>KUTE.js Features | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li class="active"><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Features Overview</h2>
|
||||
<h3 id="performance">Badass Performance</h3>
|
||||
<p>KUTE.js was developed with best practices in mind for <strong>fastest code execution</strong> and <strong>memory efficiency</strong>, but performance varies from case to case, as well as for all the
|
||||
other Javascript based animation engines. As a quick note on <a href="about.html#how">how it works</a>, well for the most part values are cached for the entire duration of the animation so that the
|
||||
repetitive tasks run smoothly, uninterruptible and avoid layout thrashing. We all know the more properties used or the more elements to animate at the same time, the more power is required.</p>
|
||||
|
||||
<p><span class="ion-ios-cog media"></span>Of course some would argue on many aspects, but we all trade something for the sake of something else, such as convenience and/or flexibility or fork a project
|
||||
that's already great to make it.. better. For the sake of performance or simply willing to provide a feature, some trade/neglect other elements such as syncronisation (check this
|
||||
<a href="https://www.youtube.com/watch?v=1ZWugkJV5Ks" target="_blank">video</a>), code simplicity (lots of CSS for a <a href="https://daneden.github.io/animate.css/" target="_blank">custom animation</a>)
|
||||
and more other.</p>
|
||||
<p>To learn more about how performance can vary from case to case, check out <a href="about.html#performance">this section</a>, it's very informative.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3 id="extensible">Extensible Prototype</h3>
|
||||
<p>KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing
|
||||
functions, HTML presentation attributes or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. </p>
|
||||
<p>For instance if you want to be able to animate the <code>filter</code> property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function
|
||||
to read current value and the last one for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other
|
||||
tools you can use for your own plugin's processing.</p>
|
||||
<p>You may want to head over to the <a href="extend.html">extend</a> page for an indepth guide on how to write your own plugin/extension.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3 id="prefix">Auto Browser Prefix</h3>
|
||||
<p>KUTE.js uses a simple function to determine the vendor prefix and checks if the prefix is required. In any case it caches the prefixed/unprefixed property name in a variable to make it available when needed.
|
||||
This applies to the following CSS3 properties: <code>transform</code>, <code>perspective</code>, <code>perspective-origin</code>, <code>border-radius</code> and the <code>requestAnimationFrame</code>
|
||||
Javascript method.</p>
|
||||
<p><span class="ion-paper-airplane media"></span>We aren't only targeting properly browsers for CSS3 styling, but also increase performance because we don't need to update the styling on every frame for all
|
||||
browsers (and their versions) at once, just the right and only one; <strong>less</strong> string concatenation = <strong>more</strong> performance. This asumes you are NOT styling the above CSS3 properties
|
||||
using your stylesheets to avoid glitches with legacy browsers.</p>
|
||||
<p>This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3 id="compatibility">Browser Compatibility</h3>
|
||||
<p>KUTE.js covers all <strong>modern</strong> browsers but also provides fallback options for legacy browsers. The <strong>prefix free</strong> feature mentioned above is one way to enable smooth Javascript
|
||||
based animations on older versions Gecko/Webkit/IE browsers for <code>transform</code> and <code>border-radius</code>. Generally, KUTE.js is built around most used properties, so I highly recommend checking
|
||||
the <a href="http://caniuse.com" target="_blank">can I use</a> website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support
|
||||
<a href="http://caniuse.com/#feat=transforms2d">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d">3D transforms</a> so make sure you know what browsers support and
|
||||
<a href="http://browserhacks.com/" target="_blank">how to target them</a> before you get to work with a complete browser supported animation setup.</p>
|
||||
<p><span class="ion-android-globe media"></span>I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 (compatibility mode OFF) and it really works with the help of
|
||||
<a href="https://polyfill.io/" target="_blank">polyfills</a> and the appropriate code to detect them. All you need to do is to let the browser breathe, espectially IE8 needs to have resize handlers as minimal
|
||||
as possible. On the other side, IE9 really shines with 2D transforms animation, something that's impossible with CSS <code>transition</code>.</p>
|
||||
<p>Speaking of polyfills, KUTE.js no longer requires <code>window.requestAnimationFrame()</code> for the main thread, but it does require the <code>window.performance.now()</code> for checking the current time,
|
||||
<code>.indexOf()</code> for array/string checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> for scroll animation. Unlike other developers
|
||||
I didn't include these polyfills in the code to keep it clean, so that YOU decide whether your project need them or not. Also know that when using the recommended
|
||||
<a href="https://polyfill.io/" target="_blank">polyfill service</a> some <strong>browser detection will not work</strong> because they fill the gap and your code won't work as expected. For instance this would
|
||||
check for IE8 browser <code>var isIE = document.all && !document.addEventListener;</code> but the polyfill covers <code>.addEventListener()</code> so you will never succeed. This very demo is a great solution
|
||||
for targeting Microsoft's legacy browsers.</p>
|
||||
<p>As of Safari, we did some tests there too, KUTE.js does it really well.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3 id="methods">Methods, Tools and Options</h3>
|
||||
<h4>Building Tween Objects</h4>
|
||||
<p>KUTE.js allows you to create tween objects with the help of <code>.to()</code> and <code>.fromTo()</code> methods for a single element, with distinctive functionalities, and the other <code>.allTo()</code> and
|
||||
<code>.allFromTo()</code> that use the first two for collections of elements.</p>
|
||||
|
||||
<p><kbd>KUTE.to('selector', toValues, options)</kbd> method is super simple and straightforward and requires a polyfill for <code>window.getComputedStyle()</code> Javascript method on IE8 and more other legacy
|
||||
browsers in order to read the current property value. If no value is set in the stylesheets or inline style, a property specific value will be used. It also computes the value on animation start, delaying the
|
||||
actual animation and potentially creating sync issues on large amounts of elements, but it has the great ability to stack <code>transform</code> properties as they come in chained tweens. However fixing the
|
||||
sync issues is not that hard, see the example at <a href="api.html#start">start()</a> method API.</p>
|
||||
|
||||
<p><kbd>KUTE.fromTo('selector', fromValues, toValues, options)</kbd> is the other method that's most powerful in terms of performance, flexibility and control on the animation. As an example, while the first method
|
||||
may not process properties' measurement units properly, this method will never fail in that regard, because you can set for both starting values and end values the exact values with the right unit you need.</p>
|
||||
|
||||
<p>It doesn't stack <code>transform</code> properties for chained tweens but you can set all properties to be used in all tweens if you want (end values from previous tween become start values for the next AND
|
||||
unchanged start values become end values), and make sure nothing is left unchecked, to avoid animation glitches. Still, this method is the fastest and bestest for super performance and super control.</p>
|
||||
|
||||
<p><kbd>KUTE.allTo('selector', toValues, options)</kbd> and <kbd>KUTE.allFromTo('selector', fromValues, toValues, options)</kbd> inherit all functionality from the <code>.to()</code> and <code>.fromTo()</code>
|
||||
method respectively, but they apply to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the
|
||||
<a href="api.html">API</a> documentation on all the methods.</p>
|
||||
|
||||
<h4>Tween Control</h4>
|
||||
<p>Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: <code>.start()</code>, <code>.stop()</code>, <code>.pause()</code>
|
||||
and <code>.resume()</code>. These public methods work either when animation is not running, running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p>
|
||||
|
||||
<h4>Tween Options</h4>
|
||||
<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or
|
||||
a <code>perspective-origin</code>, right? Well, make sure to <a href="options.html">check that out</a>.</p>
|
||||
|
||||
<h4>Callback System</h4>
|
||||
<p>Another important KUTE.js feature is the solid callback system. This allows you to schedule functions to run on animation start, on each frame, on pause / resume, on stop and on complete. The functions bound at
|
||||
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: <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>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3>Developer Friendly</h3>
|
||||
<p><span class="ion-happy media"></span>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms. The terms in short
|
||||
allow you to use the script <strong>for free</strong> in both <strong>personal</strong> and <strong>commercial application</strong> as long as you give <strong>proper credits</strong> to the original author.
|
||||
Also a link back would be appreciated.</p>
|
||||
<p>Also KUTE.js is <a href="api.html">super documented</a>, all features and options are showcased with detailed <a href="examples.html">examples</a> so you can get your hands really dirty.</p>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
192
demo/filterEffects.html
Normal file
192
demo/filterEffects.html
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Filter Effects component for KUTE.js allows you to create CSS3 filter based animations on supporting browsers.">
|
||||
<meta name="keywords" content="css3 filter,filter,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Filter Effects</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">Filter Effects</h2>
|
||||
<p class="condensed lead">The component that animates the CSS3 <i>filter</i> property for specific <b>Element</b> targets on modern browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate <b>filter</b> functions for a target <b>Element</b> and deliver the best possible animation.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Filter Effects</b> component provides support for the CSS3 <b>filter</b> property on modern browsers.</p>
|
||||
<p>The component covers all <b>filter</b> functions, except that the <b>url()</b> function cannot be animated, however the component will
|
||||
try and keep it's value into the target element styling at all times.</p>
|
||||
<p>Similar to the <a href="transformFunctions.html">Transform Functions</a> and the <a href="transformMatrix.html">Transform Matrix</a> components,
|
||||
this component will try and keep same order of the filter functions, regardless of the input order, and the reason is that chained animations can
|
||||
have some unwanted janky artifact effects.</p>
|
||||
<p>Most values are in [0-Infinity] range and the presentation is delivered with <b>%</b> suffixed values, except <b>blur()</b> which uses <b>px</b>
|
||||
as unit/suffix.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3>Filter Functions</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">url()</kbd> function links an element to an SVG filter, the function is supported to keep it's value into the target element's style in case it's set
|
||||
initially or you want to set it yourself.</li>
|
||||
<li><kbd class="bg-olive">opacity()</kbd> can animate the opacity for a target element in the 0-100% range. Default is 100%.</li>
|
||||
<li><kbd class="bg-olive">blur()</kbd> can animate the blur for a target element in the 0-Infinity range. Default is <b>0px</b> and the unit is always <code>px</code>.</li>
|
||||
<li><kbd class="bg-olive">saturate()</kbd> can animate the color saturation for a target element in the 0-Infinity range. Default is 100%.</li>
|
||||
<li><kbd class="bg-olive">grayscale()</kbd> can animate the color desaturation for a target element in the 0-100% range. Default is 0%.</li>
|
||||
<li><kbd class="bg-olive">brightness()</kbd> can animate the brightness for a target element in the 0-Infinity range. Default is 100%.</li>
|
||||
<li><kbd class="bg-olive">contrast()</kbd> can animate the contrast for a target element in the 0-Infinity range. Default is 100%.</li>
|
||||
<li><kbd class="bg-olive">sepia()</kbd> can animate the sepia filter for a target element in the 0-100% range. Default is 0%.</li>
|
||||
<li><kbd class="bg-olive">invert()</kbd> can animate the color inversion for a target element in the 0-100% range. Default is 0%.</li>
|
||||
<li><kbd class="bg-olive">hueRotate()</kbd> can animate the color hue rotation for a target element in the 0-Infinity range. Default is 0deg.</li>
|
||||
<li><kbd class="bg-olive">dropShadow()</kbd> can animate the shadow and all related parameters for a target element. Default is <code>[0,0,0,'black']</code></li>
|
||||
</ul>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>Let's have a look at some sample tween objects and a quick example:</p>
|
||||
|
||||
<pre><code class="language-javascript">let fe1 = KUTE.to('selector1', {filter :{ blur: 5 }})
|
||||
let fe2 = KUTE.to('selector2', {filter :{ sepia: 50, invert: 80 }})
|
||||
let fe3 = KUTE.to('selector3', {filter :{ saturate: 150, brightness: 90 }})
|
||||
let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, dropShadow:[5,5,5,'olive'] }})
|
||||
</code></pre>
|
||||
|
||||
<div id="filter-examples" class="featurettes">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
|
||||
<defs>
|
||||
<filter id="mySVGFilter">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
|
||||
<feOffset dx="5" dy="5" result="offsetblur"/>
|
||||
<feFlood flood-color="#000000"/>
|
||||
<feComposite in2="offsetblur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE1</div>
|
||||
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE2</div>
|
||||
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE3</div>
|
||||
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE4</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The CSS filter property is supported on all major browsers nowadays, but it's better to <a href="https://caniuse.com/#feat=css-filter-function">check</a> and
|
||||
<a href="https://css-tricks.com/almanac/properties/f/filter/#browser-support">double check</a>.</li>
|
||||
<li>This component can be a great addition to all SVG related components, especially because the <code>dropShadow</code> provides a better experience than
|
||||
<code>boxShadow</code>, as <a href="https://codepen.io/Kseso/pen/Ajamv">shown here</a>.</li>
|
||||
<li>Since this component can work with the <code>url()</code> function the way it does, the <a href="htmlAttributes.html">HTML Attributes</a> component will
|
||||
complement greatly for even more animation potential.</li>
|
||||
<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>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>© 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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/filterEffects.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
236
demo/htmlAttributes.html
Normal file
236
demo/htmlAttributes.html
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The HTML Attributes component for KUTE.js enables animation for any numeric presentation attribute as well as specific color attributes.">
|
||||
<meta name="keywords" content="presentation attributes,attributes,html attributes,kute,kute.js,animation,javascript animations,tweening engine,animation engine,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js HTML Attributes</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">HTML Attributes</h2>
|
||||
<p class="condensed lead">The component that animates color attributes or any single value presentation attribute of a target element on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate a wide variety of presetantion attributes of a target element.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>HTML Attributes</b> component enables animation for any numeric presentation attribute, with or without a measurement unit / suffix as well as specific color attributes.</p>
|
||||
<p>The component can be a great asset for creating complex animations in combination with the SVG components as we'll see in the following examples.</p>
|
||||
<p>The component doesn't support attributes with multiple values like <b>stroke-dasharray</b>, <b>viewBox</b> or <b>transform</b> for specific reasons. To animate the <b>stroke</b> related attributes, the
|
||||
<a href="svgDraw.html">SVG Draw</a> component is the tool for you, while for transform you have the <a href="svgTransform.html">SVG Transform</a> component and the
|
||||
<a href="transformMatrix.html">Transform Matrix</a> component.</p>
|
||||
<p>Despite the "limitations" of this component, you have access to just about any <b>SVGElement</b> or <b>Element</b>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">presentation attribute</a> available.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3>General Usage</h3>
|
||||
|
||||
<pre><code class="language-javascript">// basic notation for unitless attributes
|
||||
var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
|
||||
|
||||
// OR for attributes that are ALWAYS suffixed / have a measurement unit
|
||||
var mySuffAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
|
||||
</code></pre>
|
||||
|
||||
<h3>Attributes Namespace</h3>
|
||||
<p>The <b>HTML Attributes</b> component can handle all possible single value presentation attributes with both dashed string and camel-case notation. Let's have a look at a sample notation so you can
|
||||
get the idea:</p>
|
||||
|
||||
<pre><code class="language-javascript">// dashed attribute notation
|
||||
var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
|
||||
|
||||
// non-dashed attribute notation
|
||||
var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
|
||||
</code></pre>
|
||||
|
||||
<p>The <code>strokeWidth</code> attribute is very interesting because it can work with <code>px</code>, <code>%</code> or with no unit/suffix. In this case, and in any context, the component will always work with the
|
||||
attribute's current value suffix to eliminate any possible janky animation.</p>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<h4>Color Attributes</h4>
|
||||
<p>The <b>HTML Attributes</b> component can also animate color attributes: <code>fill</code>, <code>stroke</code> and <code>stopColor</code>. If the elements are affected by their CSS counterparts, the effect
|
||||
is not visible, you need to make sure that doesn't happen.</p>
|
||||
|
||||
<pre><code class="language-javascript">// some fill rgb, rgba, hex
|
||||
var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
|
||||
|
||||
// some stopColor or 'stop-color'
|
||||
var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
|
||||
|
||||
<path id="fill" fill="#673AB7" 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"/>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="fillBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>If in this example the <code>fill</code> attribute value would reference a gradient, then <i>rgba(0,0,0,0)</i> is used. Keep in mind that the component will not work with combined
|
||||
fill values like <code>url(#pattern) rgba()</code>, you are better of only using the <code>url(#pattern)</code> and use other attributes to control directly the animation of that
|
||||
linked pattern, just like in the last example below.</p>
|
||||
|
||||
<h4>Unitless Attributes</h4>
|
||||
<p>In the next example, let's play with the attributes of a <code><circle></code> element: radius and center coordinates.</p>
|
||||
|
||||
<pre><code class="language-javascript">// radius attribute
|
||||
var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
|
||||
|
||||
// coordinates of the circle center
|
||||
var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
|
||||
</code></pre>
|
||||
|
||||
<p>A quick demo with the above:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
|
||||
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="circleBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Suffixed Attributes</h4 >
|
||||
<p>Similar to the example on circle attributes, we can also animate the gradient positions but this time with a specific to gradients suffix, and the component will make sure
|
||||
to always include the suffix for you, as in this example the <code>%</code> unit is found in the current value and used as unit for the DOM update:</p>
|
||||
|
||||
<pre><code class="language-javascript">// gradient positions to middle
|
||||
var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
|
||||
|
||||
// gradient positions rotated
|
||||
var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
|
||||
<stop offset="100%" style="stop-color: #2196F3; stop-opacity:1"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#gradient)" 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"/>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="gradBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The power of this little gem comes from the fact that it can work with internally undefined/unknown attributes, as well as with attributes that are not yet present in the W3 draft. As long as you provide valid values specific
|
||||
to the attribute, the component will assign an update function and will always double check for the current value to determine if it needs a suffix or if the attribute name needs adjustments
|
||||
(EG: <code>fillOpacity</code> becomes <code>fill-opacity</code>).</li>
|
||||
<li>This component is a great addition to complement any SVG related component as well as a great complement to <a href="filterEffects.html">Filter Effects</a> component.</li>
|
||||
<li>Remember to check your elements markup for changes, your animation might not be visible because equivalent CSS is used.</li>
|
||||
<li>This component is bundled with the standard <i>kute.js</i> and <i>kute-extra.js</i> distribution files.</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- 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>
|
||||
</div><!-- /.site-wrapper -->
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="./src/polyfill.min.js"></script>
|
||||
<script src="./src/kute-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/htmlAttributes.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
416
demo/index.html
416
demo/index.html
|
|
@ -1,233 +1,233 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 minimal 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="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<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>
|
||||
<title>KUTE.js | JavaScript Animation Engine</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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-wrap">
|
||||
<div class="columns welcome">
|
||||
<div class="col2 table">
|
||||
<div class="frontpage">
|
||||
<h2 class="nomargin"></h2>
|
||||
<p class="lead"></p>
|
||||
<p class="btns">
|
||||
<a class="btn btn-blue" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
|
||||
<a class="btn" href="https://github.com/thednp/kute.js">Github</a>
|
||||
<a class="btn" href="http://www.jsdelivr.com/#!kute.js">CDN 1</a>
|
||||
<a class="btn" href="https://cdnjs.com/libraries/kute.js">CDN 2</a>
|
||||
<a class="btn btn-green replay" href="#">Replay</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col2 table">
|
||||
<div class="cell">
|
||||
<div id="blocks" class="columns nomargin">
|
||||
<div class="col3 bg bg-yellow"></div>
|
||||
<div class="col3 bg bg-orange"></div>
|
||||
<div class="col3 bg bg-red"></div>
|
||||
|
||||
<div class="col3 bg bg-blue"></div>
|
||||
<div class="col3 bg bg-olive"></div>
|
||||
<div class="col3 bg bg-indigo"></div>
|
||||
|
||||
<div class="col3 bg bg-lime"></div>
|
||||
<div class="col3 bg bg-green"></div>
|
||||
<div class="col3 bg bg-teal"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<h2 class="nomarginlarge">At A Glance</h2>
|
||||
<div class="columns hiddenoverflow">
|
||||
<div class="col2">
|
||||
<h3>Badass Performance</h3>
|
||||
<p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a> and super fast code execution, it's also memory efficient. I made a
|
||||
<a href="performance.html">cool demo</a> to showcase how KUTE.js really scales on performance. </p>
|
||||
</div>
|
||||
<div class="col2">
|
||||
<h3>Prefix Free</h3>
|
||||
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> mostly for <code>transform</code>, and even allows
|
||||
you to use the utilities yourself in your apps or your own plugins.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hiddenoverflow">
|
||||
<div class="col2">
|
||||
<h3>All Browsers Compatible</h3>
|
||||
<p>KUTE.js covers <a href="features.html#compatibility">all modern browsers</a> with fallback options for legacy browsers. When using <a href="https://polyfill.io/">polyfills</a>
|
||||
and the right <a href="http://browserhacks.com" target="_blank">browser detection</a> you can manage all kinds of <a href="examples.html#crossbrowser">fallback animations</a>
|
||||
for legacy browsers.</p>
|
||||
</div>
|
||||
<div class="col2">
|
||||
<h3>Powerful Methods</h3>
|
||||
<p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full
|
||||
spectrum <a href="options.html">tween options</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hiddenoverflow">
|
||||
<div class="col2">
|
||||
<h3>Packed With Tools</h3>
|
||||
<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>,
|
||||
<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>
|
||||
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph & transform and other specific CSS properties, then CSS3 <code>transform</code>, <code>scroll</code>,
|
||||
<code>border-radius</code>, and almost the full box model or text properties.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hiddenoverflow">
|
||||
<div class="col2">
|
||||
<h3>MIT License</h3>
|
||||
<p>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms.</p>
|
||||
</div>
|
||||
<div class="col2">
|
||||
<h3>Top Notch Documentation</h3>
|
||||
<p>All examples, code, tips & tricks are very well documented.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Getting Started</h2>
|
||||
<div class="columns hiddenoverflow">
|
||||
<div class="col3">
|
||||
<span class="ion-ios-game-controller-b media"></span>
|
||||
<h3>Examples</h3>
|
||||
<p>See <a href="examples.html">KUTE.js in action</a> with all it's functions, options and features.</p>
|
||||
</div>
|
||||
<div class="col3">
|
||||
<span class="ion-ios-paper media"></span>
|
||||
<h3>Documentation</h3>
|
||||
<p>The <a href="start.html">API documentation</a> is here for you to get you started.</p>
|
||||
</div>
|
||||
|
||||
<div class="col3">
|
||||
<span class="ion-ios-pulse-strong media"></span>
|
||||
<h3>Performance</h3>
|
||||
<p class="marginbottom">Head over to the <a href="performance.html">performance</a> test page right away.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</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>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
<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
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- 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>
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./src/kute-css.min.js"></script>
|
||||
<!-- KUTE.js CSS Plugin -->
|
||||
<script src="./src/kute-text.min.js"></script>
|
||||
<!-- KUTE.js CSS Plugin -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
<script src="./assets/js/home.js"></script>
|
||||
<!-- some stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
152
demo/opacityProperty.html
Normal file
152
demo/opacityProperty.html
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Opacity Property component for KUTE.js allows you to animate the opacity CSS property on most browsers.">
|
||||
<meta name="keywords" content="opacity,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Opacity Property</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li><a href="colorProperties.html">Color Properties</a></li>
|
||||
<li><a href="boxModel.html">Box Model</a></li>
|
||||
<li><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 class="active"><a href="opacityProperty.html">Opacity Property</a></li>
|
||||
<li><a href="scrollProperty.html">Scroll Property</a></li>
|
||||
<li><a href="textWrite.html">Text Write</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
|
||||
</ul>
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2 class="head-title">Opacity Property</h2>
|
||||
<p class="condensed lead">The component that animates the CSS <i>opacity</i> property of a target <b>Element</b> on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the <b>opacity</b> property of a target element.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p>The KUTE.js <b>Opacity Property</b> component enables animation for the <b>opacity</b> CSS property of an <b>Element</b> target on most browsers.</p>
|
||||
<p>In most cases, the best presentatation can be offered with a nice and smooth fade animation, with opacity going from 0% all the way up to to 100%.</p>
|
||||
|
||||
<p>While some components like <a href="htmlAttributes.html">HTML Attributes</a> and <a href="filterEffects.html">Filter Effects</a> do provide some
|
||||
similar functionality for specific <b>Element</b> types, this component covers all types of elements and is supported on a wide range of modern
|
||||
and legacy browsers alike.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Example</h3>
|
||||
|
||||
<pre><code class="language-javascript">// fade out
|
||||
let fadeOutTween = KUTE.to('selector1',{opacity:0}).start()
|
||||
|
||||
// fade in
|
||||
let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
|
||||
</code></pre>
|
||||
|
||||
<div id="opacityProperty" class="featurettes">
|
||||
<div class="example-item example-box" style="opacity:0">
|
||||
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<path fill="red" d="M880.128 199.936c-85.606-78.541-224.41-78.541-310.016 0l-58.112 53.35-58.163-53.35c-85.606-78.541-224.358-78.541-309.965 0-96.307 88.422-96.307 231.424 0 319.795l368.128 337.869 368.128-337.869c96.256-88.371 96.256-231.424 0-319.795z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="example-buttons"><a class="btn btn-red" href="javascript:void(0)">Start</a></div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Support for the specific IE8 <code>filter:alpha(opacity=50)</code> have been dropped.</li>
|
||||
<li>Early implementations with vendor preffixes such as <code>-o-opacity</code>, <code>-moz-opacity</code> or <code>-ms-opacity</code> are not supported.</li>
|
||||
<li>The component is an essential part in ALL KUTE.js distributions.</li>
|
||||
</ul>
|
||||
</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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/opacityProperty.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,224 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 tween options refference on most common options as well as property or plugin specific.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,kute.js tween options,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Tween Options | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li class="active"><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2 id="tweenoptions">Tween Options</h2>
|
||||
<p>Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can
|
||||
override these default values, as we'll see later on this page.</p>
|
||||
|
||||
<h3>Common Options</h3>
|
||||
<p>These options affect all types of tweens, no matter the properties used or context.</p>
|
||||
<ul>
|
||||
<li><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</li>
|
||||
<li><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</li>
|
||||
<li><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</li>
|
||||
<li><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> methods. This allows you to set a base delay in miliseconds that increases with each element in the collection.
|
||||
This has no effect on other methods and the default value is <strong>0</strong>.</li>
|
||||
<li><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect.
|
||||
The default value is <strong>0</strong>.</li>
|
||||
<li><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code>
|
||||
option with at least value <b>1</b>. The default value is <strong>false</strong>.</li>
|
||||
<li><kbd>easing: 'easingCubicInOut'</kbd> option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value
|
||||
is <strong>linear</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Transform Options</h3>
|
||||
<p>These options only affect animation involving any 3D property from CSS3 <code>transform</code> and have no effect on other CSS properties. While you can set <code>perspective</code> or
|
||||
<code>perspective origin</code> via CSS, these options are here to help, especially with full browser support and preffix free handling.</p>
|
||||
<ul>
|
||||
<li><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element. No default value.</li>
|
||||
<li><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML element. This option has no default value and only accepts valid CSS values according to
|
||||
it's specs.</li>
|
||||
<li><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation. No default value.</li>
|
||||
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar
|
||||
options, this options only accepts valid CSS values and has no default value.</li>
|
||||
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to
|
||||
SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always
|
||||
think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a
|
||||
<kbd class="bg-olive">svgTransform</kbd> property, it can also accept array values: <code>transformOrigin: [250,250]</code>. There is no default value but the SVG Plugin will always use
|
||||
<code>50% 50%</code> for your transform tweens.</li>
|
||||
</ul>
|
||||
|
||||
<h3>SVG Plugin Options</h3>
|
||||
<p>The following options only affect animation of the <code>path</code> tween property, to customize the SVG morph animation. See <a href="svg.html">SVG Plugin</a> page.</p>
|
||||
<ul>
|
||||
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.</li>
|
||||
<li><kbd>morphIndex: Number</kbd> option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".</li>
|
||||
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape.</li>
|
||||
<li><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Text Plugin Options</h3>
|
||||
<p>The only option for the plugin is the <kbd>textChars</kbd> option for the <kbd class="bg-olive">text</kbd> property and allows you to set the characters set for the scrambling character during the animation.
|
||||
See <a href="text.html">Text Plugin</a> page for more instructions and demo.</p>
|
||||
|
||||
<h3>Callback Options</h3>
|
||||
<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>
|
||||
<ul>
|
||||
<li><kbd>start: function</kbd> option allows you to set a function to run once tween animation starts.</li>
|
||||
<li><kbd>update: function</kbd> option allows you to set a function to run on every frame.</li>
|
||||
<li><kbd>pause: function</kbd> option allows you to set a function to run when animation is paused.</li>
|
||||
<li><kbd>resume: function</kbd> option allows you to set a function to run when animation is resumed.</li>
|
||||
<li><kbd>stop: function</kbd> option allows you to set a function to run when animation is stopped.</li>
|
||||
<li><kbd>complete: function</kbd> option allows you to set a function to run when animation is finished.</li>
|
||||
</ul>
|
||||
|
||||
<p>A quick example would look like this:</p>
|
||||
<pre><code class="language-javascript">//define a function
|
||||
var callback = function(){
|
||||
//do some foo
|
||||
}
|
||||
|
||||
//create object and start animating already
|
||||
KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
|
||||
</code></pre>
|
||||
<h3>Other Options</h3>
|
||||
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on
|
||||
legacy browsers, however modern browsers may ignore this option for performance reasons.</p>
|
||||
|
||||
<h3>Override Default Options' Values</h3>
|
||||
<p>Most options have a default value as you can see above, they are globally defined in the <code>KUTE.defaultOptions</code> object like so:</p>
|
||||
<pre><code class="language-javascript">// the list of all tween options that can be overrided
|
||||
KUTE.defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
offset: 0, // allTo() or allFromTo() methods only
|
||||
repeat: 0,
|
||||
repeatDelay: 0,
|
||||
yoyo: false,
|
||||
easing: 'linear',
|
||||
keepHex: false,
|
||||
morphPrecision: 15, // SVG Plugin only
|
||||
textChars: 'alpha', // Text Plugin only
|
||||
};
|
||||
</code></pre>
|
||||
|
||||
<p>As some <a href="https://github.com/thednp/kute.js/issues/47">user suggested</a>, he would need a way to override the default duration value, here's how to:</p>
|
||||
|
||||
<pre><code class="language-javascript">// sets the new global duration tween option default value
|
||||
KUTE.defaultOptions.duration = 1000;
|
||||
</code></pre>
|
||||
<p>Also make sure to define the new option global default values <b>before</b> you define your tween objects.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
212
demo/performance-matrix.html
Normal file
212
demo/performance-matrix.html
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
<!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 performance testing page, comparing basic transform to matrix transform.">
|
||||
<meta name="keywords" content="kute,kute.js,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">
|
||||
|
||||
<title>KUTE.js | Transform Matrix Performance Testing Page</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #08263d;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-family: Helvetica, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.hr { border-color: rgba(255, 255, 255, 0.2); margin: 15px 0 }
|
||||
|
||||
a {
|
||||
color: #ffd626;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 70%;
|
||||
/*height: 200px;*/
|
||||
margin: 5% auto 0 auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
/* perspective: 1200px; */
|
||||
/* transform-style: preserve-3d; don't overDO the preserve3d */
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 200px
|
||||
}
|
||||
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.text-note {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.list-inline>li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.cube {
|
||||
flex: 0 1 auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform-style: preserve-3d;
|
||||
display: inline-flex;
|
||||
margin: 3%
|
||||
}
|
||||
|
||||
.cube .cube__side {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(80, 176, 255, 0.1);
|
||||
box-shadow: inset 0 0 0 2px rgb(40, 225, 238);
|
||||
}
|
||||
.cube .cube__side:nth-child(1) {transform: translateZ(50px); }
|
||||
.cube .cube__side:nth-child(2) {transform: translateZ(-50px); }
|
||||
.cube .cube__side:nth-child(3) {transform: translateX(-50px) rotateY(90deg); }
|
||||
.cube .cube__side:nth-child(4) {transform: translateX(50px) rotateY(-90deg); }
|
||||
.cube .cube__side:nth-child(5) {transform: translateY(50px) rotateX(90deg); }
|
||||
.cube .cube__side:nth-child(6) {transform: translateY(-50px) rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(7),
|
||||
.cube .cube__side:nth-child(8),
|
||||
.cube .cube__side:nth-child(9),
|
||||
.cube .cube__side:nth-child(10),
|
||||
.cube .cube__side:nth-child(11),
|
||||
.cube .cube__side:nth-child(12),
|
||||
.cube .cube__side:nth-child(13),
|
||||
.cube .cube__side:nth-child(14),
|
||||
.cube .cube__side:nth-child(15) {
|
||||
background-color: rgba(129, 11, 109, 0.1) !important;
|
||||
box-shadow: 0 0 1rem #d2ff6a, inset 0 0 0 2px #6afff8;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.cube.alive .cube__side:nth-child(7),
|
||||
.cube.alive .cube__side:nth-child(8),
|
||||
.cube.alive .cube__side:nth-child(9),
|
||||
.cube.alive .cube__side:nth-child(10),
|
||||
.cube.alive .cube__side:nth-child(11),
|
||||
.cube.alive .cube__side:nth-child(12),
|
||||
.cube.alive .cube__side:nth-child(13),
|
||||
.cube.alive .cube__side:nth-child(14),
|
||||
.cube.alive .cube__side:nth-child(15) {opacity: 0.5; }
|
||||
.cube .cube__side:nth-child(7) {transform: translateY(-25px) rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(8) {transform: rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(9) {transform: translateY(25px) rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(10) {transform: translateZ(25px); }
|
||||
.cube .cube__side:nth-child(11) {transform: none; }
|
||||
.cube .cube__side:nth-child(12) {transform: translateZ(-25px); }
|
||||
.cube .cube__side:nth-child(13) {transform: translateX(-25px) rotateY(90deg); }
|
||||
.cube .cube__side:nth-child(14) {transform: rotateY(90deg); }
|
||||
.cube .cube__side:nth-child(15) {transform: translateX(25px) rotateY(90deg); }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="info" class="padding">
|
||||
<ul class="list-inline">
|
||||
<li><a title="Go to KUTE.js homepage" href="index.html">Homepage</a></li>
|
||||
<li><a title="Go to animation engine performance comparison page" href="performance.html">Engine Comparison</a></li>
|
||||
<li><a title="Go to Transform Functions component testing page" href="performance-transform.html">Transform Functions</a></li>
|
||||
</ul>
|
||||
<hr class="hr">
|
||||
|
||||
<div style="width:100%;clear: both">
|
||||
<button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
|
||||
</div>
|
||||
<p>These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
|
||||
<p class="text-note">Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
|
||||
<script id="kute" src="./src/kute-extra.min.js"></script>
|
||||
<script src="./assets/js/perf-matrix.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
218
demo/performance-transform.html
Normal file
218
demo/performance-transform.html
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<!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 performance testing page, comparing basic transform to matrix transform.">
|
||||
<meta name="keywords" content="kute,kute.js,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">
|
||||
|
||||
<title>KUTE.js | Regular Transform Performance Testing Page</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #08263d;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-family: Helvetica, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffd626;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.hr { border-color: rgba(255, 255, 255, 0.2); margin: 15px 0 }
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 70%;
|
||||
/*height: 200px;*/
|
||||
margin: 5% auto 0 auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
/* perspective: 1200px; */
|
||||
/* transform-style: preserve-3d; don't overDO the preserve3d */
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 200px
|
||||
}
|
||||
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.text-note {
|
||||
color: #069
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.list-inline>li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.cube {
|
||||
flex: 0 1 auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform-style: preserve-3d;
|
||||
display: inline-flex;
|
||||
margin: 3%
|
||||
|
||||
}
|
||||
|
||||
.cube .cube__side {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(80, 176, 255, 0.1);
|
||||
box-shadow: inset 0 0 0 2px rgb(13, 165, 64);
|
||||
}
|
||||
.cube .cube__side:nth-child(1) {transform: translateZ(50px); }
|
||||
.cube .cube__side:nth-child(2) {transform: translateZ(-50px); }
|
||||
.cube .cube__side:nth-child(3) {transform: translateX(-50px) rotateY(90deg); }
|
||||
.cube .cube__side:nth-child(4) {transform: translateX(50px) rotateY(-90deg); }
|
||||
.cube .cube__side:nth-child(5) {transform: translateY(50px) rotateX(90deg); }
|
||||
.cube .cube__side:nth-child(6) {transform: translateY(-50px) rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(7),
|
||||
.cube .cube__side:nth-child(8),
|
||||
.cube .cube__side:nth-child(9),
|
||||
.cube .cube__side:nth-child(10),
|
||||
.cube .cube__side:nth-child(11),
|
||||
.cube .cube__side:nth-child(12),
|
||||
.cube .cube__side:nth-child(13),
|
||||
.cube .cube__side:nth-child(14),
|
||||
.cube .cube__side:nth-child(15) {
|
||||
background-color: rgba(129, 11, 109, 0.1) !important;
|
||||
box-shadow: 0 0 1rem #d7ff6a, inset 0 0 0 2px #6aff8f;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.cube.alive .cube__side:nth-child(7),
|
||||
.cube.alive .cube__side:nth-child(8),
|
||||
.cube.alive .cube__side:nth-child(9),
|
||||
.cube.alive .cube__side:nth-child(10),
|
||||
.cube.alive .cube__side:nth-child(11),
|
||||
.cube.alive .cube__side:nth-child(12),
|
||||
.cube.alive .cube__side:nth-child(13),
|
||||
.cube.alive .cube__side:nth-child(14),
|
||||
.cube.alive .cube__side:nth-child(15) {opacity: 0.5; }
|
||||
.cube .cube__side:nth-child(7) {transform: translateY(-25px) rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(8) {transform: rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(9) {transform: translateY(25px) rotateX(-90deg); }
|
||||
.cube .cube__side:nth-child(10) {transform: translateZ(25px); }
|
||||
.cube .cube__side:nth-child(11) {transform: none; }
|
||||
.cube .cube__side:nth-child(12) {transform: translateZ(-25px); }
|
||||
.cube .cube__side:nth-child(13) {transform: translateX(-25px) rotateY(90deg); }
|
||||
.cube .cube__side:nth-child(14) {transform: rotateY(90deg); }
|
||||
.cube .cube__side:nth-child(15) {transform: translateX(25px) rotateY(90deg); }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="info" class="padding">
|
||||
|
||||
<ul class="list-inline">
|
||||
<li><a title="Go to KUTE.js homepage" href="index.html">Homepage</a></li>
|
||||
<li><a title="Go to animation engine performance comparison page" href="performance.html">Engine Comparison</a></li>
|
||||
<li><a title="Go to Transform Matrix component testing page" href="performance-matrix.html">Transform Matrix</a></li>
|
||||
</ul>
|
||||
<hr class="hr">
|
||||
|
||||
<div style="width:100%;clear: both">
|
||||
<button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
|
||||
</div>
|
||||
|
||||
<p>These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
|
||||
<p class="text-note">Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
|
||||
<script id="kute" src="./src/kute.min.js"></script>
|
||||
<script src="./assets/js/perf-matrix.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -8,24 +8,28 @@
|
|||
<meta name="description" content="KUTE.js performance testing page, in comparison with GSAP and Tween.js">
|
||||
<meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
|
||||
<title>KUTE.js | Performance Testing Page</title>
|
||||
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> -->
|
||||
<style>
|
||||
body {
|
||||
background-color: #2e2e2e;
|
||||
background-color: #08263d;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-family: Helvetica, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.hr { border-color: rgba(255, 255, 255, 0.2); margin: 15px 0; clear:both }
|
||||
|
||||
a {
|
||||
color: #ffd626;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.btn-group { display: inline-block}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #fff;
|
||||
|
|
@ -57,7 +61,7 @@
|
|||
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
width: 350px;
|
||||
}
|
||||
|
|
@ -66,14 +70,70 @@
|
|||
padding: 20px
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn:focus { outline: none }
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
}
|
||||
.dropdown-menu>li:hover { background-color: rgba(0,0,0,0.2); }
|
||||
.dropdown-menu>li>a {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropdown {
|
||||
position:relative
|
||||
}
|
||||
.dropdown.open .dropdown-menu {
|
||||
display: block
|
||||
}
|
||||
.text-note {
|
||||
color: #069
|
||||
}
|
||||
|
|
@ -81,19 +141,33 @@
|
|||
.text-danger {
|
||||
font-weight: bold
|
||||
}
|
||||
.list-inline {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.list-inline>li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="info" class="padding">
|
||||
<p><a class="back" href="index.html">Back to KUTE.js</a></p>
|
||||
<p>Engine </p>
|
||||
<span id="engine" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<ul class="list-inline">
|
||||
<li><a title="Go to KUTE.js homepage" href="index.html">Homepage</a></li>
|
||||
<li><a title="Go to Transform Functions component testing page" href="performance-transform.html">Transform Functions</a></li>
|
||||
<li><a title="Go to Transform Matrix component testing page" href="performance-matrix.html">Transform Matrix</a></li>
|
||||
</ul>
|
||||
<hr class="hr">
|
||||
|
||||
<span id="engine" class="btn-group dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Engine <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="kute" href="#">KUTE</a></li>
|
||||
<li><a id="gsap" href="#">GSAP</a></li>
|
||||
|
|
@ -101,19 +175,16 @@
|
|||
</ul>
|
||||
</span>
|
||||
|
||||
<p>Property </p>
|
||||
<span id="property" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<span id="property" class="btn-group dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Property <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="left" href="#">left</a></li>
|
||||
<li><a id="translateX" href="#">translateX</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
|
||||
<p>Repeat </p>
|
||||
<span id="repeat" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<span id="repeat" class="btn-group dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Repeat <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="5" href="#">5</a></li>
|
||||
<li><a id="10" href="#">10</a></li>
|
||||
|
|
@ -123,9 +194,8 @@
|
|||
</span>
|
||||
|
||||
|
||||
<p>How many elements to animate:</p>
|
||||
<span id="count" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<span id="count" class="btn-group dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Count <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="100" href="#">100</a></li>
|
||||
<li><a id="200" href="#">200</a></li>
|
||||
|
|
@ -142,17 +212,14 @@
|
|||
</ul>
|
||||
</span>
|
||||
|
||||
<hr>
|
||||
<hr class="hr">
|
||||
|
||||
<div style="width:100%;clear: both">
|
||||
<button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
|
||||
</div>
|
||||
|
||||
<!--[if IE]><p class="text-danger">The test page is not intended for Internet Explorer or legacy browsers.</p><![endif]-->
|
||||
<!--[if !IE ]><!-->
|
||||
<p>These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
|
||||
<p class="text-note">Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.</p>
|
||||
<!--<![endif]-->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -169,10 +236,11 @@
|
|||
<!--[if !IE ]><!-->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
|
||||
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
|
||||
<script src="./assets/js/tween.min.js"></script>
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!--<script src="./../kute.js"></script>-->
|
||||
<script src="./src/kute-extra.min.js"></script>
|
||||
|
||||
<script src="./assets/js/perf.js"></script>
|
||||
<!--<![endif]-->
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 10 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -14,8 +9,9 @@
|
|||
<meta name="description" content="A simple tool to showcase control KUTE.js tween objects progress.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,progress,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
<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 Using Update Functions | Javascript Animation Engine</title>
|
||||
|
||||
|
|
@ -25,21 +21,9 @@
|
|||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
<style>
|
||||
.text-example {
|
||||
margin: 0 0 20px;
|
||||
|
|
@ -94,99 +78,130 @@
|
|||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li class="active"><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<h2>Tween Progress Control</h2>
|
||||
<p>KUTE.js object exposes all required methods in order for it to work, so why not try to do something fun? How about control tween progress? So let's make a quick tool:</p>
|
||||
<ul>
|
||||
<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">
|
||||
<h2 class="head-title">Tween Progress Control</h2>
|
||||
<p class="condensed lead">The handy tool to manually update a tween via an <b>Input</b> slider.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left ">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Create a tween object and link it to a range slider <b>Input</b>. Some stuff happening.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The <b>Progress Bar</b> can be a handy tool that enables you to manually update your tween animation, just in case there is a little
|
||||
detail you want to make it right.</p>
|
||||
<p>KUTE.js object exposes all required methods in order for it to work, so why not try to do something fun? How about control tween progress? So let's make a quick tool:</p>
|
||||
<ul>
|
||||
<li>We need an <code><input type="range" min="0" max="1" step="0.00001" /></code> with these exact <code>min</code>, <code>max</code> and <code>step</code> attributes</li>
|
||||
<li>Now we need a tween object, let's just do a svg morph for instance, but make sure you use <code>KUTE.fromTo()</code> method, the others don't prepare start values for the tween object</li>
|
||||
<li>We also need to make sure nothing controls the progress except the range input, so don't use <code>start()</code> or <code>pause()</code> methods at all, as well as <code>repeat</code> and / or <code>yoyo</code> options</li>
|
||||
<li>Next we attach an <code>input</code> event handler to update the tween progress by using the <code>KUTE.update</code> function, which is the step function triggered on every <code>requestAnimationFrame</code> tick</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>A very basic code sample will look like this:</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
|
||||
<pre><code class="language-javascript">// basic morph, only fromTo and allFromTo should work
|
||||
var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { morphIndex: 127 });
|
||||
<p>A very basic code sample will look like this:</p>
|
||||
|
||||
// the range slider
|
||||
|
||||
<pre><code class="language-javascript">// the range slider
|
||||
var rangeSlider = document.querySelector('input[type="range"');
|
||||
|
||||
// do the dew
|
||||
rangeSlider.addEventListener('input',function(){
|
||||
var tick = 0.00001; // we need a value that's slightly above 0, math is hard in JavaScript
|
||||
KUTE.update.call(morphTween, this.value * morphTween.options.duration + tick);
|
||||
// basic morph, only fromTo and allFromTo should work
|
||||
var morphTween = KUTE.to('#rectangle', { path: '#star' } );
|
||||
|
||||
// initialize a progressBar for your tween
|
||||
var progressBar = new KUTE.ProgressBar(rangeSlider,morphTween)
|
||||
|
||||
// also start animation when Element is clicked
|
||||
document.getElementById('rectangle').addEventListener('click',function(){
|
||||
!morphTween.playing && morphTween.start()
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
<p>And now let's see the code in action:</p>
|
||||
<div class="featurettes">
|
||||
<div class="slider">
|
||||
<input type="range" min="0" max="1" oninput="rangevalue.value=(value*100).toFixed(2)+'%'" value="0" step="0.0001"/>
|
||||
<output id="rangevalue">0%</output>
|
||||
</div>
|
||||
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
<path id="rectangle" class="bg-blue" 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>
|
||||
<p>And now let's see the code in action:</p>
|
||||
<div class="featurettes">
|
||||
<div class="slider">
|
||||
<input type="range" min="0" max="1" value="0" step="0.0001" />
|
||||
<output id="rangevalue">0%</output>
|
||||
</div>
|
||||
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
<path id="rectangle" 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="star" 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>
|
||||
|
||||
<p>We might argue that we want to use other methods in combination with this method, or use this method while animations are running, but there are other libraries out there that can do that already. This example here is just to showcase KUTE.js can do this too.</p>
|
||||
<p>We might argue that we want to use other methods in combination with this method, or use this method while animations are running, but there are other libraries out there that can do that already. This example here is just to showcase KUTE.js can do this too.</p>
|
||||
<p>Note that this tool is not included in the official distribution file.</p>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
</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 -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
|
@ -196,20 +211,12 @@ rangeSlider.addEventListener('input',function(){
|
|||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="./src/polyfill.min.js"></script>
|
||||
<script src="./src/kute-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./src/kute-svg.min.js"></script>
|
||||
|
||||
<!-- KUTE.js Text Plugin -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/progress.js"></script>
|
||||
<!-- css plugin examples -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,298 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 complete list of supported CSS properties, presentation attributes and other DOM animations for KUTE.js.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,css properties,css3 animation,kute.js supported properties,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Supported Properties | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li class="active"><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Supported Properties</h2>
|
||||
<p>KUTE.js covers all animation needs by itself for <code>transform</code> properties, <code>scroll</code> for window or a given element, colors. Note: not all browsers support
|
||||
<a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a>. With
|
||||
the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like <code>border-radius</code>, <code>clip</code>,
|
||||
<code>backgroundPosition</code> and more box model properties.</p>
|
||||
<p>Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular
|
||||
coding, KUTE.js makes it easy to add support for additional properties, so check out the guide on <a href="extend.html">how to extend</a>.</p>
|
||||
<p>All common measurement units are supported: <code>px</code> and <code>%</code> for translations and box-model properties, or <code>deg</code> and <code>rad</code> for rotations and
|
||||
skews, while <code>clip</code> only supports <code>px</code>. Other properties such as <code>opacity</code>, <code>scale</code> or <code>scroll</code> are unitless, and
|
||||
<code>background-position</code> always uses <code>%</code> as measurement unit. As for the text properties you can use <code>px</code>, <code>em</code>, <code>rem</code>,
|
||||
<code>vh</code> and <code>vw</code>. Be sure to <a href="http://caniuse.com/#feat=viewport-units" target="_blank">check</a> what your browsers support in terms of measurement unit.</p>
|
||||
|
||||
<h3>Opacity</h3>
|
||||
<p>In most cases, the best animation possible is the <code class="bg-blue">opacity</code>, for performance, aesthetics and maybe more other reasons such as avoiding unwanted layout changes.
|
||||
KUTE.js also covers IE8 here with the help of proprietary synthax <code>filter: alpha(opacity=0)</code>. Also, opacity can be used for instance on legacy browsers that don't support
|
||||
<code>RGBA</code> colors. Eg. <code>opacity:0.5</code> will make an element semitransparent.</p>
|
||||
|
||||
<h3>2D Transform Properties</h3>
|
||||
<p>The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage
|
||||
based translation to pixels and radians based angles to degrees, to help improve memory efficiency.</p>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">translate</kbd> property can be used for horizontal and / or vertical movement. EG. <code>translate:150</code> to translate an element 150px to the right or
|
||||
<code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotate</kbd> property applies rotation to an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees.
|
||||
<kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">skewX</kbd> property applies a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">skewY</kbd> property applies a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">scale</kbd> property applies a single value size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-red">matrix</kbd>, double axis <kbd class="bg-red">skew</kbd> and double axis <kbd class="bg-red">scale</kbd> properties are not supported.</li>
|
||||
</ul>
|
||||
|
||||
<h3>3D Transform Properties</h3>
|
||||
<p>The core engine supports all 3D transform properties except <code>matrix3d</code> and <code>rotate3d</code>. Just as the above, these properties' values are also converted to traditional pixels
|
||||
and degrees measurements to help improve memory usage.</p>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">translateX</kbd> property is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">translateY</kbd> property is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">translateZ</kbd> property is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px to it's back, making it smaller.
|
||||
Requires a <code>perspective</code> tween option to be used; the smaller perspective value, the deeper translation. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">translate3d</kbd> property is for movement on all the axis in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px
|
||||
to the bottom and 150px closer to the viewer, making it larger. Also requires using a <code>perspective</code> tween option. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotateX</kbd> property rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Requires perspective.
|
||||
<kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotateY</kbd> property rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees.
|
||||
Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotateZ</kbd> property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by
|
||||
150 degrees. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-red">matrix3d</kbd>, <kbd class="bg-red">rotate3d</kbd>, and <kbd class="bg-red">scale3d</kbd> properties are not supported.</li>
|
||||
</ul>
|
||||
|
||||
<h3>SVG Transform</h3>
|
||||
<p>The <a href="svg.html">SVG Plugin</a> features cross browser 2D transform animations via the <kbd class="bg-olive">svgTransform</kbd> tween property and the <code>transform</code> presentation attribute,
|
||||
similar in functionality as the Attributes Plugin.</p>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">translate</kbd> sub-property applies horizontal and / or vertical translation. EG. <code>translate:150</code> to translate a shape 150px to the right or
|
||||
<code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">rotate</kbd> sub-property applies rotation to a shape on the Z axis. Eg. <code>rotate:150</code> will rotate a shape clockwise by 150 degrees around it's own center or around
|
||||
the <code>transformOrigin: '450 450'</code> set tween option coordinate of the parent element. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">skewX</kbd> sub-property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">skewY</kbd> sub-property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">scale</kbd> sub-property used to apply a single value size transformation. Eg. <code>scale:0.5</code> will scale a shape to half of it's initial size. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-red">matrix</kbd> sub-property is not supported.</li>
|
||||
</ul>
|
||||
<p>As a quick note, the translation is normalized and computed in a way to handle the <code>transformOrigin</code> tween option in all cases, not just for rotations, but also scaling or skews.</p>
|
||||
|
||||
<h3>SVG Properties</h3>
|
||||
<p>The <a href="svg.html">SVG Plugin</a> can animate the <code>d</code> attribute of a given <code><path></code> or <code><glyph></code> element with the tween property called
|
||||
<kbd class="bg-olive">path</kbd>. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to
|
||||
<a href="http://bl.ocks.org/mbostock/3081153" target="_blank">the D3.js examples</a> for wider usability and the ability to optimize the visual and performance of the morph, all with the help of special
|
||||
tween options and utilities.</p>
|
||||
|
||||
<p>Further more, the SVG Plugin can animate the stroke in a way that you probably know as <code>drawSVG</code>. KUTE.js implements it as <kbd class="bg-olive">draw</kbd> tween property that deals with the
|
||||
well known CSS properties: <kbd>strokeDasharray</kbd> and <kbd>strokeDashoffset</kbd>.</p>
|
||||
|
||||
<h3>Box Model Properties</h3>
|
||||
<p>The core engine supports <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> while the <a href="css.html">CSS Plugin</a> adds support for all other box-model properties.</p>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">left</kbd>, <kbd class="bg-blue">top</kbd>, <kbd class="bg-olive">right</kbd> and <kbd class="bg-olive">bottom</kbd> are <code>position</code> based properties for movement on
|
||||
vertical and / or horizontal axis. These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires
|
||||
<code>position:relative</code>. These properties can be used as fallback for browsers with no support for <code>translate</code> properties such as IE8.</li>
|
||||
<li><kbd class="bg-blue">width</kbd>, <kbd class="bg-blue">height</kbd>, <kbd class="bg-olive">minWidth</kbd>, <kbd class="bg-olive">minHeight</kbd>, <kbd class="bg-olive">maxWidth</kbd>,
|
||||
<kbd class="bg-olive">maxHeight</kbd> are properties that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for
|
||||
<code>scale</code> on IE8 again, as well as for other purposes.</li>
|
||||
<li><kbd class="bg-olive">padding</kbd>, <kbd class="bg-olive">margin</kbd>, <kbd class="bg-olive">paddingTop</kbd>, <kbd class="bg-olive">paddingBottom</kbd>, <kbd class="bg-olive">paddingLeft</kbd>,
|
||||
<kbd class="bg-olive">paddingRight</kbd>, <kbd class="bg-olive">marginTop</kbd>, <kbd class="bg-olive">marginBottom</kbd>, <kbd class="bg-olive">marginLeft</kbd> and
|
||||
<kbd class="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as
|
||||
<code>margin: "20px 50px"</code> or any other type are not supported.</li>
|
||||
<li><kbd class="bg-olive">borderWidth</kbd>, <kbd class="bg-olive">borderTopWidth</kbd>, <kbd class="bg-olive">borderRightWidth</kbd>, <kbd class="bg-olive">borderBottomWidth</kbd> are
|
||||
<kbd class="bg-olive">borderLeftWidth</kbd> are properties that allow you to animate the border of an element either on all sides at once or each side separatelly. Shorthand notations are not supported.</li>
|
||||
<li><kbd class="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
|
||||
</ul>
|
||||
<p>As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the <code>element.offsetWidth</code>
|
||||
as a refference. The idea is the same as presented on the above supported transform properties.</p>
|
||||
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong> that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices.
|
||||
They also trigger <code>resize</code> event that may cause crashes on old browsers such as IE8 when using handlers bound on <code>resize</code>, so use with caution.</p>
|
||||
|
||||
<h3>Border Radius</h3>
|
||||
<p>The <a href="css.html">CSS Plugin</a> covers all the radius properties with the exception that shorthand notations are not implemented.</p>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
|
||||
</ul>
|
||||
<p>For all radius properties above <code>borderRadius:20</code> or <code>borderTopLeftRadius:'25%'</code> will do. In the first case <code>px</code> is the default measurement unit used, while in the second we
|
||||
require using <code>%</code> unit which is relative to the element's size.</p>
|
||||
<p><strong>Remember</strong>: shorthands for <code>border-radius</code> are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. <code>-moz-border-radius-topleft</code>)
|
||||
as they were deprecated with later versions.</p>
|
||||
|
||||
<h3>Color Properties</h3>
|
||||
<p>The core engine only supports <code>color</code> and <code>backgroundColor</code>, but the <a href="css.html">CSS Plugin</a> covers all the others. KUTE.js currently supports values such as <code>HEX</code>,
|
||||
<code>RGB</code> and <code>RGBA</code> for all color properties, but IE8 does not support <code>RGBA</code> and always uses <code>RGB</code> when detected, otherwise will produce no effect. There is also a
|
||||
tween option <code>keepHex:true</code> to convert the color format. Eg. <code>color: '#ff0000'</code> or <code>backgroundColor: 'rgb(202,150,20)'</code> or <code>borderColor: 'rgba(250,100,20,0.5)'</code>.
|
||||
The IE9+ browsers should also work with <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe colors</a>, eg. <code>color: 'red'</code>. </p>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">color</kbd> allows you to animate the color for a given text element.</li>
|
||||
<li><kbd class="bg-blue">backgroundColor</kbd> allows you to animate the <code>background-color</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">outlineColor</kbd> allows you to animate the <code>outline-color</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a given element.</li>
|
||||
<li><kbd class="bg-olive">borderTopColor</kbd>, <kbd class="bg-olive">borderRightColor</kbd>, <kbd class="bg-olive">borderBottomColor</kbd> and <kbd class="bg-olive">borderLeftColor</kbd> properties allow
|
||||
you to animate the color of the border on each side of a given element.</li>
|
||||
</ul>
|
||||
<p><strong>Remember</strong>: shorthands for <code>borderColor</code> property are not supported.</p>
|
||||
|
||||
<h3>Presentation Attributes</h3>
|
||||
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>,
|
||||
but the values can be also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute.
|
||||
This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
|
||||
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or
|
||||
<kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.</p>
|
||||
|
||||
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a
|
||||
suffix (%,px,etc). For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
|
||||
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>),
|
||||
see the below example.</p>
|
||||
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'red'}})</code> to animate the stop color of some SVG gradient.</p>
|
||||
|
||||
<h3>Typography Properties</h3>
|
||||
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code>
|
||||
on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">lineHeight</kbd> allows you to animate the <code>line-height</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a given element.</li>
|
||||
<li><kbd class="bg-olive">wordSpacing</kbd> allows you to animate the <code>word-spacing</code> for a given element.</li>
|
||||
</ul>
|
||||
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong>.</p>
|
||||
|
||||
<h3>Scroll Animation</h3>
|
||||
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than
|
||||
<code>offsetHeight</code>). EG: <code>scroll: 150</code> will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent
|
||||
animation bubbles as well as scroll bottlenecks, but we'll have a look at that later.</p>
|
||||
|
||||
<h3>String Properties</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">number</kbd> allows you to tween a number either from 0 or from a current value and updates the <code>innerHTML</code> for a given target. Eg. <code>number:1500</code></li>
|
||||
<li><kbd class="bg-olive">text</kbd> allows you to write a string one character at a time followed by a scrambling character. Eg. <code>text: 'A demo with <b>substring</b>'</code>. </li>
|
||||
</ul>
|
||||
<p>See <a href="text.html">Text Plugin</a> for details.</p>
|
||||
|
||||
<h3>Other Properties</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">clip</kbd> allows you to animate the <code>clip</code> property for a given element. Only rect is supported. Eg. <code>clip:[250,200,300,0]</code>. See
|
||||
<a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip" target="_blank">spec</a> for details.</li>
|
||||
<li><kbd class="bg-olive">backgroundPosition</kbd> allows you to animate the <code>background-position</code> for a given element that uses a background image. It only uses % as measurement unit.
|
||||
Eg. <code>backgroundPosition:[50,20]</code></li>
|
||||
</ul>
|
||||
|
||||
<h3>Legend</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">core</kbd> - the property/properties are supported by core animation engine.</li>
|
||||
<li><kbd class="bg-olive">plugin</kbd> - the property/properties are supported by plugins.</li>
|
||||
<li><kbd class="bg-red">unsupported</kbd> - the property/properties are NOT supported by core and/or plugins.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Did We Miss Any Important Property?</h3>
|
||||
<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP, or you can check the <a href="extend.html">extend</a>
|
||||
guide and learn how to develop a plugin to support a new property yourself.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- some stuff -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
193
demo/scrollProperty.html
Normal file
193
demo/scrollProperty.html
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Scroll Property component for KUTE.js allows you to animate the vertical scrolling for a target element or window on most browsers.">
|
||||
<meta name="keywords" content="scroll,vertical scroll,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Scroll Property</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li><a href="colorProperties.html">Color Properties</a></li>
|
||||
<li><a href="boxModel.html">Box Model</a></li>
|
||||
<li><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 class="active"><a href="scrollProperty.html">Scroll Property</a></li>
|
||||
<li><a href="textWrite.html">Text Write</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
|
||||
</ul>
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2 class="head-title">Scroll Property</h2>
|
||||
<p class="condensed lead">The component that animates the <i>vertical scrolling</i> of a target <b>Element</b> as well as the <b><window></b> on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">The fully reworked component for <b>vertical scrolling</b> animation is an essential part of <b>KUTE</b>.js.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="condensed lead">The KUTE.js <b>Scroll Property</b> component enables animation for the vertical scroll of a target <b>Element</b> or the
|
||||
<b><window></b> on most browsers.</p>
|
||||
<p>The vertical scrollling animation is a popular choice to spice up the in-page navigation, and most websites use a <i>Back To Top</i> button for
|
||||
scrolling all the way back to top. For this reason, our component doesn't support horizontal scrolling animation.</p>
|
||||
<p>The component also uses <b>passive</b> event option for best possible performance along with other improvements like removed the need to use
|
||||
additional CSS or the use of <b>data-scrolling</b> attribute on the <b><body></b> element.</p>
|
||||
<p>On animation start, the component will lock down all possible pointer events of the animation target to
|
||||
avoid any unwanted animation glitches.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Example</h3>
|
||||
|
||||
<pre><code class="language-javascript">// all websites to top button
|
||||
KUTE.to(window,{scroll:0}).start()
|
||||
|
||||
// scroll to a certain element
|
||||
KUTE.to(window,{scroll: document.getElementById('myElement').offsetTop }).start()
|
||||
|
||||
// scroll to top an overflowing target element
|
||||
KUTE.to('#myElement',{scroll: 0 }).start()
|
||||
</code></pre>
|
||||
|
||||
<div id="scrollProperty" class="featurettes">
|
||||
<div class="example-item" style="height:170px; overflow:hidden; max-width: calc(100% - 60px);">
|
||||
<h4 class="text-dark" style="margin-top:10px">Sample Heading Ipsulexum</h4>
|
||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy
|
||||
foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
|
||||
innovation via workplace diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal
|
||||
that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in
|
||||
real-time will have multiple touchpoints for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with
|
||||
additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
|
||||
solely on the bottom line.</p>
|
||||
|
||||
<h4 class="text-dark">Second Sample Heading</h4>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators
|
||||
offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed
|
||||
base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
<div class="example-buttons"><a class="btn btn-olive" href="javascript:void(0)">Start</a></div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The <b>Scroll Property</b> component will lock down any pointer event such as <i>click</i>, <i>touch</i>, or any other event of the target on
|
||||
animation start to prevent any kind of animation glitches, so make sure to filter your tweens, perhaps you can take a look at the
|
||||
<a href="./assets/js/scrollProperty.js">scrollProperty.js</a> sample code.</li>
|
||||
<li>The scroll animation is not as smooth as with transform animations, it has no access at sub-pixel level, but you can play around
|
||||
with various easing functions and durations to find the best possible outcome.</li>
|
||||
<li>All pages in this documentation have a <code><a>Back to top</a></code> button at the bottom, just in case you didn't notice.</li>
|
||||
<li>The component is an essential part in ALL KUTE.js distributions.</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>
|
||||
|
||||
<!-- 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/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/scrollProperty.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
195
demo/shadowProperties.html
Normal file
195
demo/shadowProperties.html
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Shadow Properties component for KUTE.js allows you to create animations for shadow properties on supporting browsers.">
|
||||
<meta name="keywords" content="textShadow,text-shadow,boxShadow,box-shadow,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Shadow Properties</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.text-example {
|
||||
margin: 0 0 20px;
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
color: #222
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">Shadow Properties</h2>
|
||||
<p class="condensed lead">The component that animates shadow properties of a specific target element on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the shadow properties of a target element.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class='condensed lead'>The KUTE.js <b>Shadow Properties</b> component enables animation for the <b>text-shadow</b> CSS property of text elements
|
||||
as well as the <b>box-shadow</b> property of any element on most browsers.</p>
|
||||
<p>The functionality was developed while writing a guide on how to extend KUTE.js a couple of years ago and is now a fully featured component.</p>
|
||||
<p>The component uses <b>px</b> as unit for the shadow parameters, can animate the color of the shadow and can also handle the <b>inset</b> shadow parameter
|
||||
of the <b>boxShadow</b> property.</p>
|
||||
<p>OK let's have a look at a couple of quick examples:</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Box Shadow</h3>
|
||||
|
||||
<pre><code class="language-javascript">// tween to a string value
|
||||
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();
|
||||
|
||||
// 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();
|
||||
</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>
|
||||
|
||||
<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();
|
||||
</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>
|
||||
|
||||
<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>© 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-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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2
demo/src/kute-attr.min.js
vendored
2
demo/src/kute-attr.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js v1.6.6 | © dnp_theme | Attributes Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],d=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=d(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=-1!==p.indexOf(i)?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=d(o),v=/(%|[a-z]+)$/,b=c(this.element,u.replace(/_+[a-z]+/,""));if(-1===p.indexOf(u))if(null!==b&&v.test(b)){var m=s(b).u||s(r[o]).u,y=/%/.test(m)?"_percent":"_"+m;u+y in e||(/%/.test(m),e[u+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,(1e3*f(r.v,n.v,i)>>0)/1e3+n.u)}),n[u+y]=s(r[o])}else v.test(r[o])&&null!==b&&(null===b||v.test(b))||(u in e||(/opacity/i.test(o),e[u]=function(t,e,r,n,i){t.setAttribute(e,(1e3*f(r,n,i)>>0)/1e3)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this});
|
||||
567
demo/src/kute-base.js
Normal file
567
demo/src/kute-base.js
Normal file
|
|
@ -0,0 +1,567 @@
|
|||
/*!
|
||||
* KUTE.js Base v2.0.0 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.0";
|
||||
|
||||
var Tweens = [];
|
||||
var supportedProperties = {};
|
||||
var defaultOptions = {
|
||||
duration: 700,
|
||||
delay: 0,
|
||||
easing: 'linear'
|
||||
};
|
||||
var crossCheck = {};
|
||||
var onComplete = {};
|
||||
var onStart = {};
|
||||
var linkProperty = {};
|
||||
var Util = {};
|
||||
var BaseObjects = {
|
||||
defaultOptions: defaultOptions,
|
||||
linkProperty: linkProperty,
|
||||
onComplete: onComplete,
|
||||
onStart: onStart,
|
||||
supportedProperties: supportedProperties
|
||||
};
|
||||
|
||||
function linear (t) { return t; }
|
||||
function easingQuadraticIn (t) { return t*t; }
|
||||
function easingQuadraticOut (t) { return t*(2-t); }
|
||||
function easingQuadraticInOut (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; }
|
||||
function easingCubicIn (t) { return t*t*t; }
|
||||
function easingCubicOut (t) { return (--t)*t*t+1; }
|
||||
function easingCubicInOut (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }
|
||||
function easingCircularIn (t) { return -(Math.sqrt(1 - (t * t)) - 1); }
|
||||
function easingCircularOut (t) { return Math.sqrt(1 - (t = t - 1) * t); }
|
||||
function easingCircularInOut (t) { return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); }
|
||||
function easingBackIn (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); }
|
||||
function easingBackOut (t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; }
|
||||
function easingBackInOut (t) { var s = 1.70158 * 1.525; if ((t *= 2) < 1) { return 0.5 * (t * t * ((s + 1) * t - s)); } return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); }
|
||||
var Easing = {
|
||||
linear : linear,
|
||||
easingQuadraticIn : easingQuadraticIn,
|
||||
easingQuadraticOut : easingQuadraticOut,
|
||||
easingQuadraticInOut : easingQuadraticInOut,
|
||||
easingCubicIn : easingCubicIn,
|
||||
easingCubicOut : easingCubicOut,
|
||||
easingCubicInOut : easingCubicInOut,
|
||||
easingCircularIn : easingCircularIn,
|
||||
easingCircularOut : easingCircularOut,
|
||||
easingCircularInOut : easingCircularInOut,
|
||||
easingBackIn : easingBackIn,
|
||||
easingBackOut : easingBackOut,
|
||||
easingBackInOut : easingBackInOut
|
||||
};
|
||||
function processEasing(fn) {
|
||||
if ( typeof fn === 'function') {
|
||||
return fn;
|
||||
} else if ( typeof fn === 'string' ) {
|
||||
return Easing[fn];
|
||||
} else {
|
||||
return Easing.linear
|
||||
}
|
||||
}
|
||||
Util.processEasing = processEasing;
|
||||
|
||||
var globalObject = typeof (global) !== 'undefined' ? global
|
||||
: typeof(self) !== 'undefined' ? self
|
||||
: typeof(window) !== 'undefined' ? window : {};
|
||||
var TweenConstructor = {};
|
||||
var KUTE = {};
|
||||
|
||||
function numbers(a, b, v) {
|
||||
a = +a; b -= a; return a + b * v;
|
||||
}
|
||||
function units(a, b, u, v) {
|
||||
a = +a; b -= a; return ( a + b * v ) + u;
|
||||
}
|
||||
function arrays(a,b,v){
|
||||
var result = [];
|
||||
for ( var i=0, l=b.length; i<l; i++ ) {
|
||||
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
|
||||
}
|
||||
return result
|
||||
}
|
||||
var Interpolate = {
|
||||
numbers: numbers,
|
||||
units: units,
|
||||
arrays: arrays
|
||||
};
|
||||
|
||||
var add = function(tw) { Tweens.push(tw); };
|
||||
var remove = function(tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }};
|
||||
var getAll = function() { return Tweens };
|
||||
var removeAll = function() { Tweens.length = 0; };
|
||||
var Tick = 0;
|
||||
function Ticker(time) {
|
||||
var i = 0;
|
||||
while ( i < Tweens.length ) {
|
||||
if ( Tweens[i].update(time) ) {
|
||||
i++;
|
||||
} else {
|
||||
Tweens.splice(i, 1);
|
||||
}
|
||||
}
|
||||
Tick = requestAnimationFrame(Ticker);
|
||||
}
|
||||
var Time = {};
|
||||
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
|
||||
Time.now = function () {
|
||||
var time = process.hrtime();
|
||||
return time[0] * 1000 + time[1] / 1000000;
|
||||
};
|
||||
} else if (typeof (self) !== 'undefined' &&
|
||||
self.performance !== undefined &&
|
||||
self.performance.now !== undefined) {
|
||||
Time.now = self.performance.now.bind(self.performance);
|
||||
}
|
||||
function stop () {
|
||||
setTimeout(function () {
|
||||
if (!Tweens.length && Tick) {
|
||||
cancelAnimationFrame(Tick);
|
||||
Tick = null;
|
||||
for (var obj in onStart) {
|
||||
if (typeof (onStart[obj]) === 'function') {
|
||||
KUTE[obj] && (delete KUTE[obj]);
|
||||
} else {
|
||||
for (var prop in onStart[obj]) {
|
||||
KUTE[prop] && (delete KUTE[prop]);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i in Interpolate) {
|
||||
KUTE[i] && (delete KUTE[i]);
|
||||
}
|
||||
}
|
||||
},64);
|
||||
}
|
||||
function linkInterpolation(){
|
||||
var this$1 = this;
|
||||
var loop = function ( component ) {
|
||||
var componentLink = linkProperty[component];
|
||||
var componentProps = supportedProperties[component];
|
||||
for ( var fnObj in componentLink ) {
|
||||
if ( typeof(componentLink[fnObj]) === 'function'
|
||||
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps.includes(i)
|
||||
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps.includes(j); }); } ) )
|
||||
{
|
||||
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
|
||||
} else {
|
||||
for ( var prop in this$1.valuesEnd ) {
|
||||
for ( var i in this$1.valuesEnd[prop] ) {
|
||||
if ( typeof(componentLink[i]) === 'function' ) {
|
||||
!KUTE[i] && (KUTE[i] = componentLink[i]);
|
||||
} else {
|
||||
for (var j in componentLink[fnObj]){
|
||||
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
|
||||
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
for (var component in linkProperty)loop( component );
|
||||
}
|
||||
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
|
||||
for (var blob in Render ) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
}
|
||||
globalObject["_KUTE"] = KUTE;
|
||||
var Internals = {
|
||||
add: add,
|
||||
remove: remove,
|
||||
getAll: getAll,
|
||||
removeAll: removeAll,
|
||||
stop: stop,
|
||||
linkInterpolation: linkInterpolation
|
||||
};
|
||||
|
||||
function selector(el, multi) {
|
||||
try{
|
||||
var requestedElem;
|
||||
if (multi){
|
||||
requestedElem = el instanceof HTMLCollection
|
||||
|| el instanceof NodeList
|
||||
|| el instanceof Array && el[0] instanceof Element
|
||||
? el : document.querySelectorAll(el);
|
||||
} else {
|
||||
requestedElem = el instanceof Element
|
||||
|| el === window
|
||||
? el : document.querySelector(el);
|
||||
}
|
||||
return requestedElem;
|
||||
} catch(e){
|
||||
console.error(("KUTE.js - Element(s) not found: " + el + "."));
|
||||
}
|
||||
}
|
||||
|
||||
var AnimationBase = function AnimationBase(Component){
|
||||
this.Component = Component;
|
||||
return this.setComponent()
|
||||
};
|
||||
AnimationBase.prototype.setComponent = function setComponent (){
|
||||
var Component = this.Component;
|
||||
var ComponentName = Component.component;
|
||||
var Functions = { onStart: onStart, onComplete: onComplete, crossCheck: crossCheck };
|
||||
var Category = Component.category;
|
||||
var Property = Component.property;
|
||||
supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property;
|
||||
if (Component.defaultOptions) {
|
||||
for (var op in Component.defaultOptions) {
|
||||
defaultOptions[op] = Component.defaultOptions[op];
|
||||
}
|
||||
}
|
||||
if (Component.functions) {
|
||||
for (var fn in Functions) {
|
||||
if (fn in Component.functions && ['onStart','onComplete'].includes(fn)) {
|
||||
if (typeof (Component.functions[fn]) === 'function' ) {
|
||||
!Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
|
||||
!Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn]);
|
||||
} else {
|
||||
for ( var ofn in Component.functions[fn] ){
|
||||
!Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
|
||||
!Functions[fn][ComponentName][ofn] && (Functions[fn][ComponentName][ofn] = Component.functions[fn][ofn]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (Component.Interpolate) {
|
||||
for (var fn$1 in Component.Interpolate) {
|
||||
if (!Interpolate[fn$1]) {
|
||||
Interpolate[fn$1] = Component.Interpolate[fn$1];
|
||||
}
|
||||
}
|
||||
linkProperty[ComponentName] = Component.Interpolate;
|
||||
}
|
||||
if (Component.Util) {
|
||||
for (var fn$2 in Component.Util){
|
||||
!Util[fn$2] && (Util[fn$2] = Component.Util[fn$2]);
|
||||
}
|
||||
}
|
||||
return {name:ComponentName}
|
||||
};
|
||||
|
||||
var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
|
||||
this.element = targetElement;
|
||||
this.playing = false;
|
||||
this._startTime = null;
|
||||
this._startFired = false;
|
||||
this.valuesEnd = endObject;
|
||||
this.valuesStart = startObject;
|
||||
options = options || {};
|
||||
this._resetStart = options.resetStart || 0;
|
||||
this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
|
||||
this._duration = options.duration || defaultOptions.duration;
|
||||
this._delay = options.delay || defaultOptions.delay;
|
||||
for (var op in options) {
|
||||
var internalOption = "_" + op;
|
||||
if( !(internalOption in this ) ) { this[internalOption] = options[op]; }
|
||||
}
|
||||
var easingFnName = this._easing.name;
|
||||
if (!onStart[easingFnName]) {
|
||||
onStart[easingFnName] = function(prop){
|
||||
!KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing);
|
||||
};
|
||||
}
|
||||
return this;
|
||||
};
|
||||
TweenBase.prototype.start = function start (time) {
|
||||
add(this);
|
||||
this.playing = true;
|
||||
this._startTime = time || KUTE.Time();
|
||||
this._startTime += this._delay;
|
||||
if (!this._startFired) {
|
||||
if (this._onStart) {
|
||||
this._onStart.call(this);
|
||||
}
|
||||
for (var obj in onStart) {
|
||||
if (typeof (onStart[obj]) === 'function') {
|
||||
onStart[obj].call(this,obj);
|
||||
} else {
|
||||
for (var prop in onStart[obj]) {
|
||||
onStart[obj][prop].call(this,prop);
|
||||
}
|
||||
}
|
||||
}
|
||||
linkInterpolation.call(this);
|
||||
this._startFired = true;
|
||||
}
|
||||
!Tick && Ticker();
|
||||
return this;
|
||||
};
|
||||
TweenBase.prototype.stop = function stop () {
|
||||
if (this.playing) {
|
||||
remove(this);
|
||||
this.playing = false;
|
||||
if (this._onStop) {
|
||||
this._onStop.call(this);
|
||||
}
|
||||
this.close();
|
||||
}
|
||||
return this;
|
||||
};
|
||||
TweenBase.prototype.close = function close () {
|
||||
for (var component in onComplete){
|
||||
for (var toClose in onComplete[component]){
|
||||
onComplete[component][toClose].call(this,toClose);
|
||||
}
|
||||
}
|
||||
this._startFired = false;
|
||||
stop.call(this);
|
||||
};
|
||||
TweenBase.prototype.update = function update (time) {
|
||||
time = time !== undefined ? time : KUTE.Time();
|
||||
var elapsed, progress;
|
||||
if ( time < this._startTime && this.playing ) { return true; }
|
||||
elapsed = (time - this._startTime) / this._duration;
|
||||
elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
|
||||
progress = this._easing(elapsed);
|
||||
for (var tweenProp in this.valuesEnd){
|
||||
KUTE[tweenProp](this.element,this.valuesStart[tweenProp],this.valuesEnd[tweenProp],progress);
|
||||
}
|
||||
if (this._onUpdate) {
|
||||
this._onUpdate.call(this);
|
||||
}
|
||||
if (elapsed === 1) {
|
||||
if (this._onComplete) {
|
||||
this._onComplete.call(this);
|
||||
}
|
||||
this.playing = false;
|
||||
this.close();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
TweenConstructor.Tween = TweenBase;
|
||||
|
||||
var TC = TweenConstructor.Tween;
|
||||
function fromTo(element, startObject, endObject, optionsObj) {
|
||||
optionsObj = optionsObj || {};
|
||||
return new TC(selector(element), startObject, endObject, optionsObj)
|
||||
}
|
||||
|
||||
function perspective(a, b, u, v) {
|
||||
return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
|
||||
}
|
||||
function translate3d(a, b, u, v) {
|
||||
var translateArray = [];
|
||||
for (var ax=0; ax<3; ax++){
|
||||
translateArray[ax] = ( a[ax]||b[ax] ? ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 : 0 ) + u;
|
||||
}
|
||||
return ("translate3d(" + (translateArray.join(',')) + ")");
|
||||
}
|
||||
function rotate3d(a, b, u, v) {
|
||||
var rotateStr = '';
|
||||
rotateStr += a[0]||b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
|
||||
rotateStr += a[1]||b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
|
||||
rotateStr += a[2]||b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
|
||||
return rotateStr
|
||||
}
|
||||
function translate(a, b, u, v) {
|
||||
var translateArray = [];
|
||||
translateArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
|
||||
translateArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
|
||||
return ("translate(" + (translateArray.join(',')) + ")");
|
||||
}
|
||||
function rotate(a, b, u, v) {
|
||||
return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
|
||||
}
|
||||
function skew(a, b, u, v) {
|
||||
var skewArray = [];
|
||||
skewArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
|
||||
skewArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
|
||||
return ("skew(" + (skewArray.join(',')) + ")");
|
||||
}
|
||||
function scale (a, b, v) {
|
||||
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")");
|
||||
}
|
||||
function onStartTransform(tweenProp){
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] =
|
||||
(a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
|
||||
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
|
||||
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
|
||||
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
|
||||
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
|
||||
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
|
||||
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
|
||||
};
|
||||
}
|
||||
}
|
||||
var supportedTransformProperties = [
|
||||
'perspective',
|
||||
'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
|
||||
'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
|
||||
'skewX', 'skewY', 'skew',
|
||||
'scale'
|
||||
];
|
||||
var baseTransformOps = {
|
||||
component: 'transformFunctions',
|
||||
property: 'transform',
|
||||
subProperties: supportedTransformProperties,
|
||||
functions: {onStart: onStartTransform},
|
||||
Interpolate: {
|
||||
perspective: perspective,
|
||||
translate3d: translate3d,
|
||||
rotate3d: rotate3d,
|
||||
translate: translate, rotate: rotate, scale: scale, skew: skew
|
||||
},
|
||||
};
|
||||
|
||||
function boxModelOnStart(tweenProp){
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((numbers(a,b,v)*10)>>0)/10 : (numbers(a,b,v) ) >> 0) + "px";
|
||||
};
|
||||
}
|
||||
}
|
||||
var baseBoxProps = ['top','left','width','height'];
|
||||
var baseBoxOnStart = {};
|
||||
baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
|
||||
var baseBoxModelOps = {
|
||||
component: 'boxModelProps',
|
||||
category: 'boxModel',
|
||||
properties: baseBoxProps,
|
||||
Interpolate: {numbers: numbers},
|
||||
functions: {onStart: baseBoxOnStart}
|
||||
};
|
||||
|
||||
function onStartOpacity(tweenProp){
|
||||
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000;
|
||||
};
|
||||
}
|
||||
}
|
||||
var baseOpacityOps = {
|
||||
component: 'opacityProperty',
|
||||
property: 'opacity',
|
||||
Interpolate: {numbers: numbers},
|
||||
functions: {onStart: onStartOpacity}
|
||||
};
|
||||
|
||||
function on (element, event, handler, options) {
|
||||
options = options || false;
|
||||
element.addEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
function off (element, event, handler, options) {
|
||||
options = options || false;
|
||||
element.removeEventListener(event, handler, options);
|
||||
}
|
||||
|
||||
function one (element, event, handler, options) {
|
||||
on(element, event, function handlerWrapper(e){
|
||||
if (e.target === element) {
|
||||
handler(e);
|
||||
off(element, event, handlerWrapper, options);
|
||||
}
|
||||
}, options);
|
||||
}
|
||||
|
||||
var supportPassive = (function () {
|
||||
var result = false;
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function() {
|
||||
result = true;
|
||||
}
|
||||
});
|
||||
one(document, 'DOMContentLoaded', function (){}, opts);
|
||||
} catch (e) {}
|
||||
return result;
|
||||
})();
|
||||
|
||||
var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
|
||||
|
||||
var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
|
||||
var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
|
||||
var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
|
||||
var passiveHandler = supportPassive ? { passive: false } : false;
|
||||
function preventScroll(e) {
|
||||
this.scrolling && e.preventDefault();
|
||||
}
|
||||
function getScrollTargets(){
|
||||
var el = this.element;
|
||||
return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
|
||||
}
|
||||
function scrollIn(){
|
||||
var targets = getScrollTargets.call(this);
|
||||
if ( 'scroll' in this.valuesEnd && !targets.el.scrolling) {
|
||||
targets.el.scrolling = 1;
|
||||
on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
|
||||
on( targets.el, touchOrWheel, preventScroll, passiveHandler);
|
||||
targets.st.style.pointerEvents = 'none';
|
||||
}
|
||||
}
|
||||
function scrollOut(){
|
||||
var targets = getScrollTargets.call(this);
|
||||
if ( 'scroll' in this.valuesEnd && targets.el.scrolling) {
|
||||
targets.el.scrolling = 0;
|
||||
off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
|
||||
off( targets.el, touchOrWheel, preventScroll, passiveHandler);
|
||||
targets.st.style.pointerEvents = '';
|
||||
}
|
||||
}
|
||||
function onStartScroll(tweenProp){
|
||||
if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.scrollTop = (numbers(a,b,v))>>0;
|
||||
};
|
||||
}
|
||||
}
|
||||
function onCompleteScroll(tweenProp){
|
||||
scrollOut.call(this);
|
||||
}
|
||||
var baseScrollOps = {
|
||||
component: 'scrollProperty',
|
||||
property: 'scroll',
|
||||
Interpolate: {numbers: numbers},
|
||||
functions: {
|
||||
onStart: onStartScroll,
|
||||
onComplete: onCompleteScroll
|
||||
},
|
||||
Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
|
||||
};
|
||||
|
||||
var BaseTransform = new AnimationBase(baseTransformOps);
|
||||
var BaseBoxModel = new AnimationBase(baseBoxModelOps);
|
||||
var BaseOpacity = new AnimationBase(baseOpacityOps);
|
||||
var BaseScroll = new AnimationBase(baseScrollOps);
|
||||
var indexBase = {
|
||||
Animation: AnimationBase,
|
||||
Components: {
|
||||
BaseTransform: BaseTransform,
|
||||
BaseBoxModel: BaseBoxModel,
|
||||
BaseScroll: BaseScroll,
|
||||
BaseOpacity: BaseOpacity,
|
||||
},
|
||||
TweenBase: TweenBase,
|
||||
fromTo: fromTo,
|
||||
Objects: BaseObjects,
|
||||
Easing: Easing,
|
||||
Util: Util,
|
||||
Render: Render,
|
||||
Interpolate: Interpolate,
|
||||
Internals: Internals,
|
||||
Selector: selector,
|
||||
Version: version
|
||||
};
|
||||
|
||||
return indexBase;
|
||||
|
||||
})));
|
||||
2
demo/src/kute-base.min.js
vendored
Normal file
2
demo/src/kute-base.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
demo/src/kute-css.min.js
vendored
2
demo/src/kute-css.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js v1.6.6 | © dnp_theme | CSS Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],v=["backgroundPosition"],b=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,v),x=R.length,C=C||{},T=0;T<x;T++)-1!==g.indexOf(R[T])?C[R[T]]="rgba(0,0,0,0)":-1!==y.indexOf(R[T])?C[R[T]]=0:-1!==v.indexOf(R[T])?C[R[T]]=[50,50]:"clip"===R[T]&&(C[R[T]]=[0,0,0,0]);for(var T=0,W=g.length;T<W;T++)i[g[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i,o){t.style[e]=c(r,n,i,o.keepHex)}),l(e)},o[g[T]]=function(t){return d(this.element,t)||C[t]};for(var T=0,W=b.length;T<W;T++)i[b[T]]=function(t,e){return t in n||(p.indexOf(t)>-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[b[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T<W;T++)i[s[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
|
||||
2785
demo/src/kute-extra.js
Normal file
2785
demo/src/kute-extra.js
Normal file
File diff suppressed because it is too large
Load diff
2
demo/src/kute-extra.min.js
vendored
Normal file
2
demo/src/kute-extra.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
demo/src/kute-svg.min.js
vendored
2
demo/src/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/src/kute-text.min.js
vendored
2
demo/src/kute-text.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js v1.6.6 | © dnp_theme | Text Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),h=String("0123456789").split(""),f=a.concat(l,h),c=(f.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?h:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],x="",b="",d=n.substring(0),C=r.substring(0);x=""!==n?d.substring(d.length,g(i*d.length,d.length)>>0):"",b=C.substring(0,g(i*C.length,C.length)>>0),t.innerHTML=i<1?b+m+x:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
|
||||
4
demo/src/kute.min.js
vendored
4
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/src/polyfill.min.js
vendored
Normal file
2
demo/src/polyfill.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
"use strict";
|
||||
if(window.addEventListener&&Window.prototype.addEventListener||(window.addEventListener=Window.prototype.addEventListener=Document.prototype.addEventListener=Element.prototype.addEventListener=function(){var e=this,t=arguments[0],n=arguments[1];e._events||(e._events={}),e._events[t]||(e._events[t]=function(t){var n,o=e._events[t.type].list,i=o.slice(),r=-1,a=i.length;for(t.preventDefault=function(){!1!==t.cancelable&&(t.returnValue=!1)},t.stopPropagation=function(){t.cancelBubble=!0},t.stopImmediatePropagation=function(){t.cancelBubble=!0,t.cancelImmediate=!0},t.currentTarget=e,t.relatedTarget=t.fromElement||null,t.target=t.target||t.srcElement||e,t.timeStamp=(new Date).getTime(),t.clientX&&(t.pageX=t.clientX+document.documentElement.scrollLeft,t.pageY=t.clientY+document.documentElement.scrollTop);++r<a&&!t.cancelImmediate;)r in i&&(n=i[r],-1!==o.indexOf(n)&&"function"==typeof n&&n.call(e,t))},e._events[t].list=[],e.attachEvent&&e.attachEvent("on"+t,e._events[t])),e._events[t].list.push(n)},window.removeEventListener=Window.prototype.removeEventListener=Document.prototype.removeEventListener=Element.prototype.removeEventListener=function(){var e,t=this,n=arguments[0],o=arguments[1];t._events&&t._events[n]&&t._events[n].list&&-1!==(e=t._events[n].list.indexOf(o))&&(t._events[n].list.splice(e,1),t._events[n].list.length||(t.detachEvent&&t.detachEvent("on"+n,t._events[n]),delete t._events[n]))}),Date.now||(Date.now=function(){return(new Date).getTime()}),window.performance||(window.performance={}),!window.performance.now){var e=Date.now();window.performance.now=function(){return Date.now()-e}}if(!window.requestAnimationFrame){var t=Date.now();window.requestAnimationFrame=function(e){if("function"!=typeof e)throw new TypeError(e+"is not a function");var n=Date.now(),o=16+t-n;return o<0&&(o=0),t=n,setTimeout((function(){t=Date.now(),e(performance.now())}),o)},window.cancelAnimationFrame=function(e){clearTimeout(e)}}
|
||||
186
demo/start.html
186
demo/start.html
|
|
@ -1,186 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="A quick start guide for KUTE.js, CDN sources, NPM.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,tweening engine,animation engine,getting started with kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>Getting Started with 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li class="active"><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h2>Getting Started</h2>
|
||||
<p>Welcome to KUTE.js API documentation, here we're going to talk about how to download, install, use, control and set up cross browser animations, in great detail. KUTE.js can be found on
|
||||
<a href="http://www.jsdelivr.com/#!kute.js" target="_blank">CDN</a> and also npm and Bower repositories with all it's features and tools.</p>
|
||||
|
||||
<h3>Bower and NPM</h3>
|
||||
<p>You can install KUTE.js package by using either Bower or NPM.</p>
|
||||
<pre><code class="language-clike">$ npm install --save kute.js
|
||||
# Or
|
||||
$ bower install --save kute.js
|
||||
</code></pre>
|
||||
|
||||
<h3>Require and CommonJS</h3>
|
||||
<pre><code class="language-javascript">// CommonJS style
|
||||
var kute = require("kute.js"); //grab the core
|
||||
require("kute.js/kute-svg"); // Add SVG Plugin
|
||||
require("kute.js/kute-css"); // Add CSS Plugin
|
||||
require("kute.js/kute-attr"); // Add Attributes Plugin
|
||||
require("kute.js/kute-text"); // Add Text Plugin
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-javascript">// AMD style
|
||||
define([
|
||||
"kute.js",
|
||||
"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
|
||||
"kute.js/kute-text.js" // optional for string write and number incrementing animations
|
||||
], function(KUTE){
|
||||
// ...
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<h3>Websites</h3>
|
||||
<p>In your website add the following code, the best would be to put it at the end of your <code>body</code> tag:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
<p>An alternate CDN link here:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
|
||||
<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-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-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 -->
|
||||
</code></pre>
|
||||
<p>Your awesome animation coding would follow after these script links.</p>
|
||||
|
||||
<h3>Targeting Legacy Browsers</h3>
|
||||
<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any <code>transform</code> property or
|
||||
<code>RGBA</code> colors while IE9 can only do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the
|
||||
<a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more information.</p>
|
||||
<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and
|
||||
<a target="_blank" href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">here is the full refference</a> on that. For other legacy browsers there is a ton of ways
|
||||
to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
|
||||
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.5/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- some stuff -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- some stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
596
demo/svg.html
596
demo/svg.html
|
|
@ -1,596 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 10 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 Plugin for KUTE.js enables animation for SVG morph, draw SVG, as well as some SVG specific CSS properties.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,svg transform,cross-browser svg transform,tweening engine,animation engine,morph svg,draw svg,svg animation,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js SVG Plugin | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li class="active"><a href="svg.html">SVG Plugin </a></li>
|
||||
<li><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>SVG Plugin</h2>
|
||||
<p>The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, SVG morphing of path shapes and SVG transforms. We'll dig into this in great detail as well as provide valuable tips on how to
|
||||
configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.</p>
|
||||
<p>Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below <a href="http://caniuse.com/#search=svg" target="_blank">do not support inline SVG</a> so make sure to fiter out your SVG
|
||||
tweens.</p>
|
||||
<h3>SVG Morphing</h3>
|
||||
<p>One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <code><path></code> and <code><glyph></code> SVG elements, with closed shapes (their <code>d</code> attribute ends with <code>z</code>).
|
||||
On initialization or animation start, depending on the chosen KUTE.js method, it will <a href="http://phrogz.net/SVG/convert_path_to_polygon.xhtml" target="_blank">sample a number of points</a> along the two paths based on a default /
|
||||
given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect
|
||||
of the morph:</p>
|
||||
<ul>
|
||||
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 15 but the
|
||||
<a href="http://bl.ocks.org/mbostock/3081153"
|
||||
target="_blank">D3.js example</a> uses 4.</li>
|
||||
<li><kbd>morphIndex: Number</kbd> option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is
|
||||
not set.</li>
|
||||
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape. By default this option is <code>false</code>.</li>
|
||||
<li><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape. By default this option is also <code>false</code>.</li>
|
||||
</ul>
|
||||
<h4>Basic Example</h4>
|
||||
<p>In the first morph example we are going to go through some basic steps on how to setup and how to improve the morph animation. Our demo is a morph from a rectangle into a star, so first let's create an SVG element with two paths, first is
|
||||
going to be visible, filled with color, while second is going to be hidden. The first path is the start shape and the second is the end shape, you guessed it, and we can also add some ID to the paths so we can easily target them with our
|
||||
code.</p>
|
||||
<pre><code class="language-markup"><svg 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>
|
||||
</code></pre>
|
||||
<p>Now we can apply both <code>.to()</code> and <code>fromTo()</code> methods:</p>
|
||||
<pre><code class="language-javascript">// the fromTo() method
|
||||
var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
|
||||
|
||||
// OR
|
||||
|
||||
// the to() method will take the path's d attribute value and use it as start value
|
||||
var tween = KUTE.to('#rectangle', { path: '#star' }).start();
|
||||
|
||||
// OR
|
||||
|
||||
// simply pass in a valid path string without the need to have two paths in your SVG
|
||||
var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
|
||||
</code></pre>
|
||||
|
||||
<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-red" 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>
|
||||
</div>
|
||||
|
||||
<p>As you can see, the animation could need some fine tunning. Let's go ahead and play with the new <a href="http://codepen.io/thednp/pen/YGayLg">utility</a>, it's gonna make your SVG morph work a breeze.</p>
|
||||
|
||||
<p>Well, we're going to set the <code>morphIndex: 127</code> tween option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values
|
||||
around the recommended one. 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
|
||||
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="star1" 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="morphBtn1" class="btn btn-orange" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Much better! You can play with the <code>morphIndex</code> value, maybe you can get a more interesting morph.</p>
|
||||
|
||||
<h4>Morphing Polygon Paths</h4>
|
||||
<p>When your paths are only <code>lineto</code>, <code>vertical-lineto</code> and <code>horizontal-lineto</code> based shapes (the <code>d</code> attribute consists of <code>L</code>, <code>V</code> and
|
||||
<code>H</code> path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The
|
||||
<code>morphPrecision</code> option will not apply since the paths are already polygons, still you will have access to all the other options.</p>
|
||||
<p>The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative <code>v</code> and <code>h</code> path commands. I highly
|
||||
recommend using my <a href="http://codepen.io/thednp/full/EgVqLw/">utility converter</a> to prepare your paths in that case.</p>
|
||||
|
||||
<pre><code class="language-javascript">// let's morph a triangle into a star
|
||||
var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
|
||||
|
||||
// or same path into a square
|
||||
var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
|
||||
</code></pre>
|
||||
|
||||
<p>In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each
|
||||
tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.</p>
|
||||
|
||||
<div class="featurettes">
|
||||
|
||||
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
|
||||
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
|
||||
|
||||
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
|
||||
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
|
||||
|
||||
<path id="triangle" fill="#673AB7" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
|
||||
|
||||
<path id="star2" 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>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="morphBtn2" class="btn btn-green" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only <code>L</code> path command will make sure to prevent value processing
|
||||
and allow the animation to start as fast as possible.</p>
|
||||
|
||||
|
||||
<h4>Multi Path Example</h4>
|
||||
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:</p>
|
||||
<pre><code class="language-markup"><svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
<path 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
|
||||
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
|
||||
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
|
||||
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 d="M0.175 256l-0.175-156.037 192-26.072v182.109z
|
||||
M224 69.241l255.936-37.241v224h-255.936z
|
||||
M479.999 288l-0.063 224-255.936-36.008v-187.992z
|
||||
M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
|
||||
</svg>
|
||||
</code></pre>
|
||||
<p>As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.</p>
|
||||
|
||||
<pre><code class="language-markup"><svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
<path id="w11" 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" 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" 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" 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="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
|
||||
<path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
|
||||
<path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
|
||||
<path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
|
||||
</svg>
|
||||
</code></pre>
|
||||
<p>After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: <code>#w11</code>
|
||||
to <code>#w24</code>, <code>#w13</code> to <code>#w21</code>, <code>#w14</code> to <code>#w22</code> and <code>#w12</code> to <code>#w23</code>.</p>
|
||||
<p>Now we can write the tween objects and get to working:</p>
|
||||
|
||||
<pre><code class="language-javascript">var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
|
||||
var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
|
||||
var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
|
||||
var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
|
||||
</code></pre>
|
||||
|
||||
<p>As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:</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="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
|
||||
<path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
|
||||
<path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
|
||||
<path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="multiMorphBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Note that this final touch required using <code>reverseSecondPath:true</code> option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to
|
||||
check the <a href="assets/js/svg.js" target="_blank">svg.js</a> for a full code review.</p>
|
||||
|
||||
<h4>Complex Example</h4>
|
||||
<p>The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant
|
||||
differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure
|
||||
the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.</p>
|
||||
<p>An important aspect of multi path morph is syncronization: since the <code>.to()</code> method will prepare the paths for interpolation at animation start, and this usually takes a bit of time,
|
||||
the problem can be easily solved as always using the <code>.fromTo()</code> method. So, let's get into it:</p>
|
||||
|
||||
<pre><code class="language-javascript">// complex multi morph, the paths should be self explanatory
|
||||
var morph1 = KUTE.fromTo('#start-container', { path: '#start-container' }, { path: '#end-container' });
|
||||
var morph2 = KUTE.fromTo('#startpath1', { path: '#startpath1' }, { path: '#endpath1' });
|
||||
var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' }, { path: '#endpath1' });
|
||||
var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, { path: '#endpath2' });
|
||||
</code></pre>
|
||||
<p>As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next
|
||||
example, we have used a <code>mask</code> where we included the subpaths of both start and end shape, just to get the same visual as the originals.</p>
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" id="multi-morph-example-2" 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="M256 0c-141.385 0-256 114.614-256 256s114.614 256 256 256c141.385 0 256-114.615 256-256 0-141.386-114.615-256-256-256z"></path>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="compliMorphBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates
|
||||
for tween, it's super light, it's a lighter script, it might be a better solution for your applications.</p>
|
||||
|
||||
<h4>Recommendations</h4>
|
||||
<ul>
|
||||
<li>The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.</li>
|
||||
<li>When morphing subpaths/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>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>Polygons with only <code>lineto</code> path commands are best for performance.</li>
|
||||
<li>Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.</li>
|
||||
<li>Don't forget about the <a href="http://codepen.io/thednp/pen/YGayLg">path morph utility</a>, it's gonna make your work a lot easier.</li>
|
||||
<li>The SVG morph performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared
|
||||
already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the <code>.to()</code>
|
||||
based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will
|
||||
be delayed.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Drawing Stroke</h3>
|
||||
<p>Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <code><path></code> shapes, <code><circle></code>, <code><ellipse></code>, <code><rect></code>,
|
||||
<code><line></code>, <code><polyline></code> and <code><polygon></code> shapes are also supported; the script uses the SVG standard <code>.getTotalLength()</code> method for <code><path></code>
|
||||
shapes, while the others use some helper methods. Here some code examples:</p>
|
||||
|
||||
<pre><code class="language-javascript">// draw the stroke from 0-10% to 90-100%
|
||||
var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
|
||||
|
||||
// draw the stroke from zero to full path length
|
||||
var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
|
||||
|
||||
// draw the stroke from full length to 50%
|
||||
var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
|
||||
</code></pre>
|
||||
|
||||
<p>We're gonna chain these tweens and start the animation real quick.</p>
|
||||
<div class="featurettes">
|
||||
<svg style="width:600px" class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2046 513">
|
||||
<path fill="none" style="stroke:#2196F3; stroke-width:20; stroke-dashoffset: -724.077px; stroke-dasharray: 0px, 1448.15px" id="drawSVG" d="M432 64l-240 240-112-112-80 80 192 192 320-320z"/>
|
||||
<circle fill="none" r="220" cx="780" cy="255" style="stroke:#4CAF50; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG1"/>
|
||||
<ellipse fill="none" rx="220" ry="100" cx="780" cy="255" style="stroke:#55c55a; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG11"/>
|
||||
<rect fill="none" width="430" height="430" x="1070" y="30" style="stroke:#FF5722; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG2"/>
|
||||
<polygon fill="none" points="1579,307 1623,117 1801,33 1978,117 2022,307 1899,460 1702,460 1579,307" style="stroke:#673AB7; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG3"/>
|
||||
</svg>
|
||||
<div class="example-buttons">
|
||||
<a id="drawBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Remember: the <code class="bg-indigo">draw</code> property also accepts absolute values, eg. <code>draw: '0 150'</code>; the <code>.to()</code> method takes <code>0% 100%</code> as start value for your
|
||||
tweens when <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> are not set.</p>
|
||||
|
||||
<h3>SVG Transforms</h3>
|
||||
<p>Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve
|
||||
most browser inconsistencies. A very simple roadmap was described <a href="https://github.com/thednp/kute.js/issues/31" target="_blank">here</a>; in brief we needed to find a way to enable SVG transforms
|
||||
in a <a href="https://css-tricks.com/transforms-on-svg-elements/" target="_blank">reliable and cross-browser</a> supported fashion.</p>
|
||||
<p>With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the <code>transformOrigin</code> just like for CSS3 transforms and secondly the unique
|
||||
way to normalize translation to work with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with
|
||||
the <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">working draft</a>.</p>
|
||||
<p>While you can still use regular <a href="examples.html">CSS3 transforms</a> for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based
|
||||
<code>transform-origin</code> values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements.</p>
|
||||
<p>KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the <code>transform</code> presentation attribute and the
|
||||
<code class="bg-indigo">svgTransform</code> tween property with a special notation:</p>
|
||||
|
||||
<pre><code class="language-javascript">// using the svgTransform property works in all SVG enabled browsers
|
||||
var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }});
|
||||
|
||||
// regular CSS3 transforms apply to SVG elements but not all browsers fully/partially supported
|
||||
var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }, { transformOrigin: '50% 50%' });
|
||||
</code></pre>
|
||||
|
||||
<p>As you can see we have some familiar notation, but an important notice here is that <code class="bg-indigo">svgTransform</code> tween property treat all SVG transform functions as if you are using the
|
||||
<code>50% 50%</code> of the shape box at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.</p>
|
||||
<p>Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the <code>transform</code> attribute accepts no measurement units such as degrees
|
||||
or pixels. For these reasons the <code>transformOrigin</code> tween option can also accept array values just in case you need coordinates relative to the parent <code><svg></code> element. Also values
|
||||
like <i>top left</i> values will work.</p>
|
||||
<p>In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as <code class="bg-indigo">svgTransform</code> based animations (RIGHT). I highly encourage you
|
||||
to test all of them in all browsers, and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.</p>
|
||||
|
||||
<h4>SVG Rotation</h4>
|
||||
<p>Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the <code class="bg-indigo">svgTransform</code> will only accept single value
|
||||
for the angle value <code>rotate: 45</code>, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a <code>transformOrigin</code>
|
||||
tween option to override the behavior.</p>
|
||||
<p>The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department.
|
||||
Let's have a look at a quick demo:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg id="svgRotate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-olive" 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 class="bg-blue" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="rotateBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set <code>transformOrigin</code> option to <i>50% 50%</i>, but this
|
||||
animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the <code>rotate: 360</code> notation and the animation shows the shape rotating
|
||||
around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.</p>
|
||||
<p>When for CSS3 transforms we could have used values such as <i>center bottom</i> as <code>transform-origin</code> (also not supported in all modern browsers for SVGs), the entire processing was basically in/by
|
||||
the browser, however when it comes to SVGs the plugin here will compute the <code>transformOrigin</code> tween setting value accordingly to use a shape's <code>.getBBox()</code> value to determine for instance
|
||||
the coordinates for <i>25% 75%</i> position or <i>center top</i>.</p>
|
||||
|
||||
<p>In other cases you may want to rotate shapes around the center point of the parent <code><svg></code> or <code><g></code> element, and we use it's <code>.getBBox()</code> to determine the <i>50% 50%</i>
|
||||
coordinate, so here's how to deal with it:</p>
|
||||
|
||||
<pre><code class="language-javascript">// rotate around parent svg's "50% 50%" coordinate as transform-origin
|
||||
// get the bounding box of the parent element
|
||||
var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent <svg> element
|
||||
|
||||
// we need to know the current translate position of the element [x,y]
|
||||
// in our case is:
|
||||
var translation = [580,0];
|
||||
|
||||
// determine the X point of transform-origin for 50%
|
||||
var svgOriginX = svgBB.width * 50 / 100 - translation[0];
|
||||
|
||||
// determine the Y point of transform-origin for 50%
|
||||
var svgOriginY = svgBB.height * 50 / 100 - translation[1];
|
||||
|
||||
// set your rotation tween with "50% 50%" transform-origin of the parent <svg> element
|
||||
var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformOrigin: [svgOriginX, svgOriginY]} );
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg id="svgRotate1" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-olive" 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 class="bg-blue" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="rotateBtn1" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Note that this is the only SVG transform example in which we have adapted the <code>transform-origin</code> for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are
|
||||
interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check <a href="./assets/js/svg.js">svg.js</a> file.</p>
|
||||
|
||||
<h4>SVG Translation</h4>
|
||||
<p>In this example we'll have a look at translations, so when setting <code>translate: [150,0]</code>, the first value is X (horizontal) coordinate to which the shape will translate to and the second value is
|
||||
Y (vertical) coordinate for translation. When <code>translate: 150</code> notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements
|
||||
transformation. Let's have a look at a quick demo:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg id="svgTranslate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-green" 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 class="bg-orange" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="translateBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The first tween uses the CSS3 <code>translate: 580</code> notation for the end value, while the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value.
|
||||
For the second example the values are unitless and are relative to the <code>viewBox</code> attribute.</p>
|
||||
|
||||
<h4>SVG Skew</h4>
|
||||
<p>For skews for SVGs we have a very simple notation: <code>skewX: 25</code> or <code>skewY: -25</code> as SVGs don't support the <code>skew: [X,Y]</code> function. Here's a quick demo:</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgSkew" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-yellow" 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 class="bg-indigo" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="skewBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the <code class="bg-indigo">svgTransform</code> tween
|
||||
property. You will notice translation kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via <code>transform</code> attribute works just
|
||||
as for the CSS3 transformations.</p>
|
||||
|
||||
<h4>SVG Scaling</h4>
|
||||
<p>Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like <code>scale: 1.5</code>, for both X (horizontal) axis and Y (vertical) axis,
|
||||
to keep it simple and even if SVGs do support <code>scale(X,Y)</code>. But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to
|
||||
make the animation look as we would expect. A quick demo:</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgScale" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-lime" 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 class="bg-olive" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="scaleBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The first tween scales the shape at <code>scale: 1.5</code> via regular CSS3 transforms, and the second tween scales down the shape at <code>scale: 0.5</code> value via <code class="bg-indigo">svgTransform</code>.
|
||||
If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. A similar case as with the skews.</p>
|
||||
|
||||
<h4>SVG Mixed Transform Functions</h4>
|
||||
<p>Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation <code>transform-origin</code> to make it look as you would expect it
|
||||
from regular HTML elements. Let's combine 3 functions at the same time and see what happens:</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgMixed" class="example-box-model example-box" style="width: 320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
|
||||
<path class="bg-green" 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 class="bg-indigo" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="mixedBtn" class="btn btn-teal" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Both shapes are scaled at <code>scale: 1.5</code>, translated to <code>translate: 250</code> and skewed at <code>skewX: -15</code>. If you inspect the elements, you will notice the second shape's translation is
|
||||
different from what we've set in the tween object, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. This means that the plugin will also compensate rotation transform origin
|
||||
when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.</p>
|
||||
|
||||
<h4>Chained SVG transforms</h4>
|
||||
<p>The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom <code>transform-origin</code>,
|
||||
it should look like this:</p>
|
||||
|
||||
<pre><code class="language-markup"><svg>
|
||||
<circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
|
||||
</svg>
|
||||
</code></pre>
|
||||
|
||||
<p>Well in this case I would recommend using the values of the first translation as <code>transform-origin</code> for your tween built with the <code>.fromTo()</code> method like so:</p>
|
||||
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
|
||||
KUTE.fromTo(element,
|
||||
{svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X & Y axis
|
||||
{svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
|
||||
{transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
|
||||
).start();
|
||||
</code></pre>
|
||||
<p>Before you hit the <kbd>Start</kbd> button, make sure to check the <code>transform</code> attribute value. The below tween will reset the element's transform attribute to original value when the animation is complete.</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgChained" class="example-box-model example-box" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
|
||||
<path class="bg-blue"
|
||||
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"
|
||||
transform="translate(256,256) rotate(45) scale(0.5) translate(-256,-256)"></path>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="chainedBtn" class="btn btn-lime" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.</p>
|
||||
|
||||
<h4>Recommendations for SVG Transforms</h4>
|
||||
<ul>
|
||||
<li>The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>,
|
||||
<code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.</li>
|
||||
<li>Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.</li>
|
||||
<li>Keep in mind the adjustments required for rotations, remember the <code>.getBBox()</code> method, it's really useful to set custom <code>transform-origin</code>.</li>
|
||||
<li>By default browsers use <code>overflow: hidden</code> for <code><svg></code> so child elements are partialy/completely hidden while animating. You might want to set <code>overflow: visible</code>
|
||||
or some browser specific tricks if that is the case.</li>
|
||||
<li>When using <code>viewBox="0 0 500 500"</code> attribute for <code><svg></code> and no <code>width</code> and/or <code>height</code> attribute(s), means that you expect the SVG to be scalable and most
|
||||
Internet Explorer versions simply don't work. You might want to <a href="https://css-tricks.com/scale-svg/" target="_blank">check this tutorial</a>.</li>
|
||||
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the
|
||||
<code>.to()</code> method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all
|
||||
the properties and I highly recommend checking the example code for skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
|
||||
<li>In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the <code>.fromTo()</code> method with all proper values.</li>
|
||||
<li>Also the <code class="bg-indigo">svgTransform</code> tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>SVG Plugin Tips</h3>
|
||||
<ul>
|
||||
<li>The SVG Plugin can be combined with the <a href="attr.html">Attributes Plugin</a> to enable even more advanced/complex animations for SVG elements.</li>
|
||||
<li>Since SVG morph scripting works only with <code>path</code> or <code>glyph</code> elements, you might need a <code>convertToPath</code> feature, so
|
||||
<a href="https://github.com/Waest/SVGPathConverter" target="_blank">check this out</a>.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- some stuff -->
|
||||
<script src="./src/kute-attr.min.js"></script>
|
||||
<!-- some stuff -->
|
||||
<script src="./src/kute-svg.min.js"></script>
|
||||
<!-- some stuff -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/svg.js"></script>
|
||||
<!-- css plugin stuff -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
356
demo/svgCubicMorph.html
Normal file
356
demo/svgCubicMorph.html
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The 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>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li class="active"><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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate SVG paths with <b>cubic-bezier</b> path commands and improved performance.</p>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Basic Example</h3>
|
||||
<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"><svg 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>
|
||||
</code></pre>
|
||||
|
||||
<p>Now we can apply both <code>.to()</code> and <code>fromTo()</code> methods:</p>
|
||||
|
||||
<pre><code class="language-javascript">// the fromTo() method
|
||||
var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
|
||||
// OR
|
||||
// the to() method will take the path's d attribute value and use it as start value
|
||||
var tween = KUTE.to('#rectangle', { path: '#star' }).start();
|
||||
// OR
|
||||
// simply pass in a valid path string without the need to have two paths in your SVG
|
||||
var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
|
||||
</code></pre>
|
||||
|
||||
<p>By default, the component will process the paths as authered 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>
|
||||
|
||||
<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>
|
||||
|
||||
<pre><code class="language-markup"><svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<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
|
||||
m116.118 79.156l-90.446 314.148c26.832 15.372 117.098 64.05 186.212 64.05 55.792 0 118.252-14.296 190.834-43.792l86.356-301.976c-58.632 18.922-114.876 28.52-167.464 28.52-95.95 0-163.114-31.098-205.492-60.95z
|
||||
m-235.526-222.28c77.118 0.798 134.152 30.208 181.416 60.502l92.752-317.344c-19.546-11.196-70.806-39.094-107.858-48.6-24.386-5.684-50.02-8.616-77.204-8.616-51.796 0.976-108.388 13.946-172.888 39.8l-88.44 310.596c64.808-24.436 120.644-36.34 172.086-36.34 0.046 0.002 0.136 0.002 0.136 0.002z
|
||||
m731.178-170.666c-58.814 22.832-116.208 34.466-171.028 34.466-91.686 0-159.292-31.802-203.094-62.366l-91.95 318.236c61.746 39.708 128.29 59.878 198.122 59.878 56.948 0 115.94-13.68 175.462-40.688l-0.182-2.222 3.734-0.886 88.936-306.418z"/>
|
||||
<path id="w2" d="M0 187.396l367.2-50.6v354.798h-367.2v-304.2z
|
||||
m0 649.2v-299.798h367.2v350.398z
|
||||
m407.6 56v-355.798h488.4v423.2z
|
||||
m0-761.2l488.4-67.4v427.6h-488.4v-360.2z"/>
|
||||
</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><path></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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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="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>So the technique involves creating <code><mask></code> elements, splitting multipath shapes into multiple <code><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>
|
||||
|
||||
<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 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>
|
||||
</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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/svgCubicMorph.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
166
demo/svgDraw.html
Normal file
166
demo/svgDraw.html
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The SVG Draw component for KUTE.js enables animation for the stroke-dasharray and stroke-dashoffset.">
|
||||
<meta name="keywords" content="svg draw,svg,stroke-dasharray,stroke-dashoffset,svg animation,kute,kute.js,animation,javascript animation,tweening engine,animation engine,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js SVG Draw</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">SVG Draw</h2>
|
||||
<p class="condensed lead">The component that animates the stroke of any <b>SVGElement</b> and updates the <i>style</i> attribute of the target.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the stroke for most <b>SVGElement</b> shapes, with a very easy to use coordinates system.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>SVG Draw</b> component enables animation for the <b>stroke-dasharray</b> and <b>stroke-dashoffset</b> properties via CSS style.</p>
|
||||
<p>The component uses the SVG standard <b>.getTotalLength()</b> method for <b><path></b> shapes, while for the other shapes it uses some helper methods to calculate the values
|
||||
required for animation.</p>
|
||||
<p>It can work with <b><path></b>, <b><glyph></b>, <b><circle></b>, <b><ellipse></b>, <b><rect></b>, <b><line></b>, <b><polyline></b> and <b><polygon></b>
|
||||
shapes. It uses a very simple to use coordinates system so you can set up animations right away.</p>
|
||||
<p>As you will see in the examples below, there is alot of flexibility in terms of input values.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<pre><code class="language-javascript">// draw the stroke from 0-10% to 90-100%
|
||||
var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
|
||||
|
||||
// draw the stroke from zero to full path length
|
||||
var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
|
||||
|
||||
// draw the stroke from full length to 50%
|
||||
var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>Based on the above sample code, let's see some animation going on:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg style="width:600px" class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2046 513">
|
||||
<path fill="none" style="stroke:#2196F3; stroke-width:20; stroke-dashoffset: -724.077px; stroke-dasharray: 0px, 1448.15px" id="drawSVG" d="M432 64l-240 240-112-112-80 80 192 192 320-320z"/>
|
||||
<circle fill="none" r="220" cx="780" cy="255" style="stroke:#4CAF50; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG1"/>
|
||||
<ellipse fill="none" rx="220" ry="100" cx="780" cy="255" style="stroke:#55c55a; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG11"/>
|
||||
<rect fill="none" width="430" height="430" x="1070" y="30" style="stroke:#FF5722; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG2"/>
|
||||
<polygon fill="none" points="1579,307 1623,117 1801,33 1978,117 2022,307 1899,460 1702,460 1579,307" style="stroke:#673AB7; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG3"/>
|
||||
</svg>
|
||||
<div class="example-buttons">
|
||||
<a id="drawBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Remember that the <code class="bg-indigo">draw</code> property also accepts absolute values, eg. <code>draw: '0 150'</code>; the <code>.to()</code> method takes <code>0% 100%</code>
|
||||
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>
|
||||
</ul>
|
||||
</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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/svgDraw.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
388
demo/svgMorph.html
Normal file
388
demo/svgMorph.html
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The SVG Morph component for KUTE.js enables animation for the d presentation attribute of path and glyph shapes.">
|
||||
<meta name="keywords" content="svg 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 Morph</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">SVG Morph</h2>
|
||||
<p class="condensed lead">The component that covers <i>SVG morphing</i>, an animation that's close to impossible with CSS3 transitions and not supported in some legacy browsers. It comes packed
|
||||
with tools and options to improve performance and visual presentation.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate SVG paths with <b>line-to</b> path commands, improve visual presentation and optimize performance on any device.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>SVG Morph</b> component enables animation for the <b>d</b> (description) presentation attribute and is one of the most important in all the
|
||||
SVG components.</p>
|
||||
<p>It only applies to inline <b><path></b> <b>SVGElement</b> shapes and requires that these shapes are closed (their <b>d</b> attribute ends with
|
||||
<b>Z</b> path command). On initialization or animation start, depending on the chosen KUTE.js method, it will
|
||||
<a href="http://phrogz.net/SVG/convert_path_to_polygon.xhtml" target="_blank">sample a number of points</a> along the two paths based on a default / given sample size and will
|
||||
create two arrays of coordinates we need for interpolation.</p>
|
||||
<p>This component was originally inspired by a <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">D3.js path morphing example</a> and now implements a set of
|
||||
<a href="https://github.com/d3/d3-polygon">D3 polygon</a> geometric operations and other functionalities from <a href="https://github.com/veltman/flubber">flubber</a> to
|
||||
produce the coordinates for a very consistent morphing animation.</p>
|
||||
<p>While in some cases you might be able to create SVG morphing animations via CSS3 <i>transition</i>, this component was developed to provide various solutions for working
|
||||
with complex shapes, bringing convenience, resources and clarity to one of the most complex types of animation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Options</h3>
|
||||
<p class="condensed text-right">The easy way to optimize morphing animation for every device in a single option.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The <b>SVG Morph</b> component comes with a simple option to optimize animation on every device. Previous versions used to have additional options required for processing,
|
||||
but now the component will handle all that for you thanks to the new code.</p>
|
||||
|
||||
<ul>
|
||||
<li><kbd>morphPrecision: <b class='text-olive'>Number</b></kbd> option allows you to set the sampling size of the shapes in pixels. The lesser value the better visual but the more power consumption
|
||||
and less performance. The default value is <b>10</b> but the processing functions will determine the best possible outcome depending on shapes' path commands.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Basic Example</h3>
|
||||
<p>The first morphing animation example is a transition from a rectangle into a star, the first path is the start shape and the second is the end shape; we can also add some ID to the
|
||||
paths so we can easily target them with our code.</p>
|
||||
|
||||
<pre><code class="language-markup"><svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
<path id="rectangle" 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>
|
||||
</code></pre>
|
||||
|
||||
<p>Now we can apply both <code>.to()</code> and <code>fromTo()</code> methods:</p>
|
||||
|
||||
<pre><code class="language-javascript">// the fromTo() method
|
||||
var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
|
||||
// OR
|
||||
// the to() method will take the path's d attribute value and use it as start value
|
||||
var tween = KUTE.to('#rectangle', { path: '#star' }).start();
|
||||
// OR
|
||||
// simply pass in a valid path string without the need to have two paths in your SVG
|
||||
var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
|
||||
</code></pre>
|
||||
|
||||
<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-red" 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>
|
||||
</div>
|
||||
|
||||
<p>That's it, let move on to the next example.</p>
|
||||
|
||||
<h3>Polygon Paths</h3>
|
||||
<p>When your paths are only <code>lineto</code>, <code>vertical-lineto</code> and <code>horizontal-lineto</code> based shapes (the <code>d</code> attribute consists of only <code>L</code>, <code>V</code> and
|
||||
<code>H</code> path commands), the <b>SVG Morph</b> component will work differently from previous versions, it will sample points as for any other non-polygon shapes. In this case you can set a higher
|
||||
<b>morphPrecision</b> value to optimize performance.</p>
|
||||
|
||||
<pre><code class="language-javascript">// let's morph a triangle into a star
|
||||
var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
|
||||
|
||||
// or same path into a square
|
||||
var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
|
||||
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
|
||||
|
||||
<path id="triangle" fill="#673AB7" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
|
||||
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
|
||||
|
||||
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
|
||||
<path id="cat" style="visibility:hidden" 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="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
|
||||
|
||||
<path id="star2" 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>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="morphBtn2" class="btn btn-green" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Did you catch the cat?</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 paths:</p>
|
||||
<pre><code class="language-markup"><svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<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
|
||||
m116.118 79.156l-90.446 314.148c26.832 15.372 117.098 64.05 186.212 64.05 55.792 0 118.252-14.296 190.834-43.792l86.356-301.976c-58.632 18.922-114.876 28.52-167.464 28.52-95.95 0-163.114-31.098-205.492-60.95z
|
||||
m-235.526-222.28c77.118 0.798 134.152 30.208 181.416 60.502l92.752-317.344c-19.546-11.196-70.806-39.094-107.858-48.6-24.386-5.684-50.02-8.616-77.204-8.616-51.796 0.976-108.388 13.946-172.888 39.8l-88.44 310.596c64.808-24.436 120.644-36.34 172.086-36.34 0.046 0.002 0.136 0.002 0.136 0.002z
|
||||
m731.178-170.666c-58.814 22.832-116.208 34.466-171.028 34.466-91.686 0-159.292-31.802-203.094-62.366l-91.95 318.236c61.746 39.708 128.29 59.878 198.122 59.878 56.948 0 115.94-13.68 175.462-40.688l-0.182-2.222 3.734-0.886 88.936-306.418z"/>
|
||||
<path id="w2" d="M0 187.396l367.2-50.6v354.798h-367.2v-304.2z
|
||||
m0 649.2v-299.798h367.2v350.398z
|
||||
m407.6 56v-355.798h488.4v423.2z
|
||||
m0-761.2l488.4-67.4v427.6h-488.4v-360.2z"/>
|
||||
</svg>
|
||||
</code></pre>
|
||||
<p>As you can see, both these paths have subpaths, and this component will only animate the first subpath from both paths. To animate them all there are a few easy steps required in preparation for
|
||||
the animation, so here's a quick guide:</p>
|
||||
<ol>
|
||||
<li>Use the <a href="https://codepen.io/thednp/pen/EgVqLw">convertToAbsolute</a> utility to convert path commands to absolute values. It's <b>important</b> to do this
|
||||
conversion first.</li>
|
||||
<li>Create a new <b><path></b> shape for each subpath string from <b>M</b> to <b>Z</b> path commands. See the sample code below.</li>
|
||||
<li>Give the new paths an <b>id="uniqueID"</b> attribute so you can target them easily. You could use relevant namespace to help you better understand positioning. EG: <b>id="square-top-left"</b>
|
||||
or <b>id="left-eye"</b></li>
|
||||
<li>In the browser console inspect with your mouse all paths from both starting and ending shapes and determine which shapes should morph to which. The idea is to produce a morphing animation
|
||||
where points from each shape travel the least possible distance, however this is where you can get creative, as shown in one of the examples below.</li>
|
||||
<li>If the number of the starting and ending shapes are not equal, you can consider either duplicating one of the subpath shapes close to it's corresponding subpath shape or creating a sample
|
||||
shape close to the corresponding subpath shape.</li>
|
||||
<li>Update the <b>id</b> attribute for all starting and ending shapes to match positions and make it easier to work with the tween objects.</li>
|
||||
<li>Optional: set a <b>fill</b> attribute for each new shape if you like, normally you coulnd't have done it with the original paths.</li>
|
||||
<li>Create your tween objects and get to animating and tweaking.</li>
|
||||
</ol>
|
||||
|
||||
<p>For our example here, this is the end result markup for the shapes to be used for morphing animation:</p>
|
||||
|
||||
<pre><code class="language-markup"><svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
|
||||
<path id="w11" 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" 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" 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" 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>
|
||||
</code></pre>
|
||||
|
||||
<p>The graphic on the left side of the below example is exactly for the above markup, no option needed out of the box nearly perfect animation, while the right side example showcases a different or
|
||||
perhaps more creative example of this morph animation:</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-example-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
|
||||
<path id="s11" 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="s12" 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="s13" 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="s14" 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="s21" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
|
||||
<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.175 256l-0.175-156.037 192-26.072v182.109z"/>
|
||||
<path id="s24" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
|
||||
</svg>
|
||||
<div class="example-buttons">
|
||||
<a id="multiMorphBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically. Perhaps in the future we could have dedicated AI powered APIs to train and
|
||||
program for this work, but until then, it's up to you to learn, observe, adapt and tweak in order to get the most out of this component.</p>
|
||||
|
||||
<h3>Intersecting Paths Example</h3>
|
||||
<p>The last morph example is a bit more complex as the paths have intersecting subpaths with different positions as well as different amounts of subpaths. In this case you can manually clone one or
|
||||
more subpaths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding ending shapes; at this point
|
||||
you should be just like in the previous examples.</p>
|
||||
|
||||
<p>You need to inspect the markup here in your browser console to get an idea on how the shapes have been arranged, we have used a <code><mask></code> where we included the subpaths of both start
|
||||
and end shape, just to get the same visual as the original paths.</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" id="multi-morph-example-2" 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,0"></path>
|
||||
</svg>
|
||||
<svg class="example-box-model example-box" id="multi-morph-example-3" 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="sample-shape" fill="#000" d="M250 450 L250 450"></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 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-left1" 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="mouth1" 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-container1" fill="#9C27B0" mask="url(#symbol1)" 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-container1" style="visibility: hidden;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0"></path>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="compliMorphBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The example on the left side showcases the cloning of one of the shapes to match the amount of starting and ending shapes, while the right side showcases
|
||||
using a sample shape, somewhere close to its corresponding end shape, a much better animation, but in the end, it's up to you and your need on preparing,
|
||||
analyzing as well as deciding on how to optimize these cases.</p>
|
||||
|
||||
|
||||
<h3>Notes</h3>
|
||||
<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>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>
|
||||
value you can use for any particular device and / or resolution.</li>
|
||||
<li>The animation performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared
|
||||
already and for the first method the processing of the two paths happens on tween start, thus delaying the animation, so keep that in mind when working with syncing multiple tweens, the <code>.to()</code>
|
||||
based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will
|
||||
be delayed.</li>
|
||||
<li>The <b>SVG Morph</b> component uses approximatelly the same algorithm as D3.js for determining the coordinates for interpolation, it might be a better solution for your applications.</li>
|
||||
<li>This component should ignore the <code>fill-rule="evenodd"</code> specific SVG attribute, but you can make sure you check your shapes in that regard as well.</li>
|
||||
<li>This component is bundled with the standard <i>kute.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>© 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/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/svgMorph.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
390
demo/svgTransform.html
Normal file
390
demo/svgTransform.html
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The SVG Transform component for KUTE.js enables animation for the transform presentation attribute.">
|
||||
<meta name="keywords" content="svg transform,cross-browser svg transform,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 Transform</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">SVG Transform</h2>
|
||||
<p class="condensed lead">The component that covers <i>transform</i> animation on <b>SVGElement</b> targets, solves browser inconsistencies and provides a similar visual presentation as
|
||||
with other transform based components on non-<b>SVGElements</b> targets.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate 2D transform functions on SVG elements on any SVG enabled browser.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>SVG Transform</b> component enables animation for the <b>transform</b> presentation attribute on any <b>SVGElement</b> target.</p>
|
||||
<p>The <b>SVG Transform</b> is an important part of the SVG components for some reasons:</p>
|
||||
<ul>
|
||||
<li>It was developed to solve most browser inconsistencies of the time for transform animation. Nowadays modern browsers are Chromium browsers that work with regular 2D
|
||||
transform functions.</li>
|
||||
<li>The unique way to normalize translation to produce the kind of animation that is just as consistent as for CSS3 transforms on non-<b>SVGElement</b> targets.</li>
|
||||
<li>The value processing is consistent with the current <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">W3 draft</a>.</li>
|
||||
</ul>
|
||||
<p>Keep in mind that the <b>transform</b> attribute accepts no measurement units such as degrees or pixels, but it expects rotation / skew angles to be in degrees, and
|
||||
translations in lengths measured around the parent <b><svg></b> element viewBox attribute.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Options</h3>
|
||||
<p class="condensed text-right">Keep everything under control and handle any situation with a single option.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The only component that keeps the <b>transformOrigin</b> option because it's required to compute transform functions in the SVG
|
||||
cooordinates system.</p>
|
||||
|
||||
<ul>
|
||||
<li><kbd>transformOrigin: <b class='text-olive'>['50%','50%']</b></kbd> sets the much needed origin. Eg: <b>transformOrigin:[50,50]</b>. The default
|
||||
value is <b>50% 50%</b> of the target element box, which is contrary with the SVG draft.</li>
|
||||
</ul>
|
||||
|
||||
<p>Keep in mind that the component will disregard the current SVG default origin of <i>0px 0px</i> of the target's parent, even if the browsers' default
|
||||
<b>transformOrigin</b> have been normalized over the years.</p>
|
||||
|
||||
<p>The <b>transformOrigin</b> tween option can also be used to set coordinates of a parent <b><svg></b> element (in the second example below).
|
||||
Values like <i>top left</i> values are also accepted, but will take the target element's box as a reference, not the parent's box.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>2D Transform</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">translate</kbd> function applies horizontal and / or vertical translation. EG. <code>translate:150</code> to translate a shape 150px to the right or
|
||||
<code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">rotate</kbd> function applies rotation to a shape on the Z axis. Eg. <code>rotate:150</code> will rotate a shape clockwise by 150 degrees around it's own center or around
|
||||
the <code>transformOrigin: '450 450'</code> set tween option coordinate of the parent element. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">skewX</kbd> function used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">skewY</kbd> function used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-olive">scale</kbd> function used to apply a single value size transformation. Eg. <code>scale:0.5</code> will scale a shape to half of it's initial size. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-red">matrix</kbd> function is not supported, but the Transform Matrix covers you there, if you'll read below.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>As explained with the <a href="transformMatrix.html">Transform Matrix</a> component, the <b>DOMMatrix</b> API will replace <b>webkitCSSMatrix</b> and <b>SVGMatrix</b> and on this page we intend to put
|
||||
the two components head to head, the elements on the left will be using <b>Transform Matrix</b> component and equivalent 2D transform functions, while the elements on the right will be using 2D functions of
|
||||
the <b>SVG Transform</b> component.</p>
|
||||
|
||||
<p>The <b>SVG Transform</b> component comes with a reliable set of scripts that work on all browsers, making use of the <b>SVGMatrix</b> API for some origin calculation, the <code>transform</code> presentation
|
||||
attribute and the <code class="bg-indigo">svgTransform</code> tween property with a familiar and very easy notation:</p>
|
||||
|
||||
<pre><code class="language-javascript">// using the svgTransform property works in all SVG enabled browsers
|
||||
var tween2 = KUTE.to(
|
||||
'shape', // target
|
||||
{ // to
|
||||
svgTransform: {
|
||||
translate: [150,100],
|
||||
rotate: 45,
|
||||
skewX: 15, skewY: 20,
|
||||
scale: 1.5
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// transformMatrix can animate SVGElement targets on modern browsers
|
||||
// requires adding styling like `transform-origin:50% 50%` to the target element
|
||||
var tween1 = KUTE.to(
|
||||
'shape', // target
|
||||
{ // to
|
||||
transform: {
|
||||
translate3d: [150,100,0],
|
||||
rotate3d: [0,0,45],
|
||||
skew: [15,20],
|
||||
scale3d: [1.5,1.5,1]
|
||||
}
|
||||
}
|
||||
);
|
||||
</code></pre>
|
||||
|
||||
<p>Let's see some examples and explain each case.</p>
|
||||
|
||||
|
||||
<h4>SVG Rotation</h4>
|
||||
<p>Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. The <code class="bg-indigo">svgTransform</code> will only accept single value
|
||||
for the angle value <code>rotate: 45</code>, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a <code>transformOrigin</code>
|
||||
tween option to override the behavior.</p>
|
||||
<p>The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department.
|
||||
Let's have a look at a quick demo:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg id="svgRotate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-olive" style="transform-origin: 25% 50%;" 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 class="bg-blue" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="rotateBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>For the first element, the Transform Matrix creates the rotation animation via <code>rotate3d[0,0,360]</code> tween property around the element center coordinate, as we've set <i>transform-origin:25% 50%</i>
|
||||
to the element's style; this animation doesn't work in IE browsers, while in older versions Firefox the animation is inconsistent. The second element uses the <code>rotate: 360</code> function of the SVG Transform
|
||||
component and the rotation animation is around the element's own central point without any option, an animation that DO WORK in all SVG enabled browsers.</p>
|
||||
|
||||
<p>When for non-SVG elements' transform we could have used values such as <i>center bottom</i> as <code>transformOrigin</code> (also not supported in all modern browsers for SVGs), the entire processing falls
|
||||
to the browser, however when it comes to SVGs our component here will compute the <code>transformOrigin</code> tween option value accordingly to use the shape's <code>.getBBox()</code> value to determine
|
||||
for instance the coordinates for <i>25% 75%</i> position or <i>center top</i>.</p>
|
||||
|
||||
<p>In other cases you may want to rotate shapes around the center point of the parent <code><svg></code> or <code><g></code> element, and we use it's <code>.getBBox()</code> to determine the <i>50% 50%</i>
|
||||
coordinate, so here's how to deal with it:</p>
|
||||
|
||||
<pre><code class="language-javascript">// rotate around parent svg's "50% 50%" coordinate as transform-origin
|
||||
// get the bounding box of the parent element
|
||||
var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent <svg> element
|
||||
|
||||
// we need to know the current translate position of the element [x,y]
|
||||
// in our case is:
|
||||
var translation = [580,0];
|
||||
|
||||
// determine the X point of transform-origin for 50%
|
||||
var OriginX = svgBB.width * 50 / 100 - translation[0];
|
||||
|
||||
// determine the Y point of transform-origin for 50%
|
||||
var OriginY = svgBB.height * 50 / 100 - translation[1];
|
||||
|
||||
// set your rotation tween with "50% 50%" transform-origin of the parent <svg> element
|
||||
var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformOrigin: [OriginX, OriginY]} );
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg id="svgRotate1" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-olive" style="transform-origin: 50% 50%;" 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 class="bg-blue" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="rotateBtn1" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Same as the above example, the first element is rotated by the <b>Transform Matrix</b> component and is using <i>transform-origin: 50% 50%;</i> styling, while the second element is rotated by the <b>SVG Transform</b>
|
||||
component with the above calculated transform-origin.</p>
|
||||
|
||||
<h4>SVG Translation</h4>
|
||||
<p>In this example we'll have a look at translations, so when setting <code>translate: [150,0]</code>, the first value is X (horizontal) coordinate to which the shape will translate to and the second value is
|
||||
Y (vertical) coordinate for translation. When <code>translate: 150</code> notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements
|
||||
transformation. Let's have a look at a quick demo:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<svg id="svgTranslate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-green" style="transform-origin: 25% 50%;" 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 class="bg-orange" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="translateBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The first element uses the Transform Matrix <code>translate3d: [580,0,0]</code> function, while the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value.
|
||||
For the second example the values are unitless and are relative to the <code>viewBox</code> attribute.</p>
|
||||
|
||||
<h4>SVG Skew</h4>
|
||||
<p>For skews we have: <code>skewX: 25</code> or <code>skewY: -25</code> as SVGs don't support the <code>skew: [X,Y]</code> function. Here's a quick demo:</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgSkew" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-yellow" style="transform-origin: 25% 50%;" 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 class="bg-indigo" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="skewBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The first tween skews the shape on both X and Y axes in a chain via Transform Matrix <code>skew:[-15,-15]</code> function and the second tween skews the shape on X and Y axes via the <code class="bg-indigo">svgTransform</code> functions <code>skewX:15</code> and
|
||||
<code>skewY:15</code> tween properties. You will notice translation kicking in to set the transform origin.</p>
|
||||
|
||||
<h4>SVG Scaling</h4>
|
||||
<p>Another transform example for SVGs is the scale. Unlike translations, for scale animation the component only accepts single value like <code>scale: 1.5</code>, for both X (horizontal) axis and Y (vertical) axis,
|
||||
to keep it simple and even if SVGs do support <code>scale(X,Y)</code>. But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to
|
||||
make the animation look as we would expect. A quick demo:</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgScale" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
|
||||
<path class="bg-lime" style="transform-origin: 25% 50%;" 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 class="bg-olive" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="scaleBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The first tween scales the shape at <code>scale: 1.5</code> via <b>Transform Matrix</b> component and it's <code>scale3d:[1.5,1.5,1]</code> function, and the second tween scales down the shape at <code>scale: 0.5</code>
|
||||
value via <code class="bg-indigo">svgTransform</code>. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep <code>transform-origin</code> at an expected
|
||||
<i>50% 50%</i> of the shape box. A similar case as with the skews.</p>
|
||||
|
||||
<h4>Mixed SVG Transform Functions</h4>
|
||||
<p>Our last transform example for SVG Transform is the mixed transformation. Just like for the other examples the component will try to adjust the rotation <code>transform-origin</code> to make it look as you would expect it
|
||||
from regular HTML elements. Let's combine 3 functions at the same time and see what happens:</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgMixed" class="example-box-model example-box" style="width: 320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
|
||||
<path class="bg-green" style="transform-origin: 25% 50%;" 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 class="bg-indigo" transform="translate(580)" 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>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="mixedBtn" class="btn btn-teal" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Both shapes are scaled at <code>scale: 1.5</code>, translated to <code>translate: 250</code> and skewed at <code>skewX: -15</code>. If you inspect the elements, you will notice the second shape's translation is
|
||||
different from what we've set in the tween object, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. This means that the component will also compensate rotation transform origin
|
||||
when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.</p>
|
||||
|
||||
<h4>Chained SVG Transform</h4>
|
||||
<p>The <b>SVG Transform</b> does not work with SVG specific chained transform functions right away (do not confuse with tween chain), Ana Tudor explains best <a href="https://css-tricks.com/transforms-on-svg-elements/">here</a>,
|
||||
but if your SVG elements only use this feature to set a custom <code>transform-origin</code>, it should look like this:</p>
|
||||
|
||||
<pre><code class="language-markup"><svg>
|
||||
<circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
|
||||
</svg>
|
||||
</code></pre>
|
||||
|
||||
<p>In this case I would recommend using the values of the first translation as <code>transformOrigin</code> for your tween built with the <code>.fromTo()</code> method like so:</p>
|
||||
|
||||
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
|
||||
KUTE.fromTo(element,
|
||||
{svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X & Y axis
|
||||
{svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
|
||||
{transformOrigin: [150,150]} // tween options use the transform-origin of the target SVG element
|
||||
).start();
|
||||
</code></pre>
|
||||
|
||||
<p>Before you hit the <kbd>Start</kbd> button, make sure to check the <code>transform</code> attribute value. The below tween will reset the element's transform attribute to original value when the animation is complete.</p>
|
||||
<div class="featurettes">
|
||||
<svg id="svgChained" class="example-box-model example-box" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
|
||||
<path class="bg-blue"
|
||||
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"
|
||||
transform="translate(256,256) rotate(45) scale(0.5) translate(-256,-256)"></path>
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="chainedBtn" class="btn btn-lime" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.</p>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The <b>SVG Transform</b> component is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>,
|
||||
<code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.</li>
|
||||
<li>Keep in mind that the SVG transform functionss will use the center of a shape as transform origin by default, contrary to the SVG draft.</li>
|
||||
<li>Keep in mind the adjustments required for rotations, remember the <code>.getBBox()</code> method, it's really useful to set custom <code>transform-origin</code>.</li>
|
||||
<li>By default browsers use <code>overflow: hidden</code> for <code><svg></code> so child elements are partialy/completely hidden while animating. You might want to set <code>overflow: visible</code>
|
||||
or some browser specific tricks if that is the case.</li>
|
||||
<li>When using <code>viewBox="0 0 500 500"</code> attribute for <code><svg></code> and no <code>width</code> and/or <code>height</code> attribute(s), means that you expect the SVG to be scalable and most
|
||||
Internet Explorer versions simply don't work. You might want to <a href="https://css-tricks.com/scale-svg/" target="_blank">check this tutorial</a>.</li>
|
||||
<li>In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the <code>.fromTo()</code> method with all proper values.</li>
|
||||
<li>Also the <code class="bg-indigo">svgTransform</code> tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.</li>
|
||||
<li>The <b>SVG Transform</b> component cannot work with the <code>transformOrigin</code> set to an <b>SVGElement</b> via CSS, you must always use a it's specific option.</li>
|
||||
<li>The component can be combined with the <a href="htmlAttributes.html">HTML Attributes</a> component to enable even more advanced/complex animations for SVG elements.</li>
|
||||
<li>Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below <a href="http://caniuse.com/#search=svg" target="_blank">do not support inline SVG</a>
|
||||
so make sure to fiter your SVG tweens properly.</li>
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
|
||||
</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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/svgTransform.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
195
demo/text.html
195
demo/text.html
|
|
@ -1,195 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
||||
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
||||
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
||||
|
||||
<!--[if gte IE 10 | !IE ]><!-->
|
||||
<html lang="en">
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 Text Plugin for KUTE.js enables string manipulation.">
|
||||
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,text plugin,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
||||
<!-- TO DO -->
|
||||
|
||||
<title>KUTE.js Text Plugin | 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">
|
||||
|
||||
<!-- Ion Icons -->
|
||||
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<!-- Polyfill -->
|
||||
<script src="./assets/js/minifill.js">
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- legacy browsers support via polyfill, you must remove the above when used
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
||||
<style>
|
||||
.text-example {
|
||||
margin: 0 0 20px;
|
||||
font-size: 28px
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="features.html">Feature Overview</a></li>
|
||||
<li><a href="properties.html">Supported Properties</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group active">
|
||||
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="examples.html">Core Engine</a></li>
|
||||
<li><a href="css.html">CSS Plugin </a></li>
|
||||
<li><a href="svg.html">SVG Plugin </a></li>
|
||||
<li class="active"><a href="text.html">Text Plugin </a></li>
|
||||
<li><a href="attr.html">Attributes Plugin </a></li>
|
||||
<li><a href="progress.html">Tween Progress </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="btn-group">
|
||||
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="start.html">Getting Started</a></li>
|
||||
<li><a href="api.html">Public Methods</a></li>
|
||||
<li><a href="options.html">Tween Options</a></li>
|
||||
<li><a href="easing.html">Easing Functions</a></li>
|
||||
<li><a href="extend.html">Extend Guide</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2>Text Plugin</h2>
|
||||
<p>The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by
|
||||
character with a very cool effect.</p>
|
||||
|
||||
<pre><code class="language-javascript">// basic synthax for number increments
|
||||
var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
|
||||
|
||||
// OR text writing character by character
|
||||
var myTextTween = KUTE.to('selector', {text: 'A text string with other <span>substring</span> should do.'});
|
||||
</code></pre>
|
||||
|
||||
<p>The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is
|
||||
advised. With other words, try to limit the number of simultaneus text animations.</p>
|
||||
|
||||
<h3>Number Incrementing/Decreasing</h3>
|
||||
<p>In the first example, let's animate a number, approximatelly as written above:</p>
|
||||
<div class="featurettes">
|
||||
<p class="text-example">Total number of lines: <span id="numText">0</span></p>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="numBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The button action will toggle the <code>valuesEnd</code> value for the <code>number</code> property, because tweening a number to itself would produce no effect.</p>
|
||||
|
||||
<h3>Writing Text</h3>
|
||||
<p>This feature come with a additional tween option called <kbd>textChars</kbd> for the scrambling text character:</p>
|
||||
<ul>
|
||||
<li><code>alpha</code> use lowercase alphabetical characters, the default value</li>
|
||||
<li><code>upper</code> use UPPERCASE alphabetical characters</li>
|
||||
<li><code>numeric</code> use numerical characters</li>
|
||||
<li><code>symbols</code> use symbols such as #, $, %, etc.</li>
|
||||
<li><code>all</code> use all alpha numeric and symbols.</li>
|
||||
<li><code>YOUR CUSTOM STRING</code> use your own custom characters; eg: <code>'KUTE.JS IS #AWESOME'</code>.</li>
|
||||
</ul>
|
||||
<div class="featurettes">
|
||||
<p class="text-example" id="headText">Click the Start button on the right.</p>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="headBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Keep in mind that the <code>yoyo</code> feature will NOT un-write / delete character by character the string, but will write the previous text instead.</p>
|
||||
|
||||
<h3>Combining Both</h3>
|
||||
<div class="featurettes">
|
||||
<div class="columns">
|
||||
<div class="col2" style="width: 80px">
|
||||
<p class="text-example" id="comNum">0</p>
|
||||
</div>
|
||||
<div class="col2" style="text-align: left">
|
||||
<p class="text-example" id="comText">Clicks so far?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-buttons">
|
||||
<a id="comBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>In this example we've used the <code>textChars</code> option with <code>symbols</code> and <code>all</code> values respectively, but combining the two text properties and some other KUTE.js
|
||||
features can really spice up some content. Have fun!</p>
|
||||
|
||||
<ul id="share" class="nav">
|
||||
<li>Share </li>
|
||||
<li class="hidden-xs"><a 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"><span class="ion-social-facebook-outline icon"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=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"><span class="icon ion-social-twitter-outline"></span></a></li>
|
||||
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="content-wrap">
|
||||
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
||||
<p>© 2007 - 2019 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.site-wrapper -->
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
|
||||
<!-- highlighter -->
|
||||
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
||||
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<!-- KUTE.js core -->
|
||||
<script src="./src/kute-text.min.js"></script>
|
||||
<!-- KUTE.js Text Plugin -->
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<!-- global scripts stuff -->
|
||||
<script src="./assets/js/text.js"></script>
|
||||
<!-- css plugin examples -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
159
demo/textProperties.html
Normal file
159
demo/textProperties.html
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Text Properties component for KUTE.js allows you to animate CSS properties related to typography on most browsers.">
|
||||
<meta name="keywords" content="text properties,font-size,line-height,letter-spacing,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Text Properties</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li><a href="colorProperties.html">Color Properties</a></li>
|
||||
<li><a href="boxModel.html">Box Model</a></li>
|
||||
<li><a href="clipProperty.html">Clip Property</a></li>
|
||||
<li><a href="backgroundPosition.html">Background Position</a></li>
|
||||
<li class="active"><a href="textProperties.html">Text Properties</a></li>
|
||||
<li><a href="opacityProperty.html">Opacity Property</a></li>
|
||||
<li><a href="scrollProperty.html">Scroll Property</a></li>
|
||||
<li><a href="textWrite.html">Text Write</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
|
||||
</ul>
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2 class="head-title">Text Properties</h2>
|
||||
<p class="condensed lead">The component that animates the typographic CSS properties of a target content <b>Element</b> on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Animate the text size or spacing properties of a target text element.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="condensed lead">The KUTE.js <b>Text Properties</b> component enables animation for typography related CSS properties of content element targets
|
||||
on most browsers.</p>
|
||||
<p>This small and simple component can be used to create various attention seekers for any content elements such as <b>HTMLHeadingElement</b>,
|
||||
<b>HTMLParagraphElement</b>, <b>HTMLUListElement</b> or any other, as well as for entire content blocks.</p>
|
||||
<p>You can either animate an entire string or content block or split your string into words or letters and create a simple animation with one or more of
|
||||
the following properties:</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>Supported Properties</h3>
|
||||
|
||||
<ul>
|
||||
<li><kbd class="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a target element.</li>
|
||||
<li><kbd class="bg-olive">lineHeight</kbd> allows you to animate the <code>line-height</code> for a target element.</li>
|
||||
<li><kbd class="bg-olive">letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a target element.</li>
|
||||
<li><kbd class="bg-olive">wordSpacing</kbd> allows you to animate the <code>word-spacing</code> for a target element.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Example</h3>
|
||||
|
||||
<pre><code class="language-javascript">let tween1 = KUTE.to('selector1',{fontSize:'200%'})
|
||||
let tween2 = KUTE.to('selector1',{lineHeight:24})
|
||||
let tween3 = KUTE.to('selector1',{letterSpacing:50})
|
||||
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>
|
||||
</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>
|
||||
|
||||
</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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/textProperties.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
275
demo/textWrite.html
Normal file
275
demo/textWrite.html
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Text Write component for KUTE.js enables animation via string manipulation.">
|
||||
<meta name="keywords" content="text write,number increase,number,number decrease,kute,kute.js,animation,javascript animation,tweening engine,animation engine,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js TextWrite</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.text-example {
|
||||
margin: 0 0 20px;
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li><a href="transformMatrix.html">Transform Matrix</a></li>
|
||||
<li><a href="svgTransform.html">SVG Transform</a></li>
|
||||
<li><a href="svgMorph.html">SVG Morph</a></li>
|
||||
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
||||
<li><a href="svgDraw.html">SVG Draw</a></li>
|
||||
<li><a href="filterEffects.html">Filter Effects</a></li>
|
||||
<li><a href="borderRadius.html">Border Radius</a></li>
|
||||
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
||||
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
||||
<li><a href="colorProperties.html">Color Properties</a></li>
|
||||
<li><a href="boxModel.html">Box Model</a></li>
|
||||
<li><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 class="active"><a href="textWrite.html">Text Write</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
|
||||
</ul>
|
||||
<ul id="share">
|
||||
<li>
|
||||
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<h2 class="head-title">Text Write</h2>
|
||||
<p class="condensed lead">The component that enables a unique animation by manipulating the string content of <b>Element</b> targets on most browsers.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns float-left margin-bottom">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">Manipulate string contents with ease.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Text Write</b> component enables animation for content <b>Element</b> targets by manipulating their string contents.</p>
|
||||
<p><b>The component provides two properties:</b></p>
|
||||
<ul>
|
||||
<li><b>number: NUMBER</b> - interpolate the string numbers by increasing or decreasing their values</li>
|
||||
<li><b>text: STRING</b> - will add/remove a content string one character at a time</li>
|
||||
</ul>
|
||||
<p>This <b>text</b> property comes with an additional tween option called <b>textChars</b> for the scrambling text character, with the following expected values:</p>
|
||||
<ul>
|
||||
<li><b>alpha</b> use lowercase alphabetical characters, the default value</li>
|
||||
<li><b>upper</b> use UPPERCASE alphabetical characters</li>
|
||||
<li><b>numeric</b> use numerical characters</li>
|
||||
<li><b>symbols</b> use symbols such as #, $, %, etc.</li>
|
||||
<li><b>all</b> use all alpha numeric and symbols.</li>
|
||||
<li><b>YOUR CUSTOM STRING</b> use your own custom characters; eg: <b>'KUTE.JS IS #AWESOME'</b>.</li>
|
||||
</ul>
|
||||
<p>It's always best to wrap your target number in a <b><span id="uniqueID"></b> for the <b>number</b> property and content targets should be split into
|
||||
multiple parts for the <b>text</b> property if the target has child contents, as we will see in the examples below.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h2>Examples</h2>
|
||||
|
||||
<p>The effect of these two properties is very popular, so let's go through some quick examples to explain the workflow for the best possible outcome. We will try to focus
|
||||
on the <b>text</b> property a bit more because we can optimize the content targets for a great visual experience.</p>
|
||||
|
||||
<h3>Number Property</h3>
|
||||
<p>As discussed above, the target number need to be wrapped in a tag of choice with a unique ID so we can target it.</p>
|
||||
|
||||
<pre><code class="language-markup">// the target number is wrapped in a <span> tag with a unique ID
|
||||
<p class="text-example">Total number of lines: <span id="myNumber">0</span></p>
|
||||
</code></pre>
|
||||
|
||||
<pre><code class="language-javascript">// sample tween object with "number" property
|
||||
// this assumes it will start from current number which is different from 1550
|
||||
var myNumberTween = KUTE.to('#myNumber', {number: 1550});
|
||||
</code></pre>
|
||||
|
||||
<p>The above should work like this:</p>
|
||||
<div class="featurettes">
|
||||
<p class="text-example">Total number of lines: <span id="numText">0</span></p>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a id="numBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The button action will toggle the <code>valuesEnd</code> value for the <code>number</code> property, because tweening a number to itself would produce no effect.</p>
|
||||
|
||||
<h3>Text Property</h3>
|
||||
<p>Let's try a quick example and analyze the current outcome. Be aware that the example involves using child contents for the values, which is something we need to
|
||||
handle in a special way to optimize the visual experience.</p>
|
||||
|
||||
<pre><code class="language-javascript">// sample tween object with "text" property
|
||||
var myTextTween = KUTE.to('selector', {text: 'A text string with <span>child content</span> should do.'});
|
||||
</code></pre>
|
||||
|
||||
<div class="featurettes">
|
||||
<p class="text-example" id="headText">Click the <strong>Start</strong> button on the right.</p>
|
||||
<div class="example-buttons">
|
||||
<a id="headBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>So targets with child elements don't animate very well it seems. We could probably split the starting content and end content into multiple parts, set a tween object
|
||||
for each parth with delays and other settings, but <b>Text Write</b> component comes with a powerful utility you can use to ease your work in these instances.</p>
|
||||
<p>The <b>createTextTweens()</b> utility will do it all for you: split text strings, set tween objects, but let's see some sample code:</p>
|
||||
|
||||
<pre><code class="language-javascript">// grab the parent of the content segments
|
||||
var textTarget = document.getElementById('textExample');
|
||||
|
||||
// make a reversed array with its child contents
|
||||
var tweenObjects = KUTE.Util.createTextTweens(
|
||||
textTarget,
|
||||
'This text has a <a href="index.html">link to homepage</a> inside.',
|
||||
options
|
||||
);
|
||||
|
||||
// start whenever you want
|
||||
tweenObjects.start();
|
||||
</code></pre>
|
||||
|
||||
<p>Now let's see how we doin:</p>
|
||||
|
||||
<div class="featurettes">
|
||||
<p class="text-example" id="textExample">Click the <strong>Start</strong> button on the right.</p>
|
||||
<div class="example-buttons">
|
||||
<a id="textExampleBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>There are some <b>considerations</b> for the <b>createTextTweens(target,newText,options)</b> utility:</p>
|
||||
<ul>
|
||||
<li>The utility will replace the target content with <b><span></b> parts or the children's <b>tagName</b>s, then for the <b>newText</b> content will
|
||||
create similar parts but empty. Also the number of the parts of the target content doesn't have to be the same as for the new content.</li>
|
||||
<li>The utility returns an <b>Array</b> of tween objects, which is similar but independent from <a href="tweenCollection.html">tweenCollection</a> objects.</li>
|
||||
<li>The returned <b>Array</b> itself has a <b>start()</b> "method" you can call on all the tweens inside.</li>
|
||||
<li>The utility will assign <b>playing: <i>boolean</i></b> property to the target content <b>Element</b> to prevent unwanted animation interruptions or glitches.</li>
|
||||
<li>While you can set various tween options like <b>easing</b>, <b>duration</b> or the component specific <b>textChars</b> option, the <b>delay</b> option is handled
|
||||
by the utility automatically.</li>
|
||||
<li>The utility has a special handling for the <b>duration</b> tween option. You can either set a fixed duration like <b>1000</b>, which isn't recommended, or <b>auto</b>
|
||||
which will allow the utility the ability to determine a duration for each text part</li>
|
||||
<li>When the animation of the last text part is complete, the target content <b>Element</b>.innerHTML will be set to the original un-split <b>newText</b>.</li>
|
||||
<li>Using <b>yoyo</b> tween option is not recommended because it doesn't produce a desirable effect.</li>
|
||||
<li>The utility will not work properly with targets that have a deeper structure than level 1, which means that for instance
|
||||
<i><span>Text <span>sample</span></span></i> may not be processed properly.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Combining Both</h3>
|
||||
<div class="featurettes">
|
||||
<div class="columns">
|
||||
<div class="col">
|
||||
<p class="text-example" id="comNum">0</p>
|
||||
</div>
|
||||
<div class="col9" style="text-align: left">
|
||||
<p class="text-example" id="comText">Clicks so far</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-buttons">
|
||||
<a id="comBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>In this example we've used the <code>textChars</code> option with <code>symbols</code> and <code>all</code> values respectively, but combining the two text properties and some other KUTE.js
|
||||
features can really spice up some content. Have fun!</p>
|
||||
|
||||
<h2>Notes</h2>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<!-- 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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/textWrite.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
297
demo/transformFunctions.html
Normal file
297
demo/transformFunctions.html
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The Transform Functions component for KUTE.js enable regular transform animations.">
|
||||
<meta name="keywords" content="css3 transform,transform functions,transform,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Transform Functions</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">Transform Functions</h2>
|
||||
<p class="condensed lead">The component covers most important 2D and 3D <i>transform</i> functions as described in the <a href="http://www.w3.org/TR/css3-transforms/" target="_blank">W3 specification</a>,
|
||||
completelly reworked for improved performance and faster value processing.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<div class="columns">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">The component to cover animation for most <b>transform</b> functions with improved performance and faster value processing.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Transform Functions</b> enables animation for the CSS3 <b>transform</b> style on <b>Element</b> targets on most modern browsers and specific legacy browsers.</p>
|
||||
<p>Starting with KUTE.js version 2.0, you can set the <b>perspective</b> function as a tween property, while you can still rely on a parent's perspective but for less performance.</p>
|
||||
<p>All the previous perspective related options have been removed. The <b>transform</b> CSS3 property itself no longer uses preffixes like <b>webkit</b>, <b>moz</b> or <b>ms</b> since all major
|
||||
browsers are standardized.</p>
|
||||
<p>In comparison with previous versions, the component expects that input values are already <b>px</b> and <b>deg</b> based and no longer transforms <b>%</b> percent based values into <b>px</b> based or <b>rad</b>
|
||||
based angles into <b>deg</b> based. This makes the execution faster and more consistent.</p>
|
||||
<p>The component will stack all transform functions for translations, rotations and skews to shorthand functions to optimize performance and minimize value processing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>3D Transform</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">perspective</kbd> function creates a 3D perspective for a target element transformation. EG. <code>perspective:400</code> to apply a 400px perspective. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">translateX</kbd> function is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">translateY</kbd> function is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">translateZ</kbd> function is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px away from the viewer, making it
|
||||
appear smaller. This function can be combined with the <code>perspective</code> function to take effect or the parent's perspective; the smaller perspective value, the deeper translation. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">translate3d</kbd> function is for movement on all axes in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px
|
||||
to the bottom and 150px closer to the viewer, making it larger. When third value is used, it requires using a <code>perspective</code>. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotateX</kbd> function rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Requires perspective.
|
||||
<kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotateY</kbd> function rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees.
|
||||
Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotateZ</kbd> function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by 150 degrees on X axis.
|
||||
<kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotate3d</kbd> is a <b>tween property</b>, which combines the above <code>rotateX</code>, <code>rotateY</code>, and <code>rotateZ</code> functions and rotates an element on all axes. Obviously this is NOT
|
||||
equivalent with the <code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> shorthand function, this is only an optimization implemented for performance reasons and hopefully for your convenience.
|
||||
Eg. <code>rotate3d:[-150,80,90]</code> will rotate an element counter-clockwise by 150 degrees on X axis, 80 degrees on Y axis and 90 degrees on Z axis. The X and Y axis require a <code>perspective</code>.
|
||||
<kbd class="bg-lime">IE10+</kbd></li>
|
||||
<li><kbd class="bg-red">matrix3d</kbd> and <kbd class="bg-red">scale3d</kbd> functions are not supported by this component, but they are implemented in the <a href="transformMatrix.html">transformMatrix</a> component.</li>
|
||||
</ul>
|
||||
|
||||
<h3>2D Transform</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-blue">translate</kbd> function is for movement on X and Y axis. EG. <code>translate:[-150,200]</code> to translate an element 150px to the left, 200px to the bottom. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">rotate</kbd> function rotates an element on the Z axis. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">skewX</kbd> function will apply a shear on X axis to a target element. Eg. <code>skewX:50</code> will skew a target element on X axis by 50 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">skewY</kbd> function will apply a shear on X axis to a target element. Eg. <code>skewX:50</code> will skew a target element on X axis by 50 degrees. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">skew</kbd> function will apply a shear on both X and Y axes to a target element. Eg. <code>skew:[50,50]</code> will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.
|
||||
<kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-blue">scale</kbd> function will scale a target element on all axes. Eg. <code>scale:1.5</code> will scale up a target element by 50%. <kbd class="bg-lime">IE9+</kbd></li>
|
||||
<li><kbd class="bg-red">matrix</kbd> is not supported by this component, but is implemented in the <a href="transformMatrix.html">transformMatrix</a> component.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Translations</h3>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:250}); // or translate:[x,y] for both axes
|
||||
var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:-250});
|
||||
var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,250,0]});
|
||||
var tween4 = KUTE.fromTo('selector4',{perspective:400,translateY:0},{perspective:200,translateY:-100});
|
||||
</code></pre>
|
||||
|
||||
<div id="translate-examples" class="featurettes">
|
||||
<div class="example-item example-box bg-indigo">2D</div>
|
||||
<div class="example-item example-box bg-olive">X</div>
|
||||
<div class="example-item example-box bg-pink">Y</div>
|
||||
<div class="example-item example-box bg-red">Z</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>As you can see in your browsers console, for all animations <code>translate3d</code> is used, as explained above. Also the first example that's using the 2D <code>translate</code> for both vertical
|
||||
and horizontal axis even if we only set X axis.</p>
|
||||
|
||||
<h3>Rotations</h3>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
|
||||
var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
|
||||
var tween3 = KUTE.fromTo('selector3',{perspective:100,rotate3d:[0,0,0]},{perspective:100,rotate3d:[0,160,0]});
|
||||
var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});
|
||||
</code></pre>
|
||||
|
||||
<div id="rotExamples" class="featurettes">
|
||||
<div class="example-item example-box bg-blue">2D</div>
|
||||
<div class="example-item example-box bg-indigo">X</div>
|
||||
<div class="example-item example-box bg-olive">Y</div>
|
||||
<div class="example-item example-box bg-pink">Z</div>
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-green" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>The <code>rotateX</code> and <code>rotateY</code> are 3D based rotations, so they require a perspective in order to make the browser render proper 3D layers, but in the example they animate different because only the second, Y axis, uses the
|
||||
<code>perspective</code> function. The rotation on Z axis does not require a perspective. Unlike translations, you can stack all axis rotation for your animation, but we will see that in a later example.</p>
|
||||
|
||||
<h3>Skews</h3>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
|
||||
var tween2 = KUTE.fromTo('selector2',{skew:[0,0]},{skew:[0,45]});
|
||||
</code></pre>
|
||||
|
||||
<div id="skewExamples" class="featurettes">
|
||||
<div class="example-item example-box bg-teal">X</div>
|
||||
<div class="example-item example-box bg-green">Y</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-yellow" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Mixed Transformations</h3>
|
||||
<p>The current specification does not support animating different transform properties with multiple tween objects at the same time, you must stack them all together into a single object. See the example below:</p>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
|
||||
var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
|
||||
</code></pre>
|
||||
<p>If you check the <a href="http://codepen.io/thednp/pen/avZrYo" target="_blank">test here</a>, you will notice that only the <code>skewY</code> is going to work and no rotation. Now let's do this properly.</p>
|
||||
|
||||
<pre><code class="language-javascript">var tween1 = KUTE.fromTo(
|
||||
'selector1', // element
|
||||
{pespective:200,translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
|
||||
{pespective:200,translateX:250, rotateX:360, rotateY:15, rotateZ:5} // to
|
||||
);
|
||||
var tween2 = KUTE.fromTo(
|
||||
'selector2', // element
|
||||
{translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
|
||||
{translateX:-250, rotateX:360, rotateY:15, rotateZ:5} // to
|
||||
);
|
||||
</code></pre>
|
||||
|
||||
<div id="mixTransforms" class="featurettes" style="perspective: 400px;">
|
||||
<div class="example-item example-box bg-pink" style="line-height: 50px; font-size: 25px;">self perspective 200px</div>
|
||||
<div class="example-item example-box bg-orange" style="line-height: 50px; font-size: 25px;">parent perspective 400px</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-olive" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Note in this example, the first tween object uses the element's <code>perspective</code> while the second relies on the parent's perspective.</p>
|
||||
|
||||
<h3>Chained Transformations</h3>
|
||||
<p>KUTE.js has the ability to stack transform functions in a way to improve performance and optimize your workflow. In that idea the <code>.to()</code> method can be the right choice for most of your
|
||||
animation needs and especially to link animations together because it has the ability to check the current values of the transform functions found in the element's inline styling, mostly from previous
|
||||
tween animation, and use them as start values for the next animation. OK now, let's see a side by side comparison with 4 elements:</p>
|
||||
|
||||
<div id="chainedTweens" class="featurettes">
|
||||
<div class="example-item example-box bg-gray" style="font-size: 30px">FROMTO</div>
|
||||
<div class="example-item example-box bg-olive" style="font-size: 30px">FROMTO</div>
|
||||
<div class="example-item example-box bg-gray" style="font-size: 30px">TO</div>
|
||||
<div class="example-item example-box bg-blue" style="font-size: 30px">TO</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4>Observations</h4>
|
||||
<ul>
|
||||
<li>The example hopefully demostrates what the animation looks like with different combinations of transform functions and how to combine them to optimize your workflow, size on disk as well as to how
|
||||
to link animations together in a smooth continuous animation.</li>
|
||||
<li>No matter the input values, the component will always stack translations into <code>translate3d</code> and rotations into <code>rotate3d</code>.</li>
|
||||
<li>The first box uses a regular <code class="bg-gray">.fromTo()</code> object, from point A to B and back to A, with the exact coordinates we want.</li>
|
||||
<li>The second box is also using <code class="bg-olive">.fromTo()</code> object, but using all values for all tweens at all times, so we gave the animation a sense of continuity.</li>
|
||||
<li>The third box uses the <code class="bg-gray">.to()</code> method, and will try and continue animation from last animation, but we "forgot" to keep track on the rotation of the X axis.</li>
|
||||
<li>The last box also uses the <code class="bg-blue">.to()</code> method, and uses all values and reproduce the animation of the second box exactly, but with nearly half the code.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The order of the transform functions/properties is always the same: <code>perspective</code>, <code>translation</code>, <code>rotation</code>, <code>skew</code>, <code>scale</code>, this way we can prevent
|
||||
jumpy/janky animations; one of the reasons is consistency in all transform based components and another reason is the order of execution from the draft for
|
||||
<a href="https://drafts.csswg.org/css-transforms-2/#recomposing-to-a-3d-matrix">matrix3d recomposition</a>.</li>
|
||||
<li>Tests reveal that an element's own perspective produce better performance than using the parent's perspective. Also having both will severelly punish the animation performance, so keep that in mind
|
||||
when you work on optimizing your code. </li>
|
||||
<li>Use single axis transform functions like <code>translateX</code> when you want to animate the Y and Z axes back to ZERO, but in a convenient way.</li>
|
||||
<li>Use shorthand functions like <code>translate3d</code> when you want to animate / keep multiple axes.</li>
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
</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/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/transformFunctions.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
216
demo/transformMatrix.html
Normal file
216
demo/transformMatrix.html
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
||||
<meta name="description" content="The transformFunctions component for KUTE.js to enable your regular transform animations.">
|
||||
<meta name="keywords" content="css3 transform matrix,transform,matrix3d,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
||||
|
||||
<title>KUTE.js Transform Matrix</title>
|
||||
|
||||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
|
||||
<!-- Synthax highlighter -->
|
||||
<link href="./assets/css/prism.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="navbar-wrapper">
|
||||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
||||
<li class="active"><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">
|
||||
<h2 class="head-title">Transform Matrix</h2>
|
||||
<p class="condensed lead">The component covers all 3D <i>transform</i> functions and renders the update with either <i>matrix()</i> or <i>matrix3d()</i> functions, depending on the
|
||||
functions used and their values. The notation is also fairly easy to use and familiar with other components.</p>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="content-wrap">
|
||||
<div class="columns">
|
||||
<div class="col3">
|
||||
<h3 class="border text-right">Overview</h3>
|
||||
<p class="condensed text-right">The brand new component to enable complex <b>transform</b> animations of the future.</p>
|
||||
</div>
|
||||
<div class="col9 border">
|
||||
<p class="lead condensed">The KUTE.js <b>Transform Matrix</b> component covers animation for the CSS3 <b>transform</b> style on <b>Element</b> targets but with a different implementation.</p>
|
||||
<ul>
|
||||
<li>The notation is a little different because we have a different supported functions/properties set, and the value processing function needs to differentiate the two components.</li>
|
||||
<li>The 2D transform functions like <b>rotate</b>, <b>translate</b> or <b>scale</b> have been dropped to enable faster value processing and improved performance. The component is
|
||||
geared towards the future of web development with this very specific purpose in mind.</li>
|
||||
<li>Most importantly we have the update function which implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix">DOMMatrix()</a> API for smooth animation at no
|
||||
performance cost, which is different from other libraries that use a <b>webkitCSSMatrix</b> polyfill and lose performance.</li>
|
||||
<li>The script is robust, simple and light in size. It's simply a matter of taste when choosing between the two transform components.</li>
|
||||
</ul>
|
||||
<p>The component was developed for more complex transform animations and comes with additional supported transform functions. According to the W3 draft, the <b>DOMMatrix</b> API will merge the
|
||||
fallback <b>webkitCSSMatrix</b> API and the <b>SVGMatrix</b> API together, so awesome is yet to come.</p>
|
||||
<p>Due to execution complexity and other performance considerations, and similar to the <a href="transformFunctions.html">Transform Functions</a> component, this component provides support for a custom
|
||||
<b>rotate3d[X,Y,Z]</b> tween property which is different from CSS3 standard <b>rotate3d(x,y,z,Angle)</b> shorthand function.</p>
|
||||
<p>In certain situations you can also use functions like <b>scaleX</b>, <b>rotateY</b> or <b>translateZ</b> for convenience, but the component will always stack translations
|
||||
into <b>translate3d</b>, all scale axes into <b>scale3d</b>, all rotations into <b>rotate3d</b> and both skews into <b>skew</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
|
||||
<h3>3D Transform</h3>
|
||||
<ul>
|
||||
<li><kbd class="bg-indigo">perspective</kbd> function creates a 3D perspective for a target element transformation. EG. <code>perspective:400</code> to apply a 400px perspective.</li>
|
||||
<li><kbd class="bg-indigo">translateX</kbd> function is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right.</li>
|
||||
<li><kbd class="bg-indigo">translateY</kbd> function is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top.</li>
|
||||
<li><kbd class="bg-indigo">translateZ</kbd> function is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px away from the viewer, making it
|
||||
appear smaller. This function can be combined with the <code>perspective</code> function to take effect or the parent's perspective; the smaller perspective value, the deeper translation.</li>
|
||||
<li><kbd class="bg-indigo">translate3d</kbd> shorthand function is for translation on all the axes in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px
|
||||
to the bottom and 150px closer to the viewer, making it larger. When third value is used, it requires using a <code>perspective</code>.</li>
|
||||
<li><kbd class="bg-indigo">rotateX</kbd> function rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees on X axis.
|
||||
Requires perspective.</li>
|
||||
<li><kbd class="bg-indigo">rotateY</kbd> function rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees on Y axis.
|
||||
Requires perspective.</li>
|
||||
<li><kbd class="bg-indigo">rotateZ</kbd> function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:90</code> will rotate an element clockwise by 90 degrees on Z axis.</li>
|
||||
<li><kbd class="bg-indigo">rotate3d</kbd> is a <b>tween property</b>, which combines the above <code>rotateX</code>, <code>rotateY</code>, and <code>rotateZ</code> functions and rotates an element on all axes.
|
||||
Eg. <code>rotate3d:[250,-150,90]</code> will produce the same effect as the three above combined. The X and Y axes require a <code>perspective</code>.</li>
|
||||
<li><kbd class="bg-indigo">skewX</kbd> function will apply a shear to a target element on the X axis. Eg. <code>skewX:50</code> will skew the element by 50 degrees on X axis.</li>
|
||||
<li><kbd class="bg-indigo">skewY</kbd> function will apply a shear to a target element on the Y axis. Eg. <code>skewY:-50</code> will skew the element by -50 degrees on Y axis.</li>
|
||||
<li><kbd class="bg-indigo">skew</kbd> shorthand function will apply a shear on both X and Y axes to a target element. Eg. <code>skew:[50,50]</code> will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.</li>
|
||||
<li><kbd class="bg-indigo">scaleX</kbd> function will scale the X axis of a target element. Eg. <code>scaleX:1.5</code> will increase the scale of a target element on the X axis by 50%.</li>
|
||||
<li><kbd class="bg-indigo">scaleY</kbd> function will scale the Y axis of a target element. Eg. <code>scaleY:0.5</code> will decrease the scale of a target element on the Y axis by 50%.</li>
|
||||
<li><kbd class="bg-indigo">scaleZ</kbd> function will scale the Z axis of a target element. Eg. <code>scaleZ:0.75</code> will decrease the scale of a target element on the Z axis by 25%.</li>
|
||||
<li><kbd class="bg-indigo">scale3d</kbd> function will scale a target element on all axes. Eg. <code>scale3d:[1.5,0.5,0.75]</code> will produce the same effect as the 3 above combined.</li>
|
||||
<li><kbd class="bg-blue">matrix</kbd> and <kbd class="bg-blue">matrix3d</kbd> are not supported CSS3 transform functions or tween properties, but the results of the update function.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Example</h3>
|
||||
<p>Now let's have a look at the notation and a quick example:</p>
|
||||
|
||||
<pre><code class="language-javascript">let mx1 = KUTE.to('el1', { transform: { translate3d:[-50,-50,-50]} })
|
||||
let mx2 = KUTE.to('el2', { transform: { perspective: 100, translateX: -50, rotateX:-180} })
|
||||
let mx3 = KUTE.to('el3', { transform: { translate3d:[-50,-50,-50], skew:[-15,-15]} })
|
||||
let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-360,0], scaleX:0.5 } })
|
||||
</code></pre>
|
||||
|
||||
<div id="matrix-examples" class="featurettes" style="perspective: 400px">
|
||||
<div class="example-item example-box bg-indigo">MX1</div>
|
||||
<div class="example-item example-box bg-olive">MX2</div>
|
||||
<div class="example-item example-box bg-pink">MX3</div>
|
||||
<div class="example-item example-box bg-red">MX4</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="javascript:void(0)">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>So the second element uses it's own perspective but notice that the parent perspective also apply. This case must be avoided in order to keep performance in check: one perspective is best.</p>
|
||||
|
||||
<h3>Chained Transformations</h3>
|
||||
<p>Similar to the <a href="transformFunctions.html">other component</a> the Transform Matrix component will produce the same visual experience, but with the <code>matrix3d</code> function.</p>
|
||||
<div id="chainedTweens" class="featurettes">
|
||||
<div class="example-item example-box bg-gray" style="font-size: 30px">FROMTO</div>
|
||||
<div class="example-item example-box bg-olive" style="font-size: 30px">FROMTO</div>
|
||||
<div class="example-item example-box bg-gray" style="font-size: 30px">TO</div>
|
||||
<div class="example-item example-box bg-indigo" style="font-size: 30px">TO</div>
|
||||
|
||||
<div class="example-buttons">
|
||||
<a class="btn btn-blue" href="#">Start</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Why no support for the <code>matrix3d</code> function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees.
|
||||
As <a href="https://stackoverflow.com/a/39870758/803358">explained here</a>, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify
|
||||
the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.</li>
|
||||
<li>The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable.
|
||||
Such a feature would allow us to kick start animations directly from <code>matrix3d</code> string/array values, but considering the size of this component, I let you draw the conclusions.</li>
|
||||
<li>Despite the "limitations", we have some tricks available: the <code>fromTo()</code> method will never fail and it's much better when performance and sync are a must, and for <code>to()</code>
|
||||
method we're storing the values from previous animations to have them ready and available for the next chained animation.</li>
|
||||
<li>The performance of this component is identical with the <b>Transform Functions</b> component, which is crazy and awesome, all that thanks to the <b>DOMMatrix</b> API built into our modern browsers.
|
||||
If that's not good enough, the API will automatically switch from <code>matrix3d</code> to <code>matrix</code> and vice-versa whenever needed to save power. Neat?</li>
|
||||
<li>The <code>rotate3d</code> property makes alot more sense for this component since the <b>DOMMatrix</b> <code>rotate(angleX,angleY,angleZ)</code> method works exactly the same, while the
|
||||
<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>
|
||||
</ul>
|
||||
</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-extra.min.js"></script>
|
||||
<script src="./assets/js/prism.js"></script>
|
||||
|
||||
<script src="./assets/js/transformMatrix.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2
dist/kute-attr.min.js
vendored
2
dist/kute-attr.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js v1.6.6 | © dnp_theme | Attributes Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],d=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=d(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=-1!==p.indexOf(i)?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=d(o),v=/(%|[a-z]+)$/,b=c(this.element,u.replace(/_+[a-z]+/,""));if(-1===p.indexOf(u))if(null!==b&&v.test(b)){var m=s(b).u||s(r[o]).u,y=/%/.test(m)?"_percent":"_"+m;u+y in e||(/%/.test(m),e[u+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,(1e3*f(r.v,n.v,i)>>0)/1e3+n.u)}),n[u+y]=s(r[o])}else v.test(r[o])&&null!==b&&(null===b||v.test(b))||(u in e||(/opacity/i.test(o),e[u]=function(t,e,r,n,i){t.setAttribute(e,(1e3*f(r,n,i)>>0)/1e3)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this});
|
||||
2
dist/kute-css.min.js
vendored
2
dist/kute-css.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js v1.6.6 | © dnp_theme | CSS Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],v=["backgroundPosition"],b=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,v),x=R.length,C=C||{},T=0;T<x;T++)-1!==g.indexOf(R[T])?C[R[T]]="rgba(0,0,0,0)":-1!==y.indexOf(R[T])?C[R[T]]=0:-1!==v.indexOf(R[T])?C[R[T]]=[50,50]:"clip"===R[T]&&(C[R[T]]=[0,0,0,0]);for(var T=0,W=g.length;T<W;T++)i[g[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i,o){t.style[e]=c(r,n,i,o.keepHex)}),l(e)},o[g[T]]=function(t){return d(this.element,t)||C[t]};for(var T=0,W=b.length;T<W;T++)i[b[T]]=function(t,e){return t in n||(p.indexOf(t)>-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[b[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T<W;T++)i[s[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
|
||||
2
dist/kute-svg.min.js
vendored
2
dist/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/kute-text.min.js
vendored
2
dist/kute-text.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// KUTE.js v1.6.6 | © dnp_theme | Text Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),h=String("0123456789").split(""),f=a.concat(l,h),c=(f.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?h:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],x="",b="",d=n.substring(0),C=r.substring(0);x=""!==n?d.substring(d.length,g(i*d.length,d.length)>>0):"",b=C.substring(0,g(i*C.length,C.length)>>0),t.innerHTML=i<1?b+m+x:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
|
||||
2259
dist/kute.esm.js
vendored
Normal file
2259
dist/kute.esm.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
2
dist/kute.esm.min.js
vendored
Normal file
2
dist/kute.esm.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue