<body> tag and write one line to do just about any animation you can think of.
-
-# CDN
-Thanks to jsdelivr, we have CDN link here.
-
-# Basic Usage
-At a glance, you can write one line and you're done.
-
-//vanilla js
-new KUTE.Animate(el,options);
-
-//with jQuery plugin
-$('selector').Kute(options);
-
-
-
-# Advanced Usage
-Quite easily, you can write 'bit more lines and you're making the earth go round.
-
-//vanilla js
-new KUTE.Animate(el, {
- //options
- from : {},
- to : {},
- duration: 500,
- delay : 0,
- easing : 'exponentialInOut',
- start : functionOne, // run function when tween starts
- finish : functionTwo, // run function when tween finishes
- special : functionThree // run function while tween runing
- }
-);
-
-//with jQuery plugin
-$('selector'). Kute({
- //options
- from : {},
- to : {},
- duration: 500,
- delay : 0,
- easing : 'exponentialInOut',
- start : functionOne, // run function when tween starts
- finish : functionTwo, // run function when tween finishes
- special : functionThree // run function while tween runing
- }
-);
-
-
-# Full distribution (12Kb min)
-It does most of the animation work you need.
-* size: width and height
-* colors: text color and background-color (values )
-* transform: translate3D, scale, rotateX, rotateY, rotateZ
-* position: top, left (ideal for IE9- translate3D(left,top,0) fallback)
-* zoom: for scale on IE8 fallback
-* backgroundPosition
-* window scroll
-
-# Base Distribution (9Kb min)
-This distribution is much lighter and more suitable for most projects:
-* size: width and height
-* transform: translate3D, scale, rotateX, rotateY, rotateZ
-* position: top, left (ideal for IE9- translate3D(left,top,0) fallback)
-* zoom: for scale on IE8 fallback
-* window scroll
-
-#jQuery Plugin
-That's right, there you have it, just a few bits of code to bridge the awesome kute.js to your jQuery projects.
-
-# What else it does
-* computes option values properly according to their measurement unit (px,%,deg,etc)
-* properly handles IE10+ 3D transforms when elements have a perspective
-* it converts RGBA & HEX colors to RGB and tweens the inner values, then ALWAYS updates color via HEX
-* 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 style property value as initial value (via currentStyle || getComputedStyle)
-* allows you to add 3 different callbacks: start, update, finish, and they can be set as tween options (so no more nested functions needed)
-* since translate3D is best for performance, kute.js will always uses it
-* accepts "nice & easy string" easing functions, like 'linear' or 'exponentialOut' (removes the use of the evil eval, making development easier and closer to fast development standards :)
-* uses 31 easing functions, all Robert Penner's easing equations
-* like mentioned above, for IE8 zoom is used for transform: scale(0.5), it's not perfect as the object moves from it's floating point to the middle, and some left & top adjustments can be done, but to keep it simple and performance driven, I leave it as is, it's better than nothing.
-
-# Browser Support
-Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io. Also kute.js needs to know when doing stuff for IE9- like my other scripts here, I highy recommend Paul Irish's conditional stylesheets guides to add ie ie[version] to your site's HTML tag.
-
-# Demo
-coming soon..
-
-# License
-MIT License
diff --git a/assets/css/kute.css b/assets/css/kute.css
new file mode 100644
index 0000000..25b4ca5
--- /dev/null
+++ b/assets/css/kute.css
@@ -0,0 +1,1223 @@
+/*!
+ * KUTE.js | https://github.com/thednp/kute.js/
+ * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
+ */
+
+/* GLOBAL STYLES
+-------------------------------------------------- */
+body {
+ color: #ccc;
+ background-color: #08263d;
+ position: relative
+}
+
+.condensed {
+ font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal !important
+}
+
+/* smooth scroll */
+html {
+ scroll-behavior: smooth;
+}
+
+/* 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
+}
+
+footer .content-wrap {
+ padding-top: 5px;
+ 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; }
+
+.head-title { margin-top: 60px }
+
+/* navbar */
+.navbar {
+ display: flex;
+ /* justify-content: space-evenly; */
+ flex-direction: column;
+}
+
+@media (min-width:768px) {
+ .navbar {
+ align-items: center;
+ flex-direction: row;
+ }
+}
+
+.nav-wrapper {
+ 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 { 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 }
+.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; padding: 0 }
+#share li { list-style: none }
+#share a { text-decoration: none; }
+#share .icon {width:26px; height:26px; 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 h1 {border: 0}
+ .navbar-wrapper .nav,
+ .navbar-wrapper h1 { float: none; }
+}
+
+
+
+/* featurettes */
+.featurettes {
+ background: #fff;
+ padding: 60px 0;
+ width: 100%;
+ clear: both;
+ margin: 60px 0;
+ float: left;
+ color: #777;
+}
+/*.featurettes.dark {background: #222}*/
+.featurettes h1,
+.featurettes h2,
+.featurettes h3,
+.featurettes h4,
+.featurettes b,
+.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 }
+
+/* example box */
+.example-box {
+ font-size: 40px; line-height: 150px; text-align:center; font-weight: bold;
+ 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;
+ float: left; position:relative;
+ border-radius: 5px; margin: 0 20px 20px 0;
+}
+
+svg.example-box { width: auto; height: auto; }*/
+
+.easing-example {float: none; font-size: 24px; width: 320px}
+.example-buttons {position: absolute; top: 18px; right:0}
+.example-buttons + .example-buttons { top: auto; bottom: 18px}
+
+/* text properties example */
+h1.example-item {
+ font-size: 50px;
+ line-height:50px;
+ color: #333;
+ /* opacity: 0; */
+}
+
+h1.example-item span {
+ line-height: inherit;
+ display: inline;
+ vertical-align: top;
+}
+
+
+
+/* UTILITY STYLES
+-------------------------------------------------- */
+.clearfix:before,
+.clearfix:after {
+ content: " ";
+ display: table;
+}
+.clearfix:after {
+ clear: both;
+}
+.center-block {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+.pull-right {
+ float: right !important;
+}
+.pull-left {
+ float: left !important;
+}
+.hide {
+ display: none !important;
+}
+.show {
+ display: block !important;
+}
+.invisible {
+ visibility: hidden;
+}
+.text-hide {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+.text-olive { color: #9C27B0;}
+.text-indigo { color: #673AB7;}
+.text-green { color: #4CAF50;}
+.text-red { color: #e91b1f;}
+.text-yellow { color: #ffd626;}
+.text-blue { color: #2196F3;}
+.text-pink { color: #E91E63;}
+.text-orange { color: #FF5722;}
+.text-lime { color: #CDDC39;}
+.text-teal { color: #009688;}
+.text-strong { font-weight: bold }
+
+.hidden {
+ display: none !important;
+ visibility: hidden !important;
+}
+
+.hiddenoverflow { overflow: hidden }
+
+.media {float: left; margin: 5px 20px 0 0; height: auto; font-size: 64px; line-height: 64px; width: 64px; text-align: center}
+
+/* COLUMN STYLES
+-------------------------------------------------- */
+.columns { position: relative; width: 100%; margin: 0 -20px; display:flex; flex-wrap: wrap; }
+.columns > [class*="col"] { padding: 0 20px; position: relative }
+.columns.welcome {min-height:330px}
+
+@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% }
+}
+
+.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);
+ }
+}
+
+
+/* STYLING CONTENT
+-------------------------------------------------- */
+/* images */
+img { max-width: 100% }
+img.circle { border-radius: 50% }
+
+/* links */
+a {
+ color: #ffd626;
+ text-decoration: none;
+}
+a:hover,
+a:focus {
+ color: #4CAF50;
+ text-decoration: underline;
+}
+a:focus {
+ outline: none;
+}
+
+hr {
+ border: 1px solid #444;
+ margin: 10px 0;
+}
+
+/* buttons */
+.btns {
+ display: inline-flex;
+ flex: 1 1 auto;
+ justify-content: center;
+ text-align: center;
+}
+.btns .btn { display:inline; 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: #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 }
+.btn-yellow, .bg-yellow { background-color: #ffd626; color:#000 !important; fill: #ffd626} .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus { background-color: #4CAF50; color: #fff !important }
+.btn-blue, .bg-blue { background-color: #2196F3; color: #fff; fill: #2196F3} .btn-blue:hover, .btn-blue:active, .btn-blue:focus { background-color: #e91b1f }
+.btn-pink, .bg-pink { background-color: #E91E63; color: #fff; fill: #E91E63} .btn-pink:hover, .btn-pink:active, .btn-pink:focus { background-color: #2196F3 }
+.btn-orange, .bg-orange { background-color: #FF5722; color: #fff; fill: #FF5722} .btn-orange:hover, .btn-orange:active, .btn-orange:focus { background-color: #4CAF50 }
+.btn-lime, .bg-lime { background-color: #CDDC39; color: #000; fill: #CDDC39} .btn-lime:hover, .btn-lime:active, .btn-lime:focus { background-color: #e91b1f }
+.btn-teal, .bg-teal { background-color: #009688; color: #fff; fill: #009688} .btn-teal:hover, .btn-teal:active, .btn-teal:focus { background-color: #9C27B0 }
+
+.bg-light {background-color: #fff; color: #777; fill: #fff}
+
+.icon-large { font-size: 78px; line-height: 0.64; text-shadow: 2px 2px 0 #FFF,3px 3px 0px #ccc;}
+.icon-large.fa-cogs:before { color: #4CAF50 }
+.icon-large.fa-rocket:before { color: #673AB7 }
+.icon-large.fa-code-fork:before { color: #9C27B0 }
+
+.btn span {
+ font-size: 150%;
+ vertical-align: middle;
+}
+
+.btn span.right { margin: 0 0 0 10px }
+.btn span.left { margin: 0 10px 0 0 }
+
+.btn-group { position: relative; display: inline-block }
+.btn-group ul {
+ background: #555; width: 200px; color: #ccc;
+ position: absolute; bottom: -9999em; left: 0; list-style: none;
+ overflow: auto; padding: 0; z-index: 5
+}
+.btn-group ul li { padding: 5px 15px; cursor: pointer; display: block }
+.btn-group ul.subnav li { padding: 0; }
+.btn-group ul.subnav li > a { padding: 5px 15px; display: block }
+.btn-group ul li.titlef { font-weight: bold; }
+.btn-group ul li:hover {
+ background: #333;
+}
+
+.btn-group.open ul {
+ bottom: 26px;
+}
+.nav .btn-group ul {bottom: auto; top: -999em}
+.nav .btn-group.open ul {
+ top: 36px;
+}
+@media (max-width: 768px){
+ .nav .btn-group.open ul {
+ top: 30px;
+ }
+ #easings {left: auto; right: 0}
+}
+
+/* Style the scrolBar for modern browsers */
+.btn-group ul::-webkit-scrollbar {
+ width: 7px;
+}
+.btn-group ul::-webkit-scrollbar-thumb {
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ background: rgba(92,92,92,0.8);
+ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
+}
+.btn-group ul::-webkit-scrollbar-thumb:window-inactive {
+ background: rgba(255,255,255,0.4);
+}
+
+/* caret */
+.caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: 2px;
+ vertical-align: middle;
+ border-top: 4px dashed;
+ border-top: 4px solid\9;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+}
+
+/* STYLE CODE WRAPPING
+-------------------------------------------------- */
+code, kbd, pre {
+ font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+}
+pre {
+ display: block;
+ padding: 10px 15px !important;
+ margin: 0 0 20px !important;
+ line-height: 2.08;
+ color: #999;
+ word-break: break-all;
+ background-color: rgb(33,33,33);
+ background-color: rgba(11,11,11,0.5);
+ /*border: 1px solid rgb(22,22,22);
+ border: 1px solid rgba(11,11,11,0.8);*/
+ border-radius: 4px;
+ text-align: left;
+ position: relative;
+ font-size: 15px;
+}
+pre.language-javascript:after,
+pre.language-clike:after,
+pre.language-markup:after {
+ position: absolute; top:0; right:0; padding: 2px 5px;
+ background: #000;
+ border-radius: 0px 0px 0px 5px;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 12px; color: #999;
+}
+
+pre.language-javascript:after {content: 'JavaScript';}
+pre.language-clike:after {content: 'node';}
+pre.language-markup:after {content: 'HTML';}
+pre code {background: none;padding: 0; font-weight: normal; font-size: 100%;}
+code {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: #999;
+ background-color: #111;
+ border-radius: 4px;
+ white-space: pre;
+ font-weight: bold
+}
+
+kbd {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: #333;
+ background-color: #eee;
+ border-radius: 3px;
+ font-weight: bold
+}
+
+#rectangle {transform-origin: 50% 50%;}
+
+.w-20{
+ width:20% !important
+}
+.w-25{
+ width:25% !important
+}
+.w-33{
+ width:33.33% !important
+}
+.w-50{
+ width:50% !important
+}
+.w-66{
+ width:66.67% !important
+}
+.w-75{
+ width:75% !important
+}
+.w-80{
+ width:80% !important
+}
+.w-100{
+ width:100% !important
+}
+.w-auto{
+ width:auto !important
+}
+.h-20vh{
+ height:20vh !important
+}
+.h-25vh{
+ height:25vh !important
+}
+.h-33vh{
+ height:33.33vh !important
+}
+.h-50vh{
+ height:50vh !important
+}
+.h-66vh{
+ height:66.67vh !important
+}
+.h-75vh{
+ height:75vh !important
+}
+.h-80vh{
+ height:80vh !important
+}
+.h-100{
+ height:100% !important
+}
+.h-auto{
+ height:auto !important
+}
+@media(min-width: 768px){
+ .w-md-20{
+ width:20% !important
+ }
+ .w-md-25{
+ width:25% !important
+ }
+ .w-md-33{
+ width:33.33% !important
+ }
+ .w-md-50{
+ width:50% !important
+ }
+ .w-md-66{
+ width:66.67% !important
+ }
+ .w-md-75{
+ width:75% !important
+ }
+ .w-md-80{
+ width:80% !important
+ }
+ .w-md-100{
+ width:100% !important
+ }
+ .w-md-auto{
+ width:auto !important
+ }
+ .h-md-20vh{
+ height:20vh !important
+ }
+ .h-md-25vh{
+ height:25vh !important
+ }
+ .h-md-33vh{
+ height:33.33vh !important
+ }
+ .h-md-50vh{
+ height:50vh !important
+ }
+ .h-md-66vh{
+ height:66.67vh !important
+ }
+ .h-md-75vh{
+ height:75vh !important
+ }
+ .h-md-80vh{
+ height:80vh !important
+ }
+ .h-md-100{
+ height:100% !important
+ }
+ .h-md-auto{
+ height:auto !important
+ }
+}
+.d-none{
+ display:none
+}
+.d-inline{
+ display:inline
+}
+.d-flex{
+ display:flex
+}
+.d-block{
+ display:block
+}
+@media(min-width: 768px){
+ .d-md-none{
+ display:none
+ }
+ .d-md-inline{
+ display:inline
+ }
+ .d-md-flex{
+ display:flex
+ }
+ .d-md-block{
+ display:block
+ }
+}
+.flex-row{
+ flex-direction:row
+}
+.flex-row-reverse{
+ flex-direction:row-reverse
+}
+.flex-column{
+ flex-direction:column
+}
+.flex-column-reverse{
+ flex-direction:column-reverse
+}
+.align-items-start{
+ align-items:flex-start
+}
+.align-items-end{
+ align-items:flex-end
+}
+.align-items-center{
+ align-items:center
+}
+.align-items-baseline{
+ align-items:baseline
+}
+.align-items-stretch{
+ align-items:stretch
+}
+.align-self-start{
+ align-self:flex-start
+}
+.align-self-end{
+ align-self:flex-end
+}
+.align-self-center{
+ align-self:center
+}
+.align-self-baseline{
+ align-self:baseline
+}
+.align-self-stretch{
+ align-self:stretch
+}
+.justify-content-start{
+ justify-content:flex-start
+}
+.justify-content-end{
+ justify-content:flex-end
+}
+.justify-content-center{
+ justify-content:center
+}
+.justify-content-between{
+ justify-content:space-between
+}
+.justify-content-around{
+ justify-content:space-around
+}
+.align-content-start{
+ align-content:flex-start
+}
+.align-content-end{
+ align-content:flex-end
+}
+.align-content-center{
+ align-content:center
+}
+.align-content-around{
+ align-content:space-around
+}
+.align-content-stretch{
+ align-content:stretch
+}
+.flex-fill{
+ flex:1 1 auto !important
+}
+.flex-grow-1{
+ flex-grow:1
+}
+.flex-grow-0{
+ flex-grow:0
+}
+.flex-shrink-1{
+ flex-shrink:1
+}
+.flex-shrink-0{
+ flex-shrink:0
+}
+.flex-nowrap{
+ flex-wrap:nowrap
+}
+.flex-wrap{
+ flex-wrap:wrap
+}
+.flex-wrap-reverse{
+ flex-wrap:wrap-reverse
+}
+@media(min-width: 768px){
+ .flex-md-row{
+ flex-direction:row
+ }
+ .flex-md-row-reverse{
+ flex-direction:row-reverse
+ }
+ .flex-md-column{
+ flex-direction:column
+ }
+ .flex-md-column-reverse{
+ flex-direction:column-reverse
+ }
+ .align-items-md-start{
+ align-items:flex-start
+ }
+ .align-items-md-end{
+ align-items:flex-end
+ }
+ .align-items-md-center{
+ align-items:center
+ }
+ .align-items-md-baseline{
+ align-items:baseline
+ }
+ .align-items-md-stretch{
+ align-items:stretch
+ }
+ .align-self-md-start{
+ align-self:flex-start
+ }
+ .align-self-md-end{
+ align-self:flex-end
+ }
+ .align-self-md-center{
+ align-self:center
+ }
+ .align-self-md-baseline{
+ align-self:baseline
+ }
+ .align-self-md-stretch{
+ align-self:stretch
+ }
+ .justify-content-md-start{
+ justify-content:flex-start
+ }
+ .justify-content-md-end{
+ justify-content:flex-end
+ }
+ .justify-content-md-center{
+ justify-content:center
+ }
+ .justify-content-md-between{
+ justify-content:space-between
+ }
+ .justify-content-md-around{
+ justify-content:space-around
+ }
+ .flex-md-fill{
+ flex:1 1 auto !important
+ }
+ .flex-md-grow-1{
+ flex-grow:1
+ }
+ .flex-md-grow-0{
+ flex-grow:0
+ }
+ .flex-md-shrink-1{
+ flex-shrink:1
+ }
+ .flex-md-shrink-0{
+ flex-shrink:0
+ }
+ .flex-md-nowrap{
+ flex-wrap:nowrap
+ }
+ .flex-md-wrap{
+ flex-wrap:wrap
+ }
+ .flex-md-wrap-reverse{
+ flex-wrap:wrap-reverse
+ }
+}
+
+.overflow-visible{
+ overflow:visible
+}
+.overflow-hidden{
+ overflow:hidden
+}
+.perspective{
+ perspective:500px;
+ backface-visibility:hidden
+}
+.perspective-1000{
+ perspective:1000px;
+ backface-visibility:hidden
+}
+.perspective-1500{
+ perspective:1500px;
+ backface-visibility:hidden
+}
+.m-0{
+ margin:0 !important
+}
+.m-1{
+ margin:.25rem !important
+}
+.m-2{
+ margin:.5rem !important
+}
+.m-3{
+ margin:1rem !important
+}
+.m-4{
+ margin:1.5rem !important
+}
+.m-5{
+ margin:3rem !important
+}
+.m-auto{
+ margin:auto !important
+}
+.mx-0{
+ margin-right:0 !important;
+ margin-left:0 !important
+}
+.mx-1{
+ margin-right:.25rem !important;
+ margin-left:.25rem !important
+}
+.mx-2{
+ margin-right:.5rem !important;
+ margin-left:.5rem !important
+}
+.mx-3{
+ margin-right:1rem !important;
+ margin-left:1rem !important
+}
+.mx-4{
+ margin-right:1.5rem !important;
+ margin-left:1.5rem !important
+}
+.mx-5{
+ margin-right:3rem !important;
+ margin-left:3rem !important
+}
+.mx-auto{
+ margin-right:auto !important;
+ margin-left:auto !important
+}
+.my-0{
+ margin-top:0 !important;
+ margin-bottom:0 !important
+}
+.my-1{
+ margin-top:.25rem !important;
+ margin-bottom:.25rem !important
+}
+.my-2{
+ margin-top:.5rem !important;
+ margin-bottom:.5rem !important
+}
+.my-3{
+ margin-top:1rem !important;
+ margin-bottom:1rem !important
+}
+.my-4{
+ margin-top:1.5rem !important;
+ margin-bottom:1.5rem !important
+}
+.my-5{
+ margin-top:3rem !important;
+ margin-bottom:3rem !important
+}
+.my-auto{
+ margin-top:auto !important;
+ margin-bottom:auto !important
+}
+.mt-0{
+ margin-top:0 !important
+}
+.mt-1{
+ margin-top:.25rem !important
+}
+.mt-2{
+ margin-top:.5rem !important
+}
+.mt-3{
+ margin-top:1rem !important
+}
+.mt-4{
+ margin-top:1.5rem !important
+}
+.mt-5{
+ margin-top:3rem !important
+}
+.mt-auto{
+ margin-top:auto !important
+}
+.mr-0{
+ margin-right:0 !important
+}
+.mr-1{
+ margin-right:.25rem !important
+}
+.mr-2{
+ margin-right:.5rem !important
+}
+.mr-3{
+ margin-right:1rem !important
+}
+.mr-4{
+ margin-right:1.5rem !important
+}
+.mr-5{
+ margin-right:3rem !important
+}
+.mr-auto{
+ margin-right:auto !important
+}
+.mb-0{
+ margin-bottom:0 !important
+}
+.mb-1{
+ margin-bottom:.25rem !important
+}
+.mb-2{
+ margin-bottom:.5rem !important
+}
+.mb-3{
+ margin-bottom:1rem !important
+}
+.mb-4{
+ margin-bottom:1.5rem !important
+}
+.mb-5{
+ margin-bottom:3rem !important
+}
+.mb-auto{
+ margin-bottom:auto !important
+}
+.ml-0{
+ margin-left:0 !important
+}
+.ml-1{
+ margin-left:.25rem !important
+}
+.ml-2{
+ margin-left:.5rem !important
+}
+.ml-3{
+ margin-left:1rem !important
+}
+.ml-4{
+ margin-left:1.5rem !important
+}
+.ml-5{
+ margin-left:3rem !important
+}
+.ml-auto{
+ margin-left:auto !important
+}
+.p-0{
+ padding:0 !important
+}
+.p-1{
+ padding:.25rem !important
+}
+.p-2{
+ padding:.5rem !important
+}
+.p-3{
+ padding:1rem !important
+}
+.p-4{
+ padding:1.5rem !important
+}
+.p-5{
+ padding:3rem !important
+}
+.px-0{
+ padding-right:0 !important;
+ padding-left:0 !important
+}
+.px-1{
+ padding-right:.25rem !important;
+ padding-left:.25rem !important
+}
+.px-2{
+ padding-right:.5rem !important;
+ padding-left:.5rem !important
+}
+.px-3{
+ padding-right:1rem !important;
+ padding-left:1rem !important
+}
+.px-4{
+ padding-right:1.5rem !important;
+ padding-left:1.5rem !important
+}
+.px-5{
+ padding-right:3rem !important;
+ padding-left:3rem !important
+}
+.py-0{
+ padding-top:0 !important;
+ padding-bottom:0 !important
+}
+.py-1{
+ padding-top:.25rem !important;
+ padding-bottom:.25rem !important
+}
+.py-2{
+ padding-top:.5rem !important;
+ padding-bottom:.5rem !important
+}
+.py-3{
+ padding-top:1rem !important;
+ padding-bottom:1rem !important
+}
+.py-4{
+ padding-top:1.5rem !important;
+ padding-bottom:1.5rem !important
+}
+.py-5{
+ padding-top:3rem !important;
+ padding-bottom:3rem !important
+}
+.pt-0{
+ padding-top:0 !important
+}
+.pt-1{
+ padding-top:.25rem !important
+}
+.pt-2{
+ padding-top:.5rem !important
+}
+.pt-3{
+ padding-top:1rem !important
+}
+.pt-4{
+ padding-top:1.5rem !important
+}
+.pt-5{
+ padding-top:3rem !important
+}
+.pr-0{
+ padding-right:0 !important
+}
+.pr-1{
+ padding-right:.25rem !important
+}
+.pr-2{
+ padding-right:.5rem !important
+}
+.pr-3{
+ padding-right:1rem !important
+}
+.pr-4{
+ padding-right:1.5rem !important
+}
+.pr-5{
+ padding-right:3rem !important
+}
+.pb-0{
+ padding-bottom:0 !important
+}
+.pb-1{
+ padding-bottom:.25rem !important
+}
+.pb-2{
+ padding-bottom:.5rem !important
+}
+.pb-3{
+ padding-bottom:1rem !important
+}
+.pb-4{
+ padding-bottom:1.5rem !important
+}
+.pb-5{
+ padding-bottom:3rem !important
+}
+.pl-0{
+ padding-left:0 !important
+}
+.pl-1{
+ padding-left:.25rem !important
+}
+.pl-2{
+ padding-left:.5rem !important
+}
+.pl-3{
+ padding-left:1rem !important
+}
+.pl-4{
+ padding-left:1.5rem !important
+}
+.pl-5{
+ padding-left:3rem !important
+}
+.vertical-align-top{
+ vertical-align:top
+}
+.vertical-align-middle{
+ vertical-align:middle
+}
+.vertical-align-bottom{
+ vertical-align:bottom
+}
+.vertical-align-baseline{
+ vertical-align:baseline
+}
+.vertical-align-text-top{
+ vertical-align:text-top
+}
+.vertical-align-text-bottom{
+ vertical-align:text-bottom
+}
+@media(min-width: 768px){
+ .vertical-align-md-top{
+ vertical-align:top
+ }
+ .vertical-align-md-middle{
+ vertical-align:middle
+ }
+ .vertical-align-md-bottom{
+ vertical-align:bottom
+ }
+ .vertical-align-md-baseline{
+ vertical-align:baseline
+ }
+ .vertical-align-md-text-top{
+ vertical-align:text-top
+ }
+ .vertical-align-md-text-bottom{
+ vertical-align:text-bottom
+ }
+}
+.b-position-center-top{
+ background-position:center top !important
+}
+.b-position-center{
+ background-position:center center !important
+}
+.b-position-center-bottom{
+ background-position:center bottom !important
+}
+.b-position-left-top{
+ background-position:left top !important
+}
+.b-position-left-center{
+ background-position:left center !important
+}
+.b-position-left-bottom{
+ background-position:left bottom !important
+}
+.b-position-right-top{
+ background-position:right top !important
+}
+.b-position-right-center{
+ background-position:right center !important
+}
+.b-position-right-bottom{
+ background-position:right bottom !important
+}
+@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
+ .h-20vh{
+ height:216px !important
+ }
+ .h-25vh{
+ height:270px !important
+ }
+ .h-33vh{
+ height:359.964px !important
+ }
+ .h-50vh{
+ height:540px !important
+ }
+ .h-66vh{
+ height:720.036px !important
+ }
+ .h-75vh{
+ height:810px !important
+ }
+ .h-80vh{
+ height:864px !important
+ }
+ .h-100{
+ height:100% !important
+ }
+ .h-auto{
+ height:auto !important
+ }
+}
+@media screen and (-ms-high-contrast: active)and (min-width: 768px),(-ms-high-contrast: none)and (min-width: 768px){
+ .h-md-20vh{
+ height:216px !important
+ }
+ .h-md-25vh{
+ height:270px !important
+ }
+ .h-md-33vh{
+ height:359.964px !important
+ }
+ .h-md-50vh{
+ height:540px !important
+ }
+ .h-md-66vh{
+ height:720.036px !important
+ }
+ .h-md-75vh{
+ height:810px !important
+ }
+ .h-md-80vh{
+ height:864px !important
+ }
+ .h-md-100{
+ height:100% !important
+ }
+ .h-md-auto{
+ height:auto !important
+ }
+}
diff --git a/assets/css/prism.css b/assets/css/prism.css
new file mode 100644
index 0000000..b6092ab
--- /dev/null
+++ b/assets/css/prism.css
@@ -0,0 +1,226 @@
+/* PrismJS 1.20.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+scss&plugins=line-highlight+line-numbers */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: #ccc;
+ background: none;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 1em;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background: #051725;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #999;
+}
+
+.token.punctuation {
+ color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+ color: #e2777a;
+}
+
+.token.function-name {
+ color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+ color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+ color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+ color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+ color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+ color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.token.inserted {
+ color: green;
+}
+
+pre[data-line] {
+ position: relative;
+ padding: 1em 0 1em 3em;
+}
+
+.line-highlight {
+ position: absolute;
+ left: 0;
+ right: 0;
+ padding: inherit 0;
+ margin-top: 1em; /* Same as .prism’s padding-top */
+
+ background: hsla(24, 20%, 50%,.08);
+ background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+
+ pointer-events: none;
+
+ line-height: inherit;
+ white-space: pre;
+}
+
+ .line-highlight:before,
+ .line-highlight[data-end]:after {
+ content: attr(data-start);
+ position: absolute;
+ top: .4em;
+ left: .6em;
+ min-width: 1em;
+ padding: 0 .5em;
+ background-color: hsla(24, 20%, 50%,.4);
+ color: hsl(24, 20%, 95%);
+ font: bold 65%/1.5 sans-serif;
+ text-align: center;
+ vertical-align: .3em;
+ border-radius: 999px;
+ text-shadow: none;
+ box-shadow: 0 1px white;
+ }
+
+ .line-highlight[data-end]:after {
+ content: attr(data-end);
+ top: auto;
+ bottom: .4em;
+ }
+
+.line-numbers .line-highlight:before,
+.line-numbers .line-highlight:after {
+ content: none;
+}
+
+pre[id].linkable-line-numbers span.line-numbers-rows {
+ pointer-events: all;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
+ cursor: pointer;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
+ background-color: rgba(128, 128, 128, .2);
+}
+
+pre[class*="language-"].line-numbers {
+ position: relative;
+ padding-left: 3.8em;
+ counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+ position: relative;
+ white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+ position: absolute;
+ pointer-events: none;
+ top: 0;
+ font-size: 100%;
+ left: -3.8em;
+ width: 3em; /* works for line-numbers below 1000 lines */
+ letter-spacing: -1px;
+ border-right: 1px solid #999;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+}
+
+ .line-numbers-rows > span {
+ display: block;
+ counter-increment: linenumber;
+ }
+
+ .line-numbers-rows > span:before {
+ content: counter(linenumber);
+ color: #999;
+ display: block;
+ padding-right: 0.8em;
+ text-align: right;
+ }
+
diff --git a/assets/css/reset.css b/assets/css/reset.css
new file mode 100644
index 0000000..789f37e
--- /dev/null
+++ b/assets/css/reset.css
@@ -0,0 +1,305 @@
+*,*::before,*::after{
+ box-sizing:border-box
+}
+body{
+ margin:0;
+ font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+ font-size:1rem;
+ font-weight:400;
+ line-height:1.5;
+ color:#212529;
+ background-color:#fff;
+ -webkit-text-size-adjust:100%;
+ -webkit-tap-highlight-color:rgba(0,0,0,0)
+}
+[tabindex="-1"]:focus:not(:focus-visible){
+ outline:0 !important
+}
+hr{
+ margin:1rem 0;
+ color:inherit;
+ background-color:currentColor;
+ border:0;
+ opacity:.25
+}
+hr:not([size]){
+ height:1px
+}
+h1,h2,h3,h4,h5,h6{
+ margin-top:0;
+ font-weight:500;
+ line-height:1.2
+}
+h1{
+ font-size:calc(1.375rem + 1.5vw)
+}
+@media(min-width: 1200px){
+ h1{
+ font-size:2.5rem
+ }
+}
+h2{
+ font-size:calc(1.325rem + 0.9vw)
+}
+@media(min-width: 1200px){
+ h2{
+ font-size:2rem
+ }
+}
+h3{
+ font-size:calc(1.3rem + 0.6vw)
+}
+@media(min-width: 1200px){
+ h3{
+ font-size:1.75rem
+ }
+}
+h4{
+ font-size:calc(1.275rem + 0.3vw)
+}
+@media(min-width: 1200px){
+ h4{
+ font-size:1.5rem
+ }
+}
+h5{
+ font-size:1.25rem
+}
+h6{
+ font-size:1rem
+}
+p{
+ margin-top:0;
+ margin-bottom:1rem
+}
+abbr[title],abbr[data-original-title]{
+ text-decoration:underline;
+ -webkit-text-decoration:underline dotted;
+ text-decoration:underline dotted;
+ cursor:help;
+ -webkit-text-decoration-skip-ink:none;
+ text-decoration-skip-ink:none
+}
+address{
+ margin-bottom:1rem;
+ font-style:normal;
+ line-height:inherit
+}
+ol,ul{
+ padding-left:2rem
+}
+ol,ul,dl{
+ margin-top:0;
+ margin-bottom:1rem
+}
+ol ol,ul ul,ol ul,ul ol{
+ margin-bottom:0
+}
+dt{
+ font-weight:700
+}
+dd{
+ margin-bottom:.5rem;
+ margin-left:0
+}
+blockquote{
+ margin:0 0 1rem
+}
+b,strong{
+ font-weight:bolder
+}
+small{
+ font-size:.875em
+}
+mark{
+ padding:.2em;
+ background-color:#fcf8e3
+}
+sub,sup{
+ position:relative;
+ font-size:.75em;
+ line-height:0;
+ vertical-align:baseline
+}
+sub{
+ bottom:-0.25em
+}
+sup{
+ top:-0.5em
+}
+a{
+ color:#0d6efd;
+ text-decoration:underline
+}
+a:hover{
+ color:#024dbc
+}
+a:not([href]):not([class]),a:not([href]):not([class]):hover{
+ color:inherit;
+ text-decoration:none
+}
+pre,code,kbd,samp{
+ font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+ font-size:1em
+}
+pre{
+ display:block;
+ margin-top:0;
+ margin-bottom:1rem;
+ overflow:auto;
+ font-size:.875em;
+ -ms-overflow-style:scrollbar
+}
+pre code{
+ font-size:inherit;
+ color:inherit;
+ word-break:normal
+}
+code{
+ font-size:.875em;
+ color:#d63384;
+ word-wrap:break-word
+}
+a>code{
+ color:inherit
+}
+kbd{
+ padding:.2rem .4rem;
+ font-size:.875em;
+ color:#fff;
+ background-color:#212529;
+ border-radius:.2rem
+}
+kbd kbd{
+ padding:0;
+ font-size:1em;
+ font-weight:700
+}
+figure{
+ margin:0 0 1rem
+}
+img,svg{
+ vertical-align:middle
+}
+table{
+ caption-side:bottom;
+ border-collapse:collapse
+}
+caption{
+ padding-top:.5rem;
+ padding-bottom:.5rem;
+ color:#6c757d;
+ text-align:left
+}
+th{
+ text-align:inherit;
+ text-align:-webkit-match-parent
+}
+thead,tbody,tfoot,tr,td,th{
+ border-color:inherit;
+ border-style:solid;
+ border-width:0
+}
+label{
+ display:inline-block
+}
+button{
+ border-radius:0
+}
+button:focus{
+ outline:1px dotted;
+ outline:5px auto -webkit-focus-ring-color
+}
+input,button,select,optgroup,textarea{
+ margin:0;
+ font-family:inherit;
+ font-size:inherit;
+ line-height:inherit
+}
+button,input{
+ overflow:visible
+}
+button,select{
+ text-transform:none
+}
+[role=button]{
+ cursor:pointer
+}
+select{
+ word-wrap:normal
+}
+[list]::-webkit-calendar-picker-indicator{
+ display:none
+}
+button,[type=button],[type=reset],[type=submit]{
+ -webkit-appearance:button
+}
+button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){
+ cursor:pointer
+}
+::-moz-focus-inner{
+ padding:0;
+ border-style:none
+}
+textarea{
+ resize:vertical
+}
+fieldset{
+ min-width:0;
+ padding:0;
+ margin:0;
+ border:0
+}
+legend{
+ float:left;
+ width:100%;
+ padding:0;
+ margin-bottom:.5rem;
+ font-size:calc(1.275rem + 0.3vw);
+ line-height:inherit;
+ white-space:normal
+}
+@media(min-width: 1200px){
+ legend{
+ font-size:1.5rem
+ }
+}
+legend+*{
+ clear:left
+}
+::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{
+ padding:0
+}
+::-webkit-inner-spin-button{
+ height:auto
+}
+[type=search]{
+ outline-offset:-2px;
+ -webkit-appearance:textfield
+}
+::-webkit-search-decoration{
+ -webkit-appearance:none
+}
+::-webkit-color-swatch-wrapper{
+ padding:0
+}
+::-webkit-file-upload-button{
+ font:inherit;
+ -webkit-appearance:button
+}
+output{
+ display:inline-block
+}
+iframe{
+ border:0
+}
+summary{
+ display:list-item;
+ cursor:pointer
+}
+progress{
+ vertical-align:baseline
+}
+[hidden]{
+ display:none !important
+}
\ No newline at end of file
diff --git a/assets/css/spicr-theme.css b/assets/css/spicr-theme.css
new file mode 100644
index 0000000..a92055f
--- /dev/null
+++ b/assets/css/spicr-theme.css
@@ -0,0 +1,172 @@
+/* Spicr theme | thednp © 2020 | MIT-License */
+
+.text-left{
+ text-align:left
+}
+.text-center{
+ text-align:center
+}
+.text-right{
+ text-align:right
+}
+@media(min-width: 768px){
+ .text-md-left{
+ text-align:left
+ }
+ .text-md-center{
+ text-align:center
+ }
+ .text-md-right{
+ text-align:right
+ }
+}
+.center-block{
+ display:block;
+ margin-left:auto;
+ margin-right:auto
+}
+.float-right{
+ float:right !important
+}
+.float-left{
+ float:left !important
+}
+.float-none{
+ float:none !important
+}
+.font-weight-normal{
+ font-weight:normal
+}
+.font-weight-bold{
+ font-weight:bold
+}
+
+#SpicrDemo{
+height:600px
+}
+.spicr .lead{
+ margin:0;
+ font-weight:bold;
+ text-transform:uppercase;
+ color:#fff
+}
+.overlay{
+ background:rgba(0,0,0,.45);
+ position:absolute;
+ top:0;
+ right:0;
+ width:100%;
+ height:100%
+}
+.spicr-carousel-navigation>*{
+ vertical-align:text-bottom
+}
+@media(min-width: 479px){
+ .spicr-control.long-shadows{
+ transition:opacity .3s ease-in
+ }
+ .spicr-control.long-shadows .arrow-prev{
+ margin-left:-280px;
+ padding:0px 5px 0px 250px;
+ transform:translate(-100%)
+ }
+ .spicr-control.long-shadows .arrow-next{
+ margin-right:-280px;
+ padding:0px 250px 0px 5px;
+ transform:translate(100%)
+ }
+ .spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{
+ transition:all 1s ease-in
+ }
+ .spicr:hover .spicr-control.long-shadows .arrow-prev,.spicr:hover .spicr-control.long-shadows .arrow-next{
+ transition-duration:.3s;
+ transition-timing-function:ease-out
+ }
+ .spicr-control.long-shadows:focus .arrow-prev,.spicr-control.long-shadows:focus .arrow-next{
+ transform:translate(0%)
+ }
+ .spicr:hover .spicr-control.long-shadows .arrow-prev{
+ transform:translate(0%)
+ }
+ .spicr:hover .spicr-control.long-shadows .arrow-next{
+ transform:translate(0%)
+ }
+ .spicr-control.long-shadows .spicr-icon{
+ width:40px;
+ height:40px
+ }
+ .spicr-control.long-shadows .arrow-next,.spicr-control.long-shadows .arrow-prev{
+ border-radius:40px;
+ margin-top:-20px
+ }
+ .spicr-control.long-shadows:focus .arrow-prev{
+ transform:translate(0%)
+ }
+ .spicr-control.long-shadows:focus .arrow-next{
+ transform:translate(0%)
+ }
+ .spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{
+ display:block;
+ width:auto;
+ height:auto;
+ background-color:#000;
+ background-color:rgba(0,0,0,.3)
+ }
+}
+.spicr-carousel h4{
+ margin-top:0
+}
+.spicr-slider{
+ font-size:calc(0.5rem + 1.5vw);
+ line-height:calc(0.6rem + 1.5vw)
+}
+.spicr-slider h1{
+ font-size:calc(1.375rem + 1.5vw);
+ letter-spacing:-1px;
+ margin:0
+}
+.spicr-slider h2{
+ font-size:calc(1.375rem + 0.9vw);
+ letter-spacing:0;
+ margin:0
+}
+.features-carousel .spicr-pages{
+ top:.5rem
+}
+.features-carousel .spicr-pages li{
+ line-height:1.5rem;
+ padding:.5rem 1rem
+}
+@media(min-width: 768px){
+ .featurette-heading span{
+ font-size:24px;
+ line-height:1;
+ letter-spacing:-1px
+ }
+ .spicr-slider{
+ font-size:1rem;
+ line-height:1.8rem
+ }
+ .spicr-slider h1{
+ font-size:42px;
+ line-height:1;
+ letter-spacing:-2px;
+ margin:0 0 1.5rem
+ }
+ .spicr-slider h2{
+ font-size:36px;
+ line-height:1;
+ letter-spacing:-1px;
+ margin:0 0 1.5rem
+ }
+}
+
+.background-top-left { background-position: top left !important}
+.background-top-center { background-position: top center !important}
+.background-top-right { background-position: top center !important}
+.background-center-left { background-position: center left !important}
+.background-center-center { background-position: center center !important}
+.background-center-right { background-position: center right !important}
+.background-bottom-left { background-position: bottom left !important}
+.background-bottom-center { background-position: bottom center !important}
+.background-bottom-right { background-position: bottom right !important}
\ No newline at end of file
diff --git a/assets/img/apple-touch-icon.png b/assets/img/apple-touch-icon.png
new file mode 100644
index 0000000..ed1ba7e
Binary files /dev/null and b/assets/img/apple-touch-icon.png differ
diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico
new file mode 100644
index 0000000..c7f98a7
Binary files /dev/null and b/assets/img/favicon.ico differ
diff --git a/assets/img/home.svg b/assets/img/home.svg
new file mode 100644
index 0000000..dfe389b
--- /dev/null
+++ b/assets/img/home.svg
@@ -0,0 +1,56 @@
+
+
+
diff --git a/assets/img/img-blank.gif b/assets/img/img-blank.gif
new file mode 100644
index 0000000..5891de4
Binary files /dev/null and b/assets/img/img-blank.gif differ
diff --git a/assets/img/loader.gif b/assets/img/loader.gif
new file mode 100644
index 0000000..335e00c
Binary files /dev/null and b/assets/img/loader.gif differ
diff --git a/assets/img/ms.svg b/assets/img/ms.svg
new file mode 100644
index 0000000..88df967
--- /dev/null
+++ b/assets/img/ms.svg
@@ -0,0 +1,27 @@
+
+
diff --git a/assets/img/rectangle.svg b/assets/img/rectangle.svg
new file mode 100644
index 0000000..9efd23e
--- /dev/null
+++ b/assets/img/rectangle.svg
@@ -0,0 +1,14 @@
+
+
+
diff --git a/assets/img/social.svg b/assets/img/social.svg
new file mode 100644
index 0000000..b9b079b
--- /dev/null
+++ b/assets/img/social.svg
@@ -0,0 +1,34 @@
+
+
+
diff --git a/assets/js/backgroundPosition.js b/assets/js/backgroundPosition.js
new file mode 100644
index 0000000..ff08225
--- /dev/null
+++ b/assets/js/backgroundPosition.js
@@ -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 */
diff --git a/assets/js/borderRadius.js b/assets/js/borderRadius.js
new file mode 100644
index 0000000..6aa183e
--- /dev/null
+++ b/assets/js/borderRadius.js
@@ -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 */
\ No newline at end of file
diff --git a/assets/js/boxModel.js b/assets/js/boxModel.js
new file mode 100644
index 0000000..bf705d6
--- /dev/null
+++ b/assets/js/boxModel.js
@@ -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 = 'WIDTHThis web page is only for high-end desktop computers.
'; + warning +='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.
'; + warning +=''+explain+'
'; + warning +='This web page is only for high-end desktop computers.
'; + warning +='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.
'; + warning +=''+explain+'
'; + warning +='The component that animates the CSS property controling the background-position property of a target element.
+Animate the position of the background image, simple and effective.
+The KUTE.js Background Position component enables animation for the CSS backgroundPosition property on most browsers.
+It can handle an entire set of input values [x,y], '0% 50%' and even 'left center'. The component always updates the values of the position + property via % suffix for simplicity reasons and even if px or any other unit is supported.
+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.
+Here a couple of possible tween objects:
+ +// 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();
+% suffix is used.The component that animates the CSS properties that control the radius of the corners of a target element.
+Animate the radius for all corners or a specific one for a target element.
+The KUTE.js Border Radius component provides support for the CSS3 border-radius property and all corner variations.
+The component accepts any measurement unit but the best results in terms of visual presentation are when you use %, em or any other + subpixel units.
+Even if you don't provide any unit at all, the component will work it out with px.
+For a quick reference, here are the properties supported:
+border-radius on all corners for a given element.border-top-left-radius for a given element.border-top-right-radius for a given element.border-bottom-left-radiusfor a given element.border-bottom-right-radiusfor a given element.OK let's have a look at some sample tween objects and a quick demo:
+ +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();
+border-radius: 50px 20px.The component that animates most of the CSS box model properties of a target element on all browsers.
+Animate the width, height, borderWidth or spacing for a target element on all browsers.
+The KUTE.js Box Model component provides support for all box-model properties and all their variations.
+Unlike other components, this one only works with px measurement unit, simply because these properties have no control at subpixel level. This means that even if you use % + as suffix, the computed values are still pixel based in all browsers.
+Because modern browsers shine with transform 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.
+position based properties for movement on
+ vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires
+ position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.scale on IE8 again, as well as for other purposes.outline-width of an element.The properties marked with different color, namely left, top, width and height are part of a lighter + version of the component called baseBoxModel.js, since they're the most used and probably most needed in just about every KUTE.js distribution.
+ +OK let's have a look at some sample tween objects and a quick demo:
+ +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'})
+We're gonna chain these tweens and start the animation.
+margin: "20px 50px" or any other property are not supported.top, left, bottom and right) 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.The component that animates the CSS clip property of a target element on most browsers.
+Animate the clip property of a target element when certain conditions are met.
+The KUTE.js Clip Property component enables animation for the CSS clip property on most browsers.
+What exactly does it do? Well you can animate the visible rectangular shape of an element that is set to position:absolute. + If conditions are not met (more conditions apply, see notes below), the component will update the target element, but the effect is not visible.
+Generally you can set the CSS rule for this property like this clip: rect(top,right,bottom,left) which forms a rectangular masking shape above + a target element making parts of it invisible.
+While the CSS clip property has been deprecated, it can still be used to emulate a type of scale/reveal animation for legacy browsers in certain cases.
+This component is bundled with the demo/src/kute-extra.js file.
+A possible tween object using the property:
+ +KUTE.to('selector',{clip:[0,150,100,0]}).start();And a quick example here could look like this:
+ +overflow:visible style rule.position:absolute CSS rule will produce no effect.px unit for the rectangular mask, which is unfortunate.The component that animates CSS color properties for Element targets on most browsers.
+Animate color properties for a target element and updates its CSS style via RGB.
+The KUTE.js Color Properties component provides support for all color properties and all their variations on most browsers.
+While with previous versions we used to have a keepHex option to always use the HEX format of the output color, modern browsers outright ignore the option and always + deliver colors in RGB format, probably for performance reasons.
+ +The component supports input values such as HEX, RGB and RGBA for all color properties and most browsers should also work with + web safe colors, eg. color: 'red'.
+ +For a quick reference, here are all the supported properties:
+color: '#ff0000'.background-color for a target element. Eg. backgroundColor: 'rgb(202,150,20)'.outline-color for a target element. Eg. outline-color: 'cyan'.border-color on all sides for a target element. Eg. borderColor: 'rgba(250,100,20,0.5)'.borderTopColor: 'rgb(0,66,99)'.OK let's have a look at some sample tween objects and a quick demo:
+ +KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
+KUTE.to('selector1',{backgroundColor:'#069'}).start();
+KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
+fill or stroke, for that you can use the
+ HTML Attributes component.steelblue or darkorange.RGB or RGBA, but the last one is not supported on legacy browsers and it should fallback to RGB.borderColor and its variations or outlineColor won't have any visible effect if no border or outline style is applied to
+ your target element.The component that animates the CSS3 filter property for specific Element targets on modern browsers.
+Animate filter functions for a target Element and deliver the best possible animation.
+The KUTE.js Filter Effects component provides support for the CSS3 filter property on modern browsers.
+The component covers all filter functions, except that the url() function cannot be animated, however the component will + try and keep it's value into the target element styling at all times.
+Similar to the Transform Functions and the Transform Matrix 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.
+Most values are in [0-Infinity] range and the presentation is delivered with % suffixed values, except blur() which uses px + as unit/suffix.
+px.[0,0,0,'black']Let's have a look at some sample tween objects and a quick example:
+ +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'] }})
+dropShadow provides a better experience than
+ boxShadow, as shown here.url() function the way it does, the HTML Attributes component will
+ complement greatly for even more animation potential.hue-rotate and
+ hueRotate.The component that animates color attributes or any single value presentation attribute of a target element on most browsers.
+Animate a wide variety of presetantion attributes of a target element.
+The KUTE.js HTML Attributes component enables animation for any numeric presentation attribute, with or without a measurement unit / suffix as well as specific color attributes.
+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.
+The component doesn't support attributes with multiple values like stroke-dasharray, viewBox or transform for specific reasons. To animate the stroke related attributes, the + SVG Draw component is the tool for you, while for transform you have the SVG Transform component and the + Transform Matrix component.
+Despite the "limitations" of this component, you have access to just about any SVGElement or Element + presentation attribute available.
+// 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%'}});
+The HTML Attributes 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:
+ +// dashed attribute notation
+var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
+
+// non-dashed attribute notation
+var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
+The strokeWidth attribute is very interesting because it can work with px, % 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.
The HTML Attributes component can also animate color attributes: fill, stroke and stopColor. If the elements are affected by their CSS counterparts, the effect
+ is not visible, you need to make sure that doesn't happen.
// 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)'}});
+If in this example the fill attribute value would reference a gradient, then rgba(0,0,0,0) is used. Keep in mind that the component will not work with combined
+ fill values like url(#pattern) rgba(), you are better of only using the url(#pattern) and use other attributes to control directly the animation of that
+ linked pattern, just like in the last example below.
In the next example, let's play with the attributes of a <circle> element: radius and center coordinates.
// 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}});
+A quick demo with the above:
+ +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 % unit is found in the current value and used as unit for the DOM update:
// 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%'}});
+fillOpacity becomes fill-opacity).If you're looking for that spicy tool to kickstart your animations, developed with latest technology and modular design, you will love KUTE.js.
+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.
+Built on modern ES6+ JavaScript Standard, packed with utilities, build tools and a wide range of supported properties, KUTE.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.
+ +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.
+While KUTE.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.
+The demo pages use a dedicated polyfill for IE10+ browsers, but today we have polyfill services and a wide range of + browser detection options to handle legacy browsers, our focus here is the highest performance on modern browsers.
+By the way, KUTE.js is really fast.
+The entire codebase reworked on the latest standards with flexible rollup based build tools. Most classes are extensible via the ES6 extend
+ or your usual prototype, depending on the class.
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.
+You can create your tween objects with a familiar syntax with your trusted options, the callback system and other component related options.
+Along the wide range of options, certain components provide tools for further control over the outcome. Also there's a progress + bar somewhere.
+Each component demo page comes packed with tons of guides and tips on how to optimize the performance and visual presentation.
+The library is released under the MIT License.
+The component that animates the CSS opacity property of a target Element on most browsers.
+Animate the opacity property of a target element.
+The KUTE.js Opacity Property component enables animation for the opacity CSS property of an Element target on most browsers.
+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%.
+ +While some components like HTML Attributes and Filter Effects do provide some + similar functionality for specific Element types, this component covers all types of elements and is supported on a wide range of modern + and legacy browsers alike.
+// fade out
+let fadeOutTween = KUTE.to('selector1',{opacity:0}).start()
+
+// fade in
+let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
+filter:alpha(opacity=50) have been dropped.-o-opacity, -moz-opacity or -ms-opacity are not supported.These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.
+Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
+ + +These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.
+Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
+ +These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.
+Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
+ + +The handy tool to manually update a tween via an Input slider.
+Create a tween object and link it to a range slider Input. Some stuff happening.
+The Progress Bar 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.
+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:
+<input type="range" min="0" max="1" step="0.00001" /> with these exact min, max and step attributesKUTE.fromTo() method, the others don't prepare start values for the tween objectstart() or pause() methods at all, as well as repeat and / or yoyo optionsinput event handler to update the tween progress by using the KUTE.update function, which is the step function triggered on every requestAnimationFrame tickA very basic code sample will look like this:
+ + +// the range slider
+var rangeSlider = document.querySelector('input[type="range"');
+
+// 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()
+})
+And now let's see the code in action:
+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.
+Note that this tool is not included in the official distribution file.
+ +The component that animates the vertical scrolling of a target Element as well as the <window> on most browsers.
+The fully reworked component for vertical scrolling animation is an essential part of KUTE.js.
+The KUTE.js Scroll Property component enables animation for the vertical scroll of a target Element or the + <window> on most browsers.
+The vertical scrollling animation is a popular choice to spice up the in-page navigation, and most websites use a Back To Top button for + scrolling all the way back to top. For this reason, our component doesn't support horizontal scrolling animation.
+The component also uses passive event option for best possible performance along with other improvements like removed the need to use + additional CSS or the use of data-scrolling attribute on the <body> element.
+On animation start, the component will lock down all possible pointer events of the animation target to + avoid any unwanted animation glitches.
+// 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()
+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.
+ +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.
+ +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.
+ +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.
+ +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.
+The above shows a comparison of the Scroll Property component with the scroll-behavior: smooth CSS; while this browser
+ feature shows excellent performance it lacks the flexibility and support for legacy browsers.
<a>Back to top</a> button at the bottom, just in case you didn't notice, but
+ only on this page scrollProperty component is used.scroll-behavior, but you can include this component in your custom builds to enable scrolling for legacy browsers.The component that animates shadow properties of a specific target element on most browsers.
+Animate the shadow properties of a target element.
+The KUTE.js Shadow Properties component enables animation for the text-shadow CSS property of text elements + as well as the box-shadow property of any element on most browsers.
+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.
+The component uses px as unit for the shadow parameters, can animate the color of the shadow and can also handle the inset shadow parameter + of the boxShadow property.
+OK let's have a look at a couple of quick examples:
+// 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();
+// 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();
+The component that also covers SVG morphing, with similar functionality as for the SVG Morph component, but with a different + implementation for value processing and animation setup.
+Animate SVG paths with cubic-bezier path commands and improved performance.
+The KUTE.js SVG Cubic Morph component enables animation for the d (description) presentation attribute and is the latest in all the SVG + components.
+The component will process paths and out of the box will provide the closest possible interpolation by default. It also implements a series of solutions from + Paper.js to determine paths draw direction and automatically reverse one of them for most accurate presentation and as a result + the previously featured options reverseFirstPath and reverseSecondPath have been deprecated.
+The main difference with the SVG Morph component is the fact that this components is converting all path commands to cubicBezierTo, giving it + the upper hand over the original morph component in many regards. While the other component will spend time to process the path data and create polygons, this component should + deliver the animation faster and using considerably less power.
+All path processing is powered by our SVGPathCommander starting KUTE.js version 2.0.14, which aims to modernize and + improve the path processing and enable transition from closed to and from un-closed shapes.
+The first morphing animation example is a transition from a rectangle into a star, just like for the other component.
+ +<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>
+Now we can apply both .to() and fromTo() methods:
// 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();
+By default, the component will process the paths as authored and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:
+ +Some takeaways:
+Z path commands and by adding additional curve points using a vector graphics editor to match
+ the amount of points in both shapes.In this example we focus on experimentation to discover ways to optimize the morph animation so that the points travel optimal distance. Keep in mind that the Z path command is actually a shorthand
+ for L (line path command), sometimes it's required to close the shape, however the path processing tools will remove it or replace it when converting path segments to C cubic-bezier.
Each morph animation as well as each pair of shapes can have its own quirks. You can use the technique on your shapes to optimize the animation to your style. Chris Coyier wrote + an excelent article in which he explains the terminology and workflow on how SVG morphing animation works with simple examples.
+ + +The next set of morphing animations is a transition from a line into a circle and showcases the component's behavior when both shapes are closed (they have the Z path command) or one or another is not,
+ but first let's create the necessary markup and scripting:
<svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+<path id="line" fill="transparent" stroke="orange" stroke-linejoin="round" stroke-width="10" d="M10 300 L580 300"/>
+<path id="star" style="visibility:hidden" d="M10,300a290,290 0 1,0 580,0a290,290 0 1,0 -580,0z"/>
+</svg>
+// the fromTo() method
+var tween = KUTE.fromTo('#line', {path: '#line' }, { path: '#circle' }).start();
+// OR
+// the to() method will take the path's d attribute value and use it as start value
+var tween = KUTE.to('#line', { path: '#circle' }).start();
+As you can see, the functionality of this component is very different from the svgMorph component in the sense that it will + morph shapes as authored. If you replay the above animations, here are a few takeaways:
+Z path command behave like a regular line;This is the visual presentation you can expect with this component. Keep in mind that stroke attributes like stroke-linejoin such can have
+ a small impact on your animation, particularly on start and end points.
In other cases, you may want to morph paths that have subpaths. Let's have a look at the following SVG:
+ +<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>
+Similar to the svgMorph component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <path> shapes, analyze and associate them + in a way that corresponding shapes are close and their points travel the least possible distance.
+ +Now since we've worked with these paths before, the first example below showcases how the svgCubicMorph component handles it by default. 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:
+ +Make sure to check the markup here as well as the svgCubicMorph.js for a full code review.
+ +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:
+ +So the technique involves creating <mask> elements, splitting multipath shapes into multiple <path> 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.
That's it, you now mastered the SVG Cubic Morph component.
+ +path SVGElements, you might need a shapeToPath utility.fill-rule="evenodd" specific SVG attribute, you must make sure you check your shapes in that regard as well.The component that animates the stroke of any SVGElement and updates the style attribute of the target.
+Animate the stroke for most SVGElement shapes, with a very easy to use coordinates system.
+The KUTE.js SVG Draw component enables animation for the stroke-dasharray and stroke-dashoffset properties via CSS style.
+The component uses the SVG standard .getTotalLength() method for <path> shapes, while for the other shapes it uses some helper methods to calculate the values + required for animation.
+It can work with <path>, <glyph>, <circle>, <ellipse>, <rect>, <line>, <polyline> and <polygon> + shapes. It uses a very simple to use coordinates system so you can set up animations right away.
+As you will see in the examples below, there is alot of flexibility in terms of input values.
+// 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%'});
+Based on the above sample code, let's see some animation going on:
+ +draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100%
+ as start value for your tweens when stroke-dasharray and stroke-dashoffset properties are not set.stroke on some shapes may not completely close, you might want to consider values outside the [0-100] percent range.The component that covers SVG morphing, 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.
+Animate SVG paths with line-to path commands, improve visual presentation and optimize performance on any device.
+The KUTE.js SVG Morph component enables animation for the d (description) presentation attribute and is one of the most important in all the + SVG components.
+It only works with inline SVGPathElement shapes and the presentation is always the same when shapes are closed or not (their d attribute ends with Z path command). + On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points + along the two paths based on a default / given sample size and will create two arrays of coordinates we need for interpolation.
+This component was originally inspired by a D3.js path morphing example and now implements a set of + D3 polygon geometric operations and other functionalities from flubber to + produce the coordinates for a very consistent morphing animation.
+While in some cases you might be able to create SVG morphing animations via CSS3 transition, 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.
+All path processing is powered by our SVGPathCommander starting KUTE.js version 2.0.14, which aims to modernize and + improve the path processing and enable you to prepare your path strings in Node.js.
+The easy way to optimize morphing animation for every device in a single option.
+The SVG Morph 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.
+ +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.
+ +<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>
+Now we can apply both .to() and fromTo() methods:
// 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();
+For all the above tween objects the animation should look like this:
+ +That's it, let move on to the next example.
+ +The next morphing animation example is a transition from a line into a circle and this example showcases the component's behavior when one of the paths is not closed (it doesn't have the Z path command), + while the other is closed. In all cases, the component will always consider shapes to be closed, so let's have a look at the example:
+ +<svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+ <path id="line" fill="transparent" stroke="orange" stroke-linejoin="round" stroke-width="10" d="M10 300L590 300"/>
+ <path id="circle" style="visibility:hidden" d="M10,300a290,290 0 1,0 580,0a290,290 0 1,0 -580,0z"/>
+</svg>
+Now we can apply both .to() and fromTo() methods:
// the fromTo() method
+var tween = KUTE.fromTo('#line', {path: '#line' }, { path: '#circle' }).start();
+// OR
+// the to() method will take the path's d attribute value and use it as start value
+var tween = KUTE.to('#line', { path: '#circle' }).start();
+The functionality of this component is different from the svgCubicMorph component in the sense that it will animate the shapes as if they are both and always closed. + In the above example, the orange line is closed while the green line is not, and the animation is the same.
+ + +When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of only L, V and
+ H path commands), the SVG Morph 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
+ morphPrecision value to optimize performance.
// 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();
+Did you catch the cat?
+ + +In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:
+<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>
+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:
+For our example here, this is the end result markup for the shapes to be used for morphing animation:
+ +<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>
+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:
+ + +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.
+ +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.
+ +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 <mask> where we included the subpaths of both start
+ and end shape, just to get the same visual as the original paths.
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.
+ + +path elements, you might need a convertToPath feature, so
+ grab one here.morphPrecision 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.morphPrecision value for every resolution. Take some time to experiement, you might find a better morphPrecision
+ value you can use for any particular device and / or resolution..to() and .fromTo() 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() call, thus delaying the animation, so keep that in mind when working with syncing multiple tweens,
+ the .to() 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.fill-rule="evenodd" specific SVG attribute, but you can make sure you check your shapes in that regard as well.The component that covers transform animation on SVGElement targets, solves browser inconsistencies and provides a similar visual presentation as + with other transform based components on non-SVGElements targets.
+Animate 2D transform functions on SVG elements on any SVG enabled browser.
+The KUTE.js SVG Transform component enables animation for the transform presentation attribute on any SVGElement target.
+The SVG Transform is an important part of the SVG components for some reasons:
+Keep in mind that the transform 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 <svg> element viewBox attribute.
+Keep everything under control and handle any situation with a single option.
+The only component that keeps the transformOrigin option because it's required to compute transform functions in the SVG + cooordinates system.
+ +Keep in mind that the component will disregard the current SVG default origin of 0px 0px of the target's parent, even if the browsers' default + transformOrigin have been normalized over the years.
+ +The transformOrigin tween option can also be used to set coordinates of a parent <svg> element (in the second example below). + Values like top left values are also accepted, but will take the target element's box as a reference, not the parent's box.
+translate:150 to translate a shape 150px to the right or
+ translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+rotate:150 will rotate a shape clockwise by 150 degrees around it's own center or around
+ the transformOrigin: '450 450' set tween option coordinate of the parent element. IE9+skewX:25 will skew a shape by 25 degrees. IE9+skewY:25 will skew a shape by 25 degrees. IE9+scale:0.5 will scale a shape to half of it's initial size. IE9+As explained with the Transform Matrix component, the DOMMatrix API will replace webkitCSSMatrix and SVGMatrix and on this page we intend to put + the two components head to head, the elements on the left will be using Transform Matrix component and equivalent 2D transform functions, while the elements on the right will be using 2D functions of + the SVG Transform component.
+ +The SVG Transform component comes with a reliable set of scripts that work on all browsers, making use of the SVGMatrix API for some origin calculation, the transform presentation
+ attribute and the svgTransform tween property with a familiar and very easy notation:
// 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]
+ }
+}
+);
+Let's see some examples and explain each case.
+ + +Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. The svgTransform will only accept single value
+ for the angle value rotate: 45, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a transformOrigin
+ tween option to override the behavior.
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:
+ +For the first element, the Transform Matrix creates the rotation animation via rotate3d[0,0,360] tween property around the element center coordinate, as we've set transform-origin:25% 50%
+ 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 rotate: 360 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.
When for non-SVG elements' transform we could have used values such as center bottom as transformOrigin (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 transformOrigin tween option value accordingly to use the shape's .getBBox() value to determine
+ for instance the coordinates for 25% 75% position or center top.
In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50%
+ coordinate, so here's how to deal with it:
// 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]} );
+Same as the above example, the first element is rotated by the Transform Matrix component and is using transform-origin: 50% 50%; styling, while the second element is rotated by the SVG Transform + component with the above calculated transform-origin.
+ +In this example we'll have a look at translations, so when setting translate: [150,0], 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 translate: 150 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:
The first element uses the Transform Matrix translate3d: [580,0,0] function, while the second tween uses the translate: [0,0] as svgTransform value.
+ For the second example the values are unitless and are relative to the viewBox attribute.
For skews we have: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
The first tween skews the shape on both X and Y axes in a chain via Transform Matrix skew:[-15,-15] function and the second tween skews the shape on X and Y axes via the svgTransform functions skewX:15 and
+ skewY:15 tween properties. You will notice translation kicking in to set the transform origin.
Another transform example for SVGs is the scale. Unlike translations, for scale animation the component only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis,
+ to keep it simple and even if SVGs do support scale(X,Y). 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:
The first tween scales the shape at scale: 1.5 via Transform Matrix component and it's scale3d:[1.5,1.5,1] function, and the second tween scales down the shape at scale: 0.5
+ value via svgTransform. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected
+ 50% 50% of the shape box. A similar case as with the skews.
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 transform-origin 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:
Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. 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 transform-origin at an expected 50% 50% 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.
The SVG Transform does not work with SVG specific chained transform functions right away (do not confuse with tween chain), Ana Tudor explains best here,
+ but if your SVG elements only use this feature to set a custom transform-origin, it should look like this:
<svg>
+ <circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
+</svg>
+In this case I would recommend using the values of the first translation as transformOrigin for your tween built with the .fromTo() method like so:
// 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();
+Before you hit the Start button, make sure to check the transform attribute value. The below tween will reset the element's transform attribute to original value when the animation is complete.
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.
+ +translate,
+ rotate, skewX, skewY and scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements..getBBox() method, it's really useful to set custom transform-origin.overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible
+ or some browser specific tricks if that is the case.viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most
+ Internet Explorer versions simply don't work. You might want to check this tutorial..fromTo() method with all proper values.svgTransform tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.transformOrigin set to an SVGElement via CSS, you must always use a it's specific option.transformOrigin 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 :)The component that animates the typographic CSS properties of a target content Element on most browsers.
+Animate the text size or spacing properties of a target text element.
+The KUTE.js Text Properties component enables animation for typography related CSS properties of content element targets + on most browsers.
+This small and simple component can be used to create various attention seekers for any content elements such as HTMLHeadingElement, + HTMLParagraphElement, HTMLUListElement or any other, as well as for entire content blocks.
+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:
+font-size for a target element.line-height for a target element.letter-spacing for a target element.word-spacing for a target element.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})
+position:absolute.The component that enables a unique animation by manipulating the string content of Element targets on most browsers.
+Manipulate string contents with ease.
+The KUTE.js Text Write component enables animation for content Element targets by manipulating their string contents.
+The component provides two properties:
+This text property comes with an additional tween option called textChars for the scrambling text character, with the following expected values:
+It's always best to wrap your target number in a <span id="uniqueID"> for the number property and content targets should be split into + multiple parts for the text property if the target has child contents, as we will see in the examples below.
+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 text property a bit more because we can optimize the content targets for a great visual experience.
+ +As discussed above, the target number need to be wrapped in a tag of choice with a unique ID so we can target it.
+ +// 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>
+// 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});
+The above should work like this:
+Total number of lines: 0
+ + +The button action will toggle the valuesEnd value for the number property, because tweening a number to itself would produce no effect.
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.
+ +// sample tween object with "text" property
+var myTextTween = KUTE.to('selector', {text: 'A text string with <span>child content</span> should do.'});
+Click the Start button on the right.
+ +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 Text Write component comes with a powerful utility you can use to ease your work in these instances.
+The createTextTweens() utility will do it all for you: split text strings, set tween objects, but let's see some sample code:
+ +// 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();
+Now let's see how we doin:
+ +Click the Start button on the right.
+ +There are some considerations for the createTextTweens(target,newText,options) utility:
+0
+Clicks so far
+In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js
+ features can really spice up some content. Have fun!
yoyo tween option will NOT un-write / delete the string character by character for the text property, but will write the previous text instead.The component covers most important 2D and 3D transform functions as described in the W3 specification, + completelly reworked for improved performance and faster value processing.
+The component to cover animation for most transform functions with improved performance and faster value processing.
+The KUTE.js Transform Functions enables animation for the CSS3 transform style on Element targets on modern browsers. For specific legacy browsers there is another + component called Transform Legacy you will find in the source folders.
+Starting with KUTE.js version 2.0, you can set the perspective function as a tween property, while you can still rely on a parent's perspective but for less performance.
+All the previous perspective related options have been removed. The transform CSS3 property itself no longer uses preffixes like webkit, moz or ms since all major + browsers are standardized.
+In comparison with previous versions, the component expects that input values are already px and deg based and no longer transforms % percent based values into px based or rad + based angles into deg based. This makes the execution faster and more consistent.
+The component will stack all transform functions for translations, rotations and skews to shorthand functions to optimize performance and minimize value processing.
+perspective:400 to apply a 400px perspective. IE10+translateX:150 to translate an element 150px to the right. IE10+translateY:-250 to translate an element 250px towards the top. IE10+translateZ:-250 to translate an element 250px away from the viewer, making it
+ appear smaller. This function can be combined with the perspective function to take effect or the parent's perspective; the smaller perspective value, the deeper translation. IE10+translate3d:[-150,200,150] 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 perspective. IE10+rotateX:250 will rotate an element clockwise by 250 degrees. Requires perspective.
+ IE10+rotateY:-150 will rotate an element counter-clockwise by 150 degrees.
+ Requires perspective. IE10+rotateZ:-150 will rotate an element counter-clockwise by 150 degrees on X axis.
+ IE10+rotateX, rotateY, and rotateZ functions and rotates an element on all axes. Obviously this is NOT
+ equivalent with the rotate3d(vectorX,vectorY,vectorZ,angle) shorthand function, this is only an optimization implemented for performance reasons and hopefully for your convenience.
+ Eg. rotate3d:[-150,80,90] 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 perspective.
+ IE10+translate:[-150,200] to translate an element 150px to the left, 200px to the bottom. IE9+rotate:250 will rotate an element clockwise by 250 degrees. IE9+skewX:50 will skew a target element on X axis by 50 degrees. IE9+skewX:50 will skew a target element on X axis by 50 degrees. IE9+skew:[50,50] will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.
+ IE9+scale:1.5 will scale up a target element by 50%. IE9+As a quick note, all input values for translate, rotate or single axis translation, skew or rotation will be all stacked into translate3d, + skew and rotate3d respectivelly; this is to further improve performance on modern browsers.
+ +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});
+As you can see in your browsers console, for all animations translate3d is used, as explained above. Also the first example that's using the 2D translate for both vertical
+ and horizontal axis even if we only set X axis.
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});
+The rotateX and rotateY 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
+ perspective 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.
var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
+var tween2 = KUTE.fromTo('selector2',{skew:[0,0]},{skew:[0,45]});
+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:
+ +var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
+var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
+If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.
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
+);
+Note in this example, the first tween object uses the element's perspective while the second relies on the parent's perspective.
KUTE.js has the ability to stack transform functions in a way to improve performance and optimize your workflow. In that idea the .to() 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:
translate3d and rotations into rotate3d..fromTo() object, from point A to B and back to A, with the exact coordinates we want..fromTo() object, but using all values for all tweens at all times, so we gave the animation a sense of continuity..to() method, and will try and continue animation from last animation, but we "forgot" to keep track on the rotation of the X axis..to() method, and uses all values and reproduce the animation of the second box exactly, but with nearly half the code.perspective, translation, rotation, skew, scale, 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
+ matrix3d recomposition.translateX when you want to animate the Y and Z axes back to ZERO, but in a convenient way.translate3d when you want to animate / keep multiple axes.translate3d or rotate3d tween property generally not only improve performance, but will also minimize the code size. Eg. translateX:150,
+ translateY:200, translateZ:50 => translate3d:[150,200,50] is quite the difference..fromTo() method is fastest, and you will have more work to do as well, but will eliminate any delay / syncronization issue that may occur.The component covers all 3D transform functions and renders the update with either matrix() or matrix3d() functions, depending on the + functions used and their values. The notation is also fairly easy to use and familiar with other components.
+The brand new component to enable complex transform animations of the future.
+The KUTE.js Transform Matrix component covers animation for the CSS3 transform style on Element targets but with a different implementation.
+The component was developed for more complex transform animations and comes with additional supported transform functions. According to the W3 draft, the DOMMatrix API will merge the + fallback webkitCSSMatrix API and the SVGMatrix API together, so awesome is yet to come.
+Due to execution complexity and other performance considerations, and similar to the Transform Functions component, this component provides support for a custom + rotate3d[X,Y,Z] tween property which is different from CSS3 standard rotate3d(x,y,z,Angle) shorthand function.
+In certain situations you can also use functions like scaleX, rotateY or translateZ for convenience, but the component will always stack translations + into translate3d, all scale axes into scale3d, all rotations into rotate3d and both skews into skew.
+perspective:400 to apply a 400px perspective.translateX:150 to translate an element 150px to the right.translateY:-250 to translate an element 250px towards the top.translateZ:-250 to translate an element 250px away from the viewer, making it
+ appear smaller. This function can be combined with the perspective function to take effect or the parent's perspective; the smaller perspective value, the deeper translation.translate3d:[-150,200,150] 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 perspective.rotateX:250 will rotate an element clockwise by 250 degrees on X axis.
+ Requires perspective.rotateY:-150 will rotate an element counter-clockwise by 150 degrees on Y axis.
+ Requires perspective.rotateZ:90 will rotate an element clockwise by 90 degrees on Z axis.rotateX, rotateY, and rotateZ functions and rotates an element on all axes.
+ Eg. rotate3d:[250,-150,90] will produce the same effect as the three above combined. The X and Y axes require a perspective.skewX:50 will skew the element by 50 degrees on X axis.skewY:-50 will skew the element by -50 degrees on Y axis.skew:[50,50] will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.scaleX:1.5 will increase the scale of a target element on the X axis by 50%.scaleY:0.5 will decrease the scale of a target element on the Y axis by 50%.scaleZ:0.75 will decrease the scale of a target element on the Z axis by 25%.scale3d:[1.5,0.5,0.75] will produce the same effect as the 3 above combined.Now let's have a look at the notation and a quick example:
+ +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 } })
+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.
+ +Similar to the other component the Transform Matrix component will produce the same visual experience, but with the matrix3d function.
matrix3d 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 explained here, 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.matrix3d string/array values, but considering the size of this component, I let you draw the conclusions.fromTo() method will never fail and it's much better when performance and sync are a must, and for to()
+ method we're storing the values from previous animations to have them ready and available for the next chained animation.matrix3d to matrix and vice-versa whenever needed to save power. Neat?rotate3d property makes alot more sense for this component since the DOMMatrix rotate(angleX,angleY,angleZ) method works exactly the same, while the
+ rotate3d(vectorX,vectorY,vectorZ,angle) function is a thing of the past, according to Chris Coyier nobody use it.