diff --git a/index.html b/index.html index 743d55b..5516de7 100644 --- a/index.html +++ b/index.html @@ -207,19 +207,9 @@ - - - - - - - - - - - - - + + + diff --git a/js/anime-master/.github/ISSUE_TEMPLATE/bug_report.md b/js/anime-master/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index dd84ea7..0000000 --- a/js/anime-master/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve -title: '' -labels: '' -assignees: '' - ---- - -**Describe the bug** -A clear and concise description of what the bug is. - -**To Reproduce** -Steps to reproduce the behavior: -1. Go to '...' -2. Click on '....' -3. Scroll down to '....' -4. See error - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Screenshots** -If applicable, add screenshots to help explain your problem. - -**Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] - -**Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] - -**Additional context** -Add any other context about the problem here. diff --git a/js/anime-master/.github/ISSUE_TEMPLATE/feature_request.md b/js/anime-master/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index bbcbbe7..0000000 --- a/js/anime-master/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: '' -labels: '' -assignees: '' - ---- - -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] - -**Describe the solution you'd like** -A clear and concise description of what you want to happen. - -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/js/anime-master/.gitignore b/js/anime-master/.gitignore deleted file mode 100644 index df702bf..0000000 --- a/js/anime-master/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -.DS_Store - -*.log - -node_modules diff --git a/js/anime-master/CNAME b/js/anime-master/CNAME deleted file mode 100644 index 4883149..0000000 --- a/js/anime-master/CNAME +++ /dev/null @@ -1 +0,0 @@ -animejs.com \ No newline at end of file diff --git a/js/anime-master/LICENSE.md b/js/anime-master/LICENSE.md deleted file mode 100644 index 78b6ebf..0000000 --- a/js/anime-master/LICENSE.md +++ /dev/null @@ -1,9 +0,0 @@ -The MIT License - -Copyright (c) 2019 Julian Garnier - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/js/anime-master/README.md b/js/anime-master/README.md deleted file mode 100644 index 9c5d01d..0000000 --- a/js/anime-master/README.md +++ /dev/null @@ -1,109 +0,0 @@ -

- -
- anime.js -

- -

JavaScript animation engine | animejs.com

- -

- npm version - npm downloads -

- -
- Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
- It works with CSS properties, SVG, DOM attributes and JavaScript Objects. -
- -

- Getting started | Documentation | Demos and examples | Browser support -

- -## Getting started - -### Download - -Via npm - -```bash -$ npm install animejs --save -``` - -or manual [download](https://github.com/juliangarnier/anime/archive/master.zip). - -### Usage - -#### ES6 modules - -```javascript -import anime from 'animejs/lib/anime.es.js'; -``` - -#### CommonJS - -```javascript -const anime = require('animejs'); -``` - -#### File include - -Link `anime.min.js` in your HTML : - -```html - -``` - -### Hello world - -```javascript -anime({ - targets: 'div', - translateX: 250, - rotate: '1turn', - backgroundColor: '#FFF', - duration: 800 -}); -``` - -## [Documentation](https://animejs.com/documentation/) - -* [Targets](https://animejs.com/documentation/#cssSelector) -* [Properties](https://animejs.com/documentation/#cssProperties) -* [Property parameters](https://animejs.com/documentation/#duration) -* [Animation parameters](https://animejs.com/documentation/#direction) -* [Values](https://animejs.com/documentation/#unitlessValue) -* [Keyframes](https://animejs.com/documentation/#animationKeyframes) -* [Staggering](https://animejs.com/documentation/#staggeringBasics) -* [Timeline](https://animejs.com/documentation/#timelineBasics) -* [Controls](https://animejs.com/documentation/#playPause) -* [Callbacks and promises](https://animejs.com/documentation/#update) -* [SVG Animations](https://animejs.com/documentation/#motionPath) -* [Easing functions](https://animejs.com/documentation/#linearEasing) -* [Helpers](https://animejs.com/documentation/#remove) - -## [Demos and examples](http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/) - -* [CodePen demos and examples](http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/) -* [juliangarnier.com](http://juliangarnier.com) -* [animejs.com](https://animejs.com) -* [Moving letters](http://tobiasahlin.com/moving-letters/) by [@tobiasahlin](https://twitter.com/tobiasahlin) -* [Gradient topography animation](https://tympanus.net/Development/GradientTopographyAnimation/) by [@crnacura](https://twitter.com/crnacura) -* [Organic shape animations](https://tympanus.net/Development/OrganicShapeAnimations/) by [@crnacura](https://twitter.com/crnacura) -* [Pieces slider](https://tympanus.net/Tutorials/PiecesSlider/) by [@lmgonzalves](https://twitter.com/lmgonzalves) -* [Staggering animations](https://codepen.io/juliangarnier/pen/4fe31bbe8579a256e828cd4d48c86182?editors=0100) -* [Easings animations](https://codepen.io/juliangarnier/pen/444ed909fd5de38e3a77cc6e95fc1884) -* [Sphere animation](https://codepen.io/juliangarnier/pen/b3bb8ca599ad0f9d00dd044e56cbdea5?editors=0010) -* [Layered animations](https://codepen.io/juliangarnier/pen/6ca836535cbea42157d1b8d56d00be84?editors=0010) -* [anime.js logo animation](https://codepen.io/juliangarnier/pen/d43e8ec355c30871cbe775193255d6f6?editors=0010) - - -## Browser support - -| Chrome | Safari | IE / Edge | Firefox | Opera | -| --- | --- | --- | --- | --- | -| 24+ | 8+ | 11+ | 32+ | 15+ | - -## anime-js-v3-logo - -[Website](https://animejs.com/) | [Documentation](https://animejs.com/documentation/) | [Demos and examples](http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/) | [MIT License](LICENSE.md) | © 2019 [Julian Garnier](http://juliangarnier.com). diff --git a/js/anime-master/bower.json b/js/anime-master/bower.json deleted file mode 100644 index 0745418..0000000 --- a/js/anime-master/bower.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "animejs", - "description": "JavaScript animation engine", - "main": "anime.js", - "repository": { - "type": "git", - "url": "https://github.com/juliangarnier/anime.git" - }, - "keywords": [ - "anime", - "animation", - "javascript", - "CSS", - "transforms", - "SVG", - "canvas" - ], - "authors": [ - "Julian Garnier " - ], - "license": "MIT", - "homepage": "https://animejs.com/", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} diff --git a/js/anime-master/build.js b/js/anime-master/build.js deleted file mode 100644 index 2fdb9cb..0000000 --- a/js/anime-master/build.js +++ /dev/null @@ -1,69 +0,0 @@ -const fs = require('fs'); -const { rollup } = require('rollup'); -const { minify } = require('uglify-js'); -const pretty = require('pretty-bytes'); -const sizer = require('gzip-size'); -const pkg = require('./package'); - -const umd = pkg['umd:main']; -const date = new Date(); - -const banner = `/* - * anime.js v${ pkg.version } - * (c) ${ date.getFullYear() } Julian Garnier - * Released under the MIT license - * animejs.com - */ -`; - -console.info('Compiling... 😤'); - -rollup({ - input: 'src/index.js', - plugins: [ - require('rollup-plugin-buble')({ - transforms: { - modules: false, - dangerousForOf: true - }, - targets: { - firefox: 32, - chrome: 24, - safari: 6, - opera: 15, - edge: 10, - ie: 10 - } - }) - ] -}).then(bun => { - bun.write({ - banner, - format: 'cjs', - file: pkg.main - }); - - bun.write({ - banner, - format: 'es', - file: pkg.module - }); - - bun.write({ - banner, - file: umd, - format: 'umd', - name: pkg['umd:name'] - }).then(_ => { - const data = fs.readFileSync(umd, 'utf8'); - - // produce minified output - const { code } = minify(data); - fs.writeFileSync(umd, `${banner}\n${code}`); // with banner - - // output gzip size - const int = sizer.sync(code); - console.info('Compilation was a success! 👍'); - console.info(`~> gzip size: ${ pretty(int) }`); - }).catch(console.error); -}).catch(console.error); diff --git a/js/anime-master/documentation/assets/css/anime-theme.css b/js/anime-master/documentation/assets/css/anime-theme.css deleted file mode 100644 index 92d039e..0000000 --- a/js/anime-master/documentation/assets/css/anime-theme.css +++ /dev/null @@ -1,73 +0,0 @@ -.hljs { - display: block; - color: #F6F4F2; -} - -.hljs-comment, -.hljs-quote { - color: #A2A09F; - font-style: italic; -} - -.hljs-doctag, -.hljs-keyword, -.hljs-formula { - color: #B08CFF; -} - -.hljs-section, -.hljs-name, -.hljs-selector-tag, -.hljs-deletion, -.hljs-subst { - color: #FF7C72; -} - -.hljs-literal { - color: #1CE2B2; -} - -.hljs-string, -.hljs-regexp, -.hljs-addition, -.hljs-attribute, -.hljs-attr, -.hljs-meta-string { - color: #A6FF8F; -} - -.hljs-built_in, -.hljs-class .hljs-title { - color: #FBF38C; -} - -.hljs-variable, -.hljs-template-variable, -.hljs-type, -.hljs-selector-class, -.hljs-selector-attr, -.hljs-selector-pseudo, -.hljs-number { - color: #FF7C72; -} - -.hljs-symbol, -.hljs-bullet, -.hljs-link, -.hljs-meta, -.hljs-selector-id, -.hljs-title { - color: #61C3FF; -} - -.hljs-emphasis { - font-style: italic; -} - -.hljs-strong { - font-weight: bold; -} - -.hljs-link { - text-decoration: underline; -} diff --git a/js/anime-master/documentation/assets/css/animejs.css b/js/anime-master/documentation/assets/css/animejs.css deleted file mode 100644 index ef09535..0000000 --- a/js/anime-master/documentation/assets/css/animejs.css +++ /dev/null @@ -1,121 +0,0 @@ -@font-face { - font-family: "Roobert"; - font-weight: 400; - font-style: normal; - src: url("../fonts/Roobert-Regular.woff2") format("woff2"); -} - -@font-face { - font-family: "Roobert"; - font-weight: 400; - font-style: italic; - src: url("../fonts/Roobert-Regular.woff2") format("woff2"); -} - -@font-face { - font-family: "Roobert"; - font-weight: 600; - font-style: normal; - src: url("../fonts/Roobert-SemiBold.woff2") format("woff2"); -} - -@font-face { - font-family: "Roobert"; - font-weight: 600; - font-style: italic; - src: url("../fonts/Roobert-SemiBoldItalic.woff2") format("woff2"); -} - -@font-face { - font-family: "InputMono"; - src: url("../fonts/InputMono-Regular.woff2") format("woff2"), - url("../fonts/InputMono-Regular.woff") format("woff"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "InputMono"; - src: url("../fonts/InputMono-Bold.woff2") format("woff2"), - url("../fonts/InputMono-Bold.woff") format("woff"); - font-weight: bold; - font-style: normal; -} - -@font-face { - font-family: "InputMono"; - src: url("../fonts/InputMono-BoldItalic.woff2") format("woff2"), - url("../fonts/InputMono-BoldItalic.woff") format("woff"); - font-weight: bold; - font-style: italic; -} - -@font-face { - font-family: "InputMono"; - src: url("../fonts/InputMono-Italic.woff2") format("woff2"), - url("../fonts/InputMono-Italic.woff") format("woff"); - font-weight: normal; - font-style: italic; -} - -*, *:before, *:after { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font: inherit; - vertical-align: baseline; -} - -html, -body { - background-color: #252423; - color: #F6F4F2; -} - -body { - font-family: Roobert, Helvetica Neue, Helvetica, Arial, sans-serif; - font-weight: 400; - font-feature-settings:"tnum" 1, "ss03" 1; - -webkit-font-smoothing: antialiased; -} - -h1, h2 { - font-weight: 600; -} - -input { - font-family: Roobert, Helvetica Neue, Helvetica, Arial, sans-serif; - font-variant-numeric: tabular-nums; -} - -sup { - vertical-align: super; - font-size: .625em; -} - -strong { - font-weight: 600; -} - -.color-white { color: #F6F4F2; } /* White */ -.color-black { color: #2E2C2C; } /* Black */ -.color-red, .color-targets { color: #FF4B4B; }/* red: */ -.color-orange, .color-properties { color: #FF8F42; }/* orange: */ -.color-lightorange, .color-prop-params { color: #FFC730; }/* lightorange: */ -.color-yellow, .color-anim-params { color: #F6FF56; }/* yellow: */ -.color-citrus, .color-values { color: #A4FF4F; }/* citrus: */ -.color-green, .color-keyframes { color: #18FF74; }/* green: */ -.color-darkgreen, .color-staggering { color: #00D672; }/* darkgreen: */ -.color-turquoise, .color-tl { color: #3CFFEC; }/* turquoise: */ -.color-skyblue, .color-controls { color: #61C3FF; }/* skyblue: */ -.color-kingblue, .color-callbacks { color: #5A87FF; }/* kingblue: */ -.color-lavender, .color-svg { color: #8453E3; }/* lavender: */ -.color-purple, .color-easings { color: #C26EFF; }/* purple: */ -.color-pink, .color-helpers { color: #FB89FB; }/* pink: */ - -.anime-mini-logo { - width: 100px; - height: 24px; - transform: scaleY(.5); -} \ No newline at end of file diff --git a/js/anime-master/documentation/assets/css/documentation.css b/js/anime-master/documentation/assets/css/documentation.css deleted file mode 100644 index fd46c4a..0000000 --- a/js/anime-master/documentation/assets/css/documentation.css +++ /dev/null @@ -1,748 +0,0 @@ -html, -body, -header { - background-color: #252423; -} - -body { - position: absolute; - width: 100%; - height: 100%; - color: white; - font-variant-numeric: tabular-nums; - -webkit-font-smoothing: antialiased; - overflow-x: hidden; -} - -.content { - overflow: hidden; - opacity: 0; - display: flex; - flex-direction: row; - width: 100%; - height: 100%; - transition: opacity 1s ease; -} - -.ready .content { - opacity: 1; -} - -/* Headers */ - -.header { - position: absolute; - z-index: 1; - top: 0; - width: 100%; -} - -.logo { - display: flex; - justify-content: space-between; - opacity: .8; - width: 100%; - height: 20px; - text-decoration: none; - color: currentColor; -} - -.logo:visited { - color: currentColor; -} - -.logo svg { - width: 100%; - height: 100%; -} - -.logo:hover { - opacity: 1; -} - -.version-number { - opacity: .6; - color: currentColor; -} - -header { - position: sticky; - top: 0; - z-index: 2; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 60px; - padding-left: 20px; - padding-right: 20px; - border-bottom: 1px solid rgba(0,0,0,.65); -} - -h2 { - font-size: 16px; - letter-spacing: 1px; - text-transform: uppercase; - font-weight: 200; -} - -/* Panes */ - -.pane { - position: relative; - height: 100%; -} - -/* Sidebar */ - -.sidebar { - display: flex; - flex-direction: column; - width: 240px; - padding-top: 60px; - border-right: 1px solid rgba(0,0,0,.65); -} - -.sidebar-info { - display: flex; - justify-content: space-between; - padding: 20px; -} - -.navigation { - overflow-y: auto; - width: 100%; - height: 100%; - padding: 10px 0 20px 20px; -} - -.navigation ul { - height: 30px; - overflow-y: hidden; - -webkit-transition:opacity .4s ease; - transition: opacity .4s ease; -} - -.navigation ul li { - position: relative; -} - -.navigation ul li:before { - content: ""; - display: block; - position: absolute; - top: 4px; - left: 2px; - width: 1px; - height: calc(100% - 8px); - background-color: white; -} - -.navigation ul li:first-child:before { - display: none; -} - -.navigation a { - display: block; - padding-left: 10px; - color: white; - text-decoration: none; - font-size: 14px; - line-height: 20px; - letter-spacing: .5px; - text-transform: uppercase; -} - -.navigation ul li:first-child a { - padding-left: 0; - padding-top: 10px; - padding-bottom: 10px; -} - -.navigation ul li a, -.navigation ul li:before { - opacity: .4; -} - -.navigation ul li a { - transition: opacity .4s ease, color .4s ease; -} - -.navigation ul.active a { - opacity: .7; -} - -.navigation ul li:hover a, -.navigation ul li:hover:before { - transition: none; - opacity: 1; -} - -.navigation ul li.active a, -.navigation ul li.active:before { - opacity: 1; - color: currentColor; -} - -.navigation ul li.active:before { - background-color: currentColor; -} - -.navigation ul.active li:first-child a, -.navigation ul.active li:first-child a:hover { - opacity: 1; - color: currentColor; -} - -/* Info pane */ - -.demo-info { - flex-direction: column; - font-size: 16px; - line-height: 22px; -} - -.info-output { - overflow-x: hidden; - overflow-y: auto; - position: relative; - top: 0; - width: 100%; - height: calc(100% - 60px); - padding: 20px; -} - -.demo-info pre { - font-variant-ligatures: none; - -webkit-font-variant-ligatures: none; -} - -.demo-info code { - font-family: "Input Mono Reg", monospace; - font-size: 14px; - line-height: 22px; - white-space: pre-wrap; -} - -.demo-info p { - margin-bottom: 20px; -} - -.demo-info p, -.demo-info td { - color: #F6F4F2; -} - -.demo-info i { - font-style: italic; -} - -.demo-info a { - text-decoration: none; - border-bottom: 1px dotted currentColor; - word-wrap: break-word; - overflow-wrap: break-word; -} - -.demo-info a:hover { - border-bottom: 1px solid currentColor; -} - -.demo-info a[href^="http"], -.demo-info a[href^="http"]:visited { - color: #F6F4F2; -} - -.demo-info p.bubble { - display: inline-block; - position: relative; - padding: 8px 12px; -} - -.demo-info p.bubble.warning { - color: #FBF38C; -} - -.demo-info p.bubble.info { - color: #61C3FF; -} - -.demo-info p.bubble:after { - content: ""; - pointer-events: none; - color: currentColor; - display: inline-block; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: currentColor; - border-radius: 3px; - opacity: .05; -} - -.demo-info code.hljs { - display: inline-block; -} - -.demo-info pre { - margin-bottom: 20px; -} - -.demo-info pre code { - position: relative; - display: inline-block; - width: 100%; - padding: 8px 12px; - background-color: rgba(0,0,0,.2); - border: 1px solid rgba(0,0,0,.2); - border-radius: 3px; -} - -.demo-info p code { - position: relative; - padding: 0 2px; - height: 20px; - background-color: rgba(0,0,0,.2); - box-shadow: inset 0 0 1px rgba(0,0,0,.4); - border-radius: 3px; -} - -.demo-info table { - margin-bottom: 20px; - border: 1px solid rgba(255,255,255,.15); - border-spacing: 0; - border-radius: 3px; -} - -.demo-info td { - vertical-align: middle; - padding: 8px 12px; - border-left: 1px solid rgba(255,255,255,.15); - border-top: 1px solid rgba(255,255,255,.15); -} - -.demo-info thead td { - text-transform: uppercase; - font-size: 16px; - line-height: 22px; - letter-spacing: 1px; - color: rgba(255,255,255,.4); - border-top: none; -} - -.demo-info td:first-child { - border-left: none; -} - -.code-preview { - width: 100%; - padding-top: 40px; -} - -.code-preview h2 { - margin-bottom: 20px; -} - -/* Demos */ - -.demos { - overflow-y: scroll; - width: calc(50% - 240px); - min-width: 330px; -} - -article { - width: 100%; - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: flex-start; - justify-content: flex-start; -} - -.demo { - position: relative; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - min-height: 200px; - padding-top: 35px; - border-bottom: 1px solid rgba(0,0,0,.65); - cursor: pointer; -} - -.demo-description { - display: none; -} - -.demo.controls { - padding-top: 50px; -} - -.demo.active.controls { - cursor: default; -} - -.demo:before { - content: ""; - position: absolute; - z-index: 0; - top: 0; - left: 0; - opacity: 0; - display: block; - width: 100%; - height: 100%; - background-color: currentColor; -} - -.demo.active:before { - opacity: .05; -} - -.demo-content { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - width: 290px; - height: 100%; -} - -.demo-content.vertical { - flex-direction: row; -} - -.demo-title { - position: absolute; - top: 0; - left: 20px; - width: calc(100% - 40px); - padding: 23px 0; - font-size: 14px; - letter-spacing: 2px; - text-transform: uppercase; - color: #F6F4F2; - opacity: .9; -} - -.active .demo-title { - color: currentColor; - opacity: 1; -} - -.line { - width: 100%; - padding: 1px 0px; -} - -.line.align-center { - display: flex; - justify-content: center; -} - -.grid { - display: flex; - flex-wrap: wrap; -} - -.controls { - opacity: .4; - display: flex; - align-items: center; - justify-content: center; - padding-top: 20px; - padding-bottom: 10px; -} - -.controls button { - position: relative; - display: block; - margin: 0 0 0 -1px; - padding: 5px 10px; - font-size: 14px; - text-transform: uppercase; - border: 1px solid currentColor; - background-color: transparent; - color: currentColor; -} - -.controls button:focus { - outline: none; -} - -.active .controls { - opacity: 1; -} - -.active .controls button:after { - content: ''; - opacity: 0; - position: absolute; - left: 0; - top: 0; - display: block; - width: 100%; - height: 100%; - background-color: currentColor; -} - -.active .controls button:hover:after { - opacity: .2; -} - -.controls button.is-active:after, -.controls button.is-active:hover:after { - opacity: .4; -} - -.controls button:first-child { - margin-left: 0; -} - -.controls input { - margin-left: 10px; -} - -.text-output { - padding-top: 10px; - padding-bottom: 10px; - font-size: 16px; - color: currentColor; - text-align: center; - background-color: transparent; - border: 1px solid currentColor; -} - -.log { - width: 100%; - height: 100%; - background: transparent; - color: currentColor; - border: none; - font-size: 16px; - text-align: center; -} - -.bottom.log { - padding-top: 10px; - padding-bottom: 10px; -} - -.logs { - pointer-events: none; - display: flex; - flex-direction: column; - align-items: center; - position: absolute; - width: 100%; - height: auto; -} - -.log:focus { - outline: none; -} - -input.progress { - cursor: ew-resize; -} - -input.progress[value] { - position: relative; - width: 100%; - height: 27px; - -webkit-appearance: none; - background-color: transparent; - color: currentColor; -} - -input.progress[value]:focus { - outline: none; -} - -input.progress[value]:after { - content: ""; - position: absolute; - top: 13px; - left: 0; - width: 100%; - height: 1px; - background-color: currentColor; -} - -input.progress[value]::-webkit-slider-thumb { - -webkit-appearance: none; - background-color: currentColor; - border-radius: 50%; - width: 16px; - height: 16px; -} - -.square, -.circle { - pointer-events: none; - position: relative; - width: 28px; - height: 28px; - margin: 1px; - background-color: currentColor; - font-size: 14px; -} - -.circle { - border-radius: 50%; -} - -.square.outline, -.circle.outline { - background-color: transparent; - border: 1px solid currentColor; -} - -.triangle { - pointer-events: none; - position: relative; - width: 0; - height: 0; - border-style: solid; - border-width: 0 14px 24px 14px; - border-color: transparent transparent currentColor transparent; -} - -.small { - width: 18px; - height: 18px; -} - -.small.triangle { - border-width: 0 10px 17px 10px; -} - -.large { - width: 48px; - height: 48px; -} - -.stretched { - height: 2px; -} - -.shadow { - position: absolute; - opacity: .2; -} - -.label { - position: absolute; - opacity: 0; - display: flex; - flex-direction: column; - justify-content: center; - text-align: left; - width: 100%; - height: auto; - padding-left: 38px; - transition: opacity .5s ease; - white-space: nowrap -} - -.demo.active .label { - opacity: .2; -} - -.small.label { - height: 18px; - padding-left: 28px; -} - -.large.label { - height: 48px; - padding-left: 58px; -} - -.motion-path { - position: relative; - width: 256px; - margin: auto; -} - -.follow-path { - position: absolute; - top: -9px; - left: -9px; -} - -.align-center { - align-items: center; -} - -.add-states-demo .el { - border: 1px solid rgba(0,0,0,0); -} - -#cssProperties .el { - transform: translate3d(0,0,0); -} - -/* Responsive */ - -.sidebar, -.demo-info { - display: none; -} - -.demos { - top: 60px; - width: 100%; - min-width: auto; - height: calc(100% - 60px); - -webkit-overflow-scrolling: touch; -} - -@media (min-width: 800px) { - .header { - width: 239px; - } - .demo-info { - display: inherit; - width: calc(100% - 380px); - } - .demos { - top: 0; - width: 380px; - height: 100%; - } - .demos::-webkit-scrollbar { - width: 1px; - background-color: transparent; - } - - .demos::-webkit-scrollbar-track { - background-color: rgba(0,0,0,.65); - } - - .demos::-webkit-scrollbar-thumb { - background-color: rgba(255,255,255,.3); - } - - .demos::-webkit-scrollbar-thumb:hover { - background-color: rgba(255,255,255,.6); - } -} - -@media (min-width: 1100px) { - .sidebar { - display: inherit; - } - .demos { - width: calc(50% - 240px); - } - .demo-info { - width: 50%; - } -} diff --git a/js/anime-master/documentation/assets/css/website.css b/js/anime-master/documentation/assets/css/website.css deleted file mode 100644 index be7e3fa..0000000 --- a/js/anime-master/documentation/assets/css/website.css +++ /dev/null @@ -1,1061 +0,0 @@ -/* Typography */ - -body { - line-height: 1.333333333; -} - -body { - font-size: 17px; - line-height: 1.3; -} - -@media (min-width: 740px) { - body { - font-size: 18px; - } -} - -a { - color: inherit; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -a:visited { - color: inherit; -} - -.primary, -a.primary { - color: #F64E4D; -} - -.arrow { - position: relative; - display: inline-block; - transition: transform .25s ease; -} - -.arrow:before { - pointer-events: none; - content: "→"; - opacity: 0; - position: absolute; - top: 0; - left: 0; - display: block; - transform: translateX(-1.5em) translateZ(0); - transition: transform .25s ease, opacity .25s ease; -} - -a:hover .arrow, -.arrow:hover { - transform: translateX(1em) translateZ(0); -} - -a:hover .arrow:before, -.arrow:hover:before { - transform: translateX(-1em) translateZ(0); - opacity: 1; -} - -/* Layout */ - -.section { - display: flex; - width: 100%; -} - -.inverted-section { - background-color: #F6F4F2; - color: #2E2C2C; -} - -.grid-container { - display: flex; - flex-direction: column; - grid-column-gap: 16px; - grid-row-gap: 0px; - width: 100%; - max-width: 1198px; - margin-left: auto; - margin-right: auto; - padding-left: 24px; - padding-right: 24px; -} - -@media (min-width: 500px) { - .grid-container { - grid-column-gap: 24px; - padding-left: 24px; - padding-right: 24px; - } -} - -@media (min-width: 740px) { - .grid-container { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-column-gap: 48px; - padding-left: 48px; - padding-right: 48px; - } -} - -/* Header */ - -.header { - margin-top: 16px; -} - -.nav-bar-content { - display: flex; - flex-shrink: 0; - grid-column: 1/13; - justify-content: space-between; - flex-direction: row; - align-items: center; -} - -.header .nav-bar-content { - height: 48px; -} - -.nav-bar { - display: flex; - justify-content: flex-end; -} - -.nav-bar a { - display: inline-flex; - align-items: center; - font-size: 16px; - font-weight: 600; - line-height: 1; -} - -a.main-cta { - color: #2E2C2C; - display: inline-flex; - align-items: baseline; - height: 32px; - padding-left: 12px; - padding-right: 12px; - border-radius: 16px; - line-height: 2; - background-color: #F64E4D; - transition: transform .25s ease; -} - -.nav-bar a:not(:first-child) { - margin-left: 12px; -} - -.nav-bar .nav-link { - display: none; -} - -@media (min-width: 600px) { - .nav-bar .nav-link { - display: inline-flex; - } -} - -a.main-cta:hover { - transform: scale(1.08); - text-decoration: none; -} - -/* Logo */ - -.main-logo { - position: relative; - display: flex; - flex-direction: column; - width: 100px; - height: 12px; -} - -.logo-animation-wrapper { - position: relative; - width: 100%; - padding-bottom: 13%; -} - -.logo-animation { - pointer-events: none; - overflow: visible; - display: flex; - flex-shrink: 0; - flex-direction: column; - justify-content: center; - align-items: center; - position: absolute; - top: 50%; - left: 50%; - width: 1000px; - height: 240px; - margin: -120px 0 0 -500px; - transform: scale(.633333); -} - -.anime-logo { - overflow: visible; - position: relative; - display: flex; - flex-direction: column; - width: 1000px; - height: 120px; -} - -.anime-logo-signs { - overflow: visible; - display: flex; - align-items: flex-end; - position: relative; - width: 100%; - height: 512px; - margin-top: -352px; -} - -.logo-letter { - display: flex; - align-items: flex-end; - overflow: hidden; - height: 100%; -} - -.bounced { - transform-origin: 50% 100% 0px; - transform: translateY(200px) scaleX(.55) scaleY(.8); -} - -.logo-animation .bounce { - overflow: visible; - position: absolute; - left: 0; - bottom: 70px; - /*stroke: red;*/ -} - -.logo-animation .dot { - opacity: 0.001; - position: absolute; - z-index: 10; - top: 0; - left: 0; - width: 40px; - height: 40px; - margin: -20px 0 0 -20px; - background-color: currentColor; - transform: translate3d(0,0,0); -} - -.logo-animation .logo-letter svg { - overflow: visible; - fill: none; - fill-rule: evenodd; -} - -.logo-animation .line { - fill: none; - fill-rule: evenodd; - stroke-linecap: square; - stroke-width: 40; - stroke: currentColor; -} - -.logo-animation .fill { - opacity: .001; - stroke: currentColor; - stroke-width: 40px; -} - -.logo-text { - opacity: .001; - margin-top: .25em; - font-weight: 400; - font-size: 11px; - line-height: 1; - letter-spacing: .125em; - text-align: justify; - word-break: keep-all; -} - -.logo-text:after { - content: ""; - display: inline-block; - width: 100%; - height: 0; - font-size: 0; - line-height: 0; -} - -/* Features */ - -.feature-section { - overflow: hidden; - display: flex; - flex-direction: column; - align-items: center; - padding-top: 96px; - padding-bottom: 96px; - transition: opacity .25s ease; -} - -@media (min-width: 740px) { - .feature-section { - padding-top: 112px; - padding-bottom: 112px; - } -} - -.feature-description { - grid-column: 1/13; - z-index: 1; -} - -.feature-description:not(:last-child) { - margin-bottom: 48px; -} - -.feature-description-icons { - margin-bottom: 32px; - width: 100%; - max-width: 350px; -} - -@media (min-width: 740px) { - .feature-description-grid { - position: relative; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - } - .feature-description-icons { - width: 50%; - margin-bottom: 0; - padding-right: 48px; - } - .feature-description-text { - display: flex; - flex-direction: column; - justify-content: space-between; - position: relative; - width: 50%; - padding-left: 48px; - } - .feature-description-text:before { - content: ""; - opacity: .5; - position: absolute; - top: 4px; - left: 0; - bottom: 2px; - display: block; - border-left: 1px solid currentColor; - } -} - -.feature-title { - font-size: 40px; - line-height: 1; - letter-spacing: -.025em; -} - -.feature-subtitle { - opacity: .7; - font-size: 24px; - line-height: 1; - letter-spacing: -.025em; -} - -.feature-title:not(:last-child) { - margin-bottom: 8px; -} - -.feature-paragraph:not(:last-child) { - margin-bottom: 24px; -} - -@media (min-width: 740px) { - .feature-description-grid .feature-description { - width: calc(50% - 16px); - } - .feature-description:not(:last-child) { - margin-bottom: 96px; - } - .feature-title { - font-size: 64px; - } - .feature-subtitle { - font-size: 32px; - } - .feature-title:not(:last-child) { - margin-bottom: 8px; - } - .feature-paragraph:not(:last-child) { - margin-bottom: 24px; - } -} - -@media (min-width: 1024px) { - .feature-description { - grid-column: 3/11; - } -} - -.feature-animation { - grid-column: 1/13; - position: relative; - width: 100%; - margin-left: auto; - margin-right: auto; - margin-bottom: 48px; - padding-bottom: 50%; -} - -.square-animation { - margin-top: -20px; - margin-bottom: 20px; - padding-bottom: 100%; -} - -@media (min-width: 740px) { - .feature-animation { - padding-bottom: 50%; - margin-bottom: 96px; - } - .square-animation { - margin-top: -70px; - margin-bottom: 20px; - padding-bottom: 100%; - } -} - -@media (min-width: 1024px) { - .feature-animation { - grid-column: 2/12; - } - .large-grid .feature-animation { - grid-column: 1/13; - } -} - -.feature-icons-container { - display: flex; - flex-wrap: wrap; -} - -.feature-icon img { - width: 48px; - height: 48px; - transition: transform .65s ease; -} - -a.feature-icon:hover img { - transform: translateY(-8px); - transition: transform .225s ease; -} - -.feature-caption { - font-family: "InputMono", "Courier New", Courier, monospace; - font-weight: bold; - font-size: 12px; -} - -.vertical-icons .feature-icon { - display: flex; - align-items: center; - width: 50%; - margin-left: -6px; -} - -.horizontal-icons { - justify-content: space-between; -} - -.horizontal-icons .feature-icon { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.horizontal-icons .feature-icon:not(:first-child) { - margin-left: 16px; -} - -.horizontal-icons figcaption { - text-align: center; -} - -/** Intro **/ - -.top-header a, -.secondary-menu a, -.section-intro .feature-description-text { - opacity: .001; -} - -.section-intro { - padding-top: 48px; -} - -@media (min-width: 500px) { - .section-intro { - padding-top: 80px; - } -} - -.easing-visualizer { - position: absolute; - top: 50%; - left: 50%; - display: flex; - align-items: center; - justify-content: space-between; - width: 910px; - height: 455px; - margin: -227px 0 0 -455px; -} - -.easing-visualizer .wrapper { - position: absolute; - bottom: 0; - display: flex; - align-items: center; - /*justify-content: space-between;*/ - width: 100%; - height: 100%; -} - -.bars-wrapper, -.dots-wrapper { - transform: translateZ(0); -} - -.easing-visualizer .bar { - width: 10px; - height: 10px; - margin: 0; - background-image: linear-gradient(180deg, #373734 0%, #242423 52%, #0D0D0C 100%); - transform: scale(0); - transform-origin: 50% 50%; -} - -.easing-visualizer .dot { - position: relative; - width: 10px; - height: 10px; - margin: 0; - background-color: currentColor; - transform: scale(0); - border-radius: 50%; -} - -/** Staggering **/ - -.section-feature-staggering .feature-animation { - margin-top: -16px; - padding-bottom: calc(50% - 16px); -} - -@media (min-width: 740px) { - .section-feature-staggering .feature-animation { - margin-top: -32px; - padding-bottom: calc(50% - 16px); - } -} - -.stagger-visualizer { - position: absolute; - width: 1100px; - height: 550px; - transform-origin: left top; -} - -.stagger-visualizer .dots-wrapper { - transform: translateZ(0); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; -} - -.stagger-visualizer .dot { - position: relative; - z-index: 1; - width: 23px; - height: 23px; - margin: 16px; - background-color: currentColor; - border-radius: 50%; -} - -@media (min-width: 740px) { - .stagger-visualizer .dot { - background-color: transparent; - background-image: linear-gradient(180deg, #FFFFFF 8%, #D3CDC6 100%); - } -} - -.stagger-visualizer .cursor { - position: absolute; - top: 0px; - left: 0px; - width: 37px; - height: 37px; - margin: 9px; - background-color: currentColor; - border-radius: 50%; -} - -/** Time control **/ - -.section-feature-control { - overflow-x: hidden; -} - -.section-feature-control .feature-animation { - height: 410px; - margin-bottom: 16px; - padding: 0px; -} - -.time-control { - position: absolute; - left: 50%; - top: 50%; - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - align-items: center; - width: 1082px; - height: 342px; - margin-left: -541px; - margin-top: -171px; - font-size: 18px; -} - -.time-control .ruller { - position: absolute; - width: 100%; - top: 0; - display: flex; - justify-content: space-between; - padding: 0 1px; -} - -.time-control .line { - width: 1px; - height: 12px; - background-color: currentColor; -} - -.time-control .line:nth-child(9n+2) { - height: 20px; -} - -.time-control .line:nth-child(90n+2) { - height: 32px; -} - -.time-control .line:not(:last-child) { - margin-right: 3px; -} - -.time-cursor { - position: absolute; - z-index: 2; - top: -29px; - left: -22px; - width: 48px; - height: 48px; - background-image: linear-gradient(-180deg, #FFFFFF 3%, #DBD6D0 100%); - border-radius: 50%; - cursor: grab; -} - -.time-cursor:active { - cursor: grabbing; -} - -.time-cursor input { - pointer-events: none; - position: relative; - z-index: 1; - width: 48px; - height: 48px; - color: currentColor; - font-weight: 600; - background-color: transparent; - border-radius: 50%; - text-align: center; - font-size: 15px; - transform: translateZ(0); -} - -.time-cursor:before { - content: ""; - position: absolute; - top: 53px; - left: 23px; - display: block; - width: 1px; - height: 250px; - background-color: #F64E4D; -} - -.timeline { - position: relative; - width: 1082px; - z-index: 1; - overflow: visible; - display: flex; - justify-content: space-between; - height: 8px; -} - -.animation { - position: relative; - overflow: visible; - display: flex; -} - -.animation-band { - position: relative; - height: 16px; - margin: 0 1px; - border-radius: 8px; -} - -.timeline-icon { - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: 16px; -} - -.section-feature-control .vertical-icons .timeline-icon { - margin-left: 0; - margin-right: 16px; - width: auto; -} - -@media (min-width: 740px) { - .section-feature-control .vertical-icons { - display: flex; - flex-direction: column; - } - .section-feature-control .vertical-icons .timeline-icon { - margin-left: 0; - width: 100%; - } -} - -.timeline-icon .animation-band { - width: 24px; - height: 24px; - border-radius: 12px; - margin-right: 8px; -} - -.animation-delay { - background-color: currentColor; - width: 66px; -} -.animation-change { - background-image: linear-gradient(-180deg, #FFFFFF 3%, #DBD6D0 100%); - width: 207px; -} -.animation-end-delay { - background-color: #F64E4D; - width: 66px; -} - -.info { - position: relative; - display: flex; - flex-direction: column; - width: 1px; - height: 48px; -} - -.info:not(:first-child) { - margin-left: 2px; -} - -.info:not(:last-child) { - margin-right: 2px; -} - -.info + .info { margin-left: -3px; } - -.info-large { height: 96px; } - -.info-top { - bottom: 0; - justify-content: flex-start; - align-items: flex-end; - align-self: flex-end; -} - -.info-bottom { - top: 8px; - justify-content: flex-end; -} - -.info-bar { - position: absolute; - width: 1px; - height: 100%; - background-color: currentColor; - transform-origin: 50% 100%; -} - -.info-top .info-bar { bottom: 0; } -.info-bottom .info-bar { top: 0; transform-origin: 50% 0%; } -.info-left .info-bar { left: 0; } -.info-right .info-bar { right: 0; } - -.info .feature-caption { - opacity: .001; - white-space: nowrap; - height: 18px; - padding-left: 8px; - padding-right: 8px; - line-height: 18px; -} - -.info-top .feature-caption { - margin: -4px 0 0; -} - -.info-bottom .feature-caption { - margin: 0 0 -4px 0; -} - -/** Layered Animation **/ - -.layered-animations { - position: absolute; - top: 50%; - left: 50%; - display: flex; - align-items: center; - justify-content: center; - width: 1100px; - height: 550px; - margin: -275px 0 0 -550px; -} - -.layered-animations .shape { - position: absolute; - top: 50%; - overflow: visible; - width: 280px; - height: 280px; - margin-top: -140px; - stroke: transparent; - stroke-width: 1px; - fill: url(#shapesGradient); -} - -@media (min-width: 740px) { - .layered-animations .shape { - stroke-width: .5px; - } -} - -.layered-animations .small.shape { - width: 64px; - height: 64px; - margin-top: -32px; - stroke: currentColor; - fill: currentColor; -} - -.layered-animations .x-small.shape { - width: 32px; - height: 32px; - margin-top: -16px; - stroke: currentColor; - fill: currentColor; -} - -.transform-anim { - width: 100%; - height: 22px; -} - -.transform-anim:not(:last-child) { - margin-bottom: 11px; -} - -.transform-timeline { - width: 100%; - height: 2px; - margin-top: 7px; - background-color: rgba(255,255,255,.2); -} - -.transform-progress { - width: 100%; - height: 2px; - background-color: currentColor; -} - -/** Sphere **/ - -.sphere-animation { - position: absolute; - opacity: .001; - top: 50%; - left: 50%; - width: 580px; - height: 580px; - margin: -290px 0 0 -290px; -} - -.sphere path { - /*opacity: .001;*/ - fill: rgba(37,36,35,.5); - /*fill: linear-gradient(-180deg, #FFFFFF 0%, #F6F4F2 35%, #F6F4F2 69%, #DDDAD7 100%);*/ - fill: url(#sphereGradient); - stroke-width: 1px; - stroke: #FF4847; - backface-visibility: hidden; -} - -@media (min-width: 500px) { - .sphere path { - stroke-width: .4px; - } -} - -/** Getting started **/ - -.getting-started-blocks { - flex-wrap: wrap; - grid-column: 1/13; - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; -} - -.getting-started-block { - width: calc(50% - 16px); - margin-bottom: 48px; -} - -.getting-started-block:last-child { - display: none; -} - -.getting-statred-main-link { - display: flex; - flex-direction: column; - font-weight: 600; - font-size: 18px; -} - -.getting-statred-main-link span { - display: block; - margin-bottom: 24px; -} - -.getting-started-image { - width: 100%; - height: auto; - margin-bottom: 24px; -} - -@media (min-width: 400px) { - .getting-statred-main-link { - font-size: 24px; - } -} - -@media (min-width: 600px) { - .getting-started-block { - width: calc(33.33% - 24px); - } - .getting-started-block:last-child { - display: block; - } -} - -@media (min-width: 1024px) { - .getting-started-blocks { - grid-column: 2/12; - } - .getting-started-block { - width: calc(33.33% - 48px); - } -} - -.getting-statred-main-link:hover .getting-started-image { - color: #F64E4D; -} - -.getting-statred-main-link:hover, -.getting-statred-main-link:hover span.primary { - text-decoration: none; -} - -.getting-statred-links li { - list-style: none; - line-height: 1.5; -} - -/* Footer */ - -.footer { - padding-top: 16px; - margin-bottom: 32px; -} - -.footer-block { - display: flex; - justify-content: space-between; - align-items: flex-start; - width: 100%; - margin-top: 16px; - margin-bottom: 4px; -} - -.footer-text, -.footer-text a { - font-size: 12px; - font-weight: 400; -} - -.footer-separator { - display: inline-block; - margin-left: 4px; - margin-right: 4px; -} - -@media (min-width: 500px) { - .footer-block { - justify-content: flex-start; - margin-top: 4px; - margin-bottom: 16px; - } - - .footer-text, - .footer-text a { - font-size: 14px; - } -} \ No newline at end of file diff --git a/js/anime-master/documentation/assets/fonts/InputMono-Bold.woff b/js/anime-master/documentation/assets/fonts/InputMono-Bold.woff deleted file mode 100644 index 6a71a6f..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-Bold.woff and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/InputMono-Bold.woff2 b/js/anime-master/documentation/assets/fonts/InputMono-Bold.woff2 deleted file mode 100644 index 3d9a43e..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-Bold.woff2 and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/InputMono-BoldItalic.woff b/js/anime-master/documentation/assets/fonts/InputMono-BoldItalic.woff deleted file mode 100644 index 1e74128..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-BoldItalic.woff and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/InputMono-BoldItalic.woff2 b/js/anime-master/documentation/assets/fonts/InputMono-BoldItalic.woff2 deleted file mode 100644 index df2aaaa..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-BoldItalic.woff2 and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/InputMono-Italic.woff b/js/anime-master/documentation/assets/fonts/InputMono-Italic.woff deleted file mode 100644 index 72aafb7..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-Italic.woff and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/InputMono-Italic.woff2 b/js/anime-master/documentation/assets/fonts/InputMono-Italic.woff2 deleted file mode 100644 index fb1d217..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-Italic.woff2 and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/InputMono-Regular.woff b/js/anime-master/documentation/assets/fonts/InputMono-Regular.woff deleted file mode 100644 index 80406e7..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-Regular.woff and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/InputMono-Regular.woff2 b/js/anime-master/documentation/assets/fonts/InputMono-Regular.woff2 deleted file mode 100644 index 29e9a63..0000000 Binary files a/js/anime-master/documentation/assets/fonts/InputMono-Regular.woff2 and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/Roobert-Regular.woff b/js/anime-master/documentation/assets/fonts/Roobert-Regular.woff deleted file mode 100644 index a664323..0000000 Binary files a/js/anime-master/documentation/assets/fonts/Roobert-Regular.woff and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/Roobert-Regular.woff2 b/js/anime-master/documentation/assets/fonts/Roobert-Regular.woff2 deleted file mode 100644 index 4e54f12..0000000 Binary files a/js/anime-master/documentation/assets/fonts/Roobert-Regular.woff2 and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/Roobert-SemiBold.woff b/js/anime-master/documentation/assets/fonts/Roobert-SemiBold.woff deleted file mode 100644 index 997bf8d..0000000 Binary files a/js/anime-master/documentation/assets/fonts/Roobert-SemiBold.woff and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/Roobert-SemiBold.woff2 b/js/anime-master/documentation/assets/fonts/Roobert-SemiBold.woff2 deleted file mode 100644 index 977eb0b..0000000 Binary files a/js/anime-master/documentation/assets/fonts/Roobert-SemiBold.woff2 and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/Roobert-SemiBoldItalic.woff b/js/anime-master/documentation/assets/fonts/Roobert-SemiBoldItalic.woff deleted file mode 100644 index cd214a4..0000000 Binary files a/js/anime-master/documentation/assets/fonts/Roobert-SemiBoldItalic.woff and /dev/null differ diff --git a/js/anime-master/documentation/assets/fonts/Roobert-SemiBoldItalic.woff2 b/js/anime-master/documentation/assets/fonts/Roobert-SemiBoldItalic.woff2 deleted file mode 100644 index e70f37b..0000000 Binary files a/js/anime-master/documentation/assets/fonts/Roobert-SemiBoldItalic.woff2 and /dev/null differ diff --git a/js/anime-master/documentation/assets/img/anime-mini-logo.svg b/js/anime-master/documentation/assets/img/anime-mini-logo.svg deleted file mode 100644 index eb5e042..0000000 --- a/js/anime-master/documentation/assets/img/anime-mini-logo.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/js/anime-master/documentation/assets/img/animejs-v3-header-animation.gif b/js/anime-master/documentation/assets/img/animejs-v3-header-animation.gif deleted file mode 100644 index f1eaafa..0000000 Binary files a/js/anime-master/documentation/assets/img/animejs-v3-header-animation.gif and /dev/null differ diff --git a/js/anime-master/documentation/assets/img/animejs-v3-logo-animation.gif b/js/anime-master/documentation/assets/img/animejs-v3-logo-animation.gif deleted file mode 100644 index 4d79058..0000000 Binary files a/js/anime-master/documentation/assets/img/animejs-v3-logo-animation.gif and /dev/null differ diff --git a/js/anime-master/documentation/assets/img/animejs-v3-release.gif b/js/anime-master/documentation/assets/img/animejs-v3-release.gif deleted file mode 100644 index b7b596c..0000000 Binary files a/js/anime-master/documentation/assets/img/animejs-v3-release.gif and /dev/null differ diff --git a/js/anime-master/documentation/assets/img/apple-touch-icon.png b/js/anime-master/documentation/assets/img/apple-touch-icon.png deleted file mode 100644 index eb78ebf..0000000 Binary files a/js/anime-master/documentation/assets/img/apple-touch-icon.png and /dev/null differ diff --git a/js/anime-master/documentation/assets/img/favicon.png b/js/anime-master/documentation/assets/img/favicon.png deleted file mode 100644 index c33a3a1..0000000 Binary files a/js/anime-master/documentation/assets/img/favicon.png and /dev/null differ diff --git a/js/anime-master/documentation/assets/img/icons/icon-codepen.svg b/js/anime-master/documentation/assets/img/icons/icon-codepen.svg deleted file mode 100644 index 49ab05d..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-codepen.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-css.svg b/js/anime-master/documentation/assets/img/icons/icon-css.svg deleted file mode 100644 index bcbca4a..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-css.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-docs.svg b/js/anime-master/documentation/assets/img/icons/icon-docs.svg deleted file mode 100644 index 85498f5..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-docs.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-documentation.svg b/js/anime-master/documentation/assets/img/icons/icon-documentation.svg deleted file mode 100644 index 1430db5..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-documentation.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-download.svg b/js/anime-master/documentation/assets/img/icons/icon-download.svg deleted file mode 100644 index 3d74d4c..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-download.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-easing-cubic.svg b/js/anime-master/documentation/assets/img/icons/icon-easing-cubic.svg deleted file mode 100644 index b078105..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-easing-cubic.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-easing-elastic.svg b/js/anime-master/documentation/assets/img/icons/icon-easing-elastic.svg deleted file mode 100644 index 6ff9a80..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-easing-elastic.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-easing-spring.svg b/js/anime-master/documentation/assets/img/icons/icon-easing-spring.svg deleted file mode 100644 index 5054f35..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-easing-spring.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-easing-steps.svg b/js/anime-master/documentation/assets/img/icons/icon-easing-steps.svg deleted file mode 100644 index 20e5541..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-easing-steps.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-examples.svg b/js/anime-master/documentation/assets/img/icons/icon-examples.svg deleted file mode 100644 index 7bd1b3f..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-examples.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-github.svg b/js/anime-master/documentation/assets/img/icons/icon-github.svg deleted file mode 100644 index acaf475..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-github.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-html.svg b/js/anime-master/documentation/assets/img/icons/icon-html.svg deleted file mode 100644 index e8de125..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-html.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-js.svg b/js/anime-master/documentation/assets/img/icons/icon-js.svg deleted file mode 100644 index 8cc5c44..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-js.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-staggering-center.svg b/js/anime-master/documentation/assets/img/icons/icon-staggering-center.svg deleted file mode 100644 index 033de88..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-staggering-center.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-staggering-easing.svg b/js/anime-master/documentation/assets/img/icons/icon-staggering-easing.svg deleted file mode 100644 index bbc6084..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-staggering-easing.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-staggering-forward.svg b/js/anime-master/documentation/assets/img/icons/icon-staggering-forward.svg deleted file mode 100644 index 07f739e..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-staggering-forward.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-staggering-grid.svg b/js/anime-master/documentation/assets/img/icons/icon-staggering-grid.svg deleted file mode 100644 index fe271ca..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-staggering-grid.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-staggering-index.svg b/js/anime-master/documentation/assets/img/icons/icon-staggering-index.svg deleted file mode 100644 index b9bec8a..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-staggering-index.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-staggering-reverse.svg b/js/anime-master/documentation/assets/img/icons/icon-staggering-reverse.svg deleted file mode 100644 index db94692..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-staggering-reverse.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-svg.svg b/js/anime-master/documentation/assets/img/icons/icon-svg.svg deleted file mode 100644 index 63847b2..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-svg.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/js/anime-master/documentation/assets/img/icons/icon-twitter.svg b/js/anime-master/documentation/assets/img/icons/icon-twitter.svg deleted file mode 100644 index d28f5dd..0000000 --- a/js/anime-master/documentation/assets/img/icons/icon-twitter.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/js/anime-master/documentation/assets/img/social-media-image.png b/js/anime-master/documentation/assets/img/social-media-image.png deleted file mode 100644 index 2f7ee74..0000000 Binary files a/js/anime-master/documentation/assets/img/social-media-image.png and /dev/null differ diff --git a/js/anime-master/documentation/assets/js/anime.player.js b/js/anime-master/documentation/assets/js/anime.player.js deleted file mode 100644 index 8bab792..0000000 --- a/js/anime-master/documentation/assets/js/anime.player.js +++ /dev/null @@ -1,124 +0,0 @@ -import anime from '../../../src/index.js'; - -function animePlayer(instance, containerEl) { - - function createEl(type, className, parentEl) { - var el = document.createElement(type); - if (className) el.classList.add(className); - if (parentEl) parentEl.appendChild(el); - return el; - } - - function createButton(value, prentEl, action) { - var el = createEl('button', 'ap-button'); - if (parentEl) parentEl.appendChild(el); - if (action) el.addEventListener('click', action); - return el; - } - - var parentEl = containerEl || document.body; - var timelineEl = createEl('div', 'ap-timeline', parentEl); - var needleEl = createEl('div', 'ap-needle', timelineEl); - var animations = []; - var colors = ['#FF1461','#FF7C72','#FBF38C','#A6FF8F','#18FF92','#1CE2B2','#5EF3FB','#61C3FF','#5A87FF','#8453E3','#C26EFF','#FB89FB']; - var colorIndex = 0; - - anime.setValue(timelineEl, { - overflow: 'auto', - display: 'block', - position: 'absolute', - left: 0, - bottom: 0, - width: '100%', - height: '100%', - maxHeight: '50vh', - paddingTop: 4 - }); - - function convertMStoEM(ms) { return ms / 100; } - function convertEMtoMS(em) { return parseFloat(em) * 250; } - - function createAnimationLog(animObj, timelineOffset) { - var anim = animObj; - anim.player = {}; - anim.player.trackEl = createEl('div', 'ap-track', timelineEl); - anim.player.animationEl = createEl('div', 'ap-animation', anim.player.trackEl); - anim.player.delayEl = createEl('div', 'ap-delay', anim.player.animationEl); - anim.player.endDelayEl = createEl('div', 'ap-delay', anim.player.animationEl); - anime.setValue(anim.player.trackEl, { - position: 'relative', - width: '100%', - height: 4, - marginBottom: 2, - }); - anime.setValue(anim.player.animationEl, { - position: 'relative', - display: 'flex', - justifyContent: 'space-between', - width: 'auto', - height: '100%', - backgroundColor: 'currentColor', - borderRadius: '.5rem' - }); - anime.setValue([anim.player.delayEl, anim.player.endDelayEl], { - width: '100%', - height: '100%', - backgroundColor: 'rgba(0,0,0,.5)' - }); - anim.update = function() { - anime.setValue(anim.player.animationEl, { - left: convertMStoEM(timelineOffset) + 'em', - width: convertMStoEM(anim.duration) + 'em' - }); - anime.setValue(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'}); - anime.setValue(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'}); - } - anime.setValue(anim.player.animationEl, {color: colors[colorIndex]}); - colorIndex++; - if (!colors[colorIndex]) colorIndex = 0; - anim.update(); - animations.push(anim); - return anim; - } - - instance.pause(); - - var playerAnimation = anime({ - targets: needleEl, - translateX: convertMStoEM(instance.duration) + 'em', - duration: instance.duration, - direction: instance.direction, - loop: instance.loop, - easing: 'linear', - update: function(a) { - instance.seek(a.currentTime); - } - }); - - if (instance.children.length) { - instance.children.forEach(function(child) { - console.log(child.timelineOffset); - child.animations.forEach(function(anim) { - createAnimationLog(anim, child.timelineOffset); - }); - }) - } else { - instance.animations.forEach(function(anim) { - createAnimationLog(anim); - }); - } - - anime.setValue(needleEl, { - position: 'absolute', - zIndex: 2, - top: 0, - left: 0, - width: 2, - height: timelineEl.scrollHeight, - marginLeft: -1, - backgroundColor: '#FFF' - }); - -} - -export default animePlayer; \ No newline at end of file diff --git a/js/anime-master/documentation/assets/js/anime/anime.1.0.js b/js/anime-master/documentation/assets/js/anime/anime.1.0.js deleted file mode 100644 index 7ff5997..0000000 --- a/js/anime-master/documentation/assets/js/anime/anime.1.0.js +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Anime v1.0.0 - * https://animejs.com - * JavaScript animation engine - * Copyright (c) 2016 Julian Garnier - * http://juliangarnier.com - * Released under the MIT license - */ -(function(r,n){"function"===typeof define&&define.amd?define([],n):"object"===typeof module&&module.exports?module.exports=n():r.anime=n()})(this,function(){var r={duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},n="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),e=function(){return{array:function(a){return Array.isArray(a)},object:function(a){return-1< -Object.prototype.toString.call(a).indexOf("Object")},html:function(a){return a instanceof NodeList||a instanceof HTMLCollection},node:function(a){return a.nodeType},svg:function(a){return a instanceof SVGElement},number:function(a){return!isNaN(parseInt(a))},string:function(a){return"string"===typeof a},func:function(a){return"function"===typeof a},undef:function(a){return"undefined"===typeof a},"null":function(a){return"null"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)}, -rgb:function(a){return/^rgb/.test(a)},rgba:function(a){return/^rgba/.test(a)},hsl:function(a){return/^hsl/.test(a)},color:function(a){return e.hex(a)||e.rgb(a)||e.rgba(a)||e.hsl(a)}}}(),z=function(){var a={},b={Sine:function(a){return 1-Math.cos(a*Math.PI/2)},Circ:function(a){return 1-Math.sqrt(1-a*a)},Elastic:function(a,b){if(0===a||1===a)return a;var f=1-Math.min(b,998)/1E3,h=a/1-1;return-(Math.pow(2,10*h)*Math.sin(2*(h-f/(2*Math.PI)*Math.asin(1))*Math.PI/f))},Back:function(a){return a*a*(3*a-2)}, -Bounce:function(a){for(var b,f=4;a<((b=Math.pow(2,--f))-1)/11;);return 1/Math.pow(4,3-f)-7.5625*Math.pow((3*b-2)/22-a,2)}};["Quad","Cubic","Quart","Quint","Expo"].forEach(function(a,d){b[a]=function(a){return Math.pow(a,d+2)}});Object.keys(b).forEach(function(c){var d=b[c];a["easeIn"+c]=d;a["easeOut"+c]=function(a,b){return 1-d(1-a,b)};a["easeInOut"+c]=function(a,b){return.5>a?d(2*a,b)/2:1-d(-2*a+2,b)/2}});a.linear=function(a){return a};return a}(),u=function(a){return e.string(a)?a:a+""},A=function(a){return a.replace(/([a-z])([A-Z])/g, -"$1-$2").toLowerCase()},B=function(a){if(e.color(a))return!1;try{return document.querySelectorAll(a)}catch(b){return!1}},v=function(a){return a.reduce(function(a,c){return a.concat(e.array(c)?v(c):c)},[])},p=function(a){if(e.array(a))return a;e.string(a)&&(a=B(a)||a);return e.html(a)?[].slice.call(a):[a]},C=function(a,b){return a.some(function(a){return a===b})},N=function(a,b){var c={};a.forEach(function(a){var f=JSON.stringify(b.map(function(b){return a[b]}));c[f]=c[f]||[];c[f].push(a)});return Object.keys(c).map(function(a){return c[a]})}, -D=function(a){return a.filter(function(a,c,d){return d.indexOf(a)===c})},w=function(a){var b={},c;for(c in a)b[c]=a[c];return b},t=function(a,b){for(var c in b)a[c]=e.undef(a[c])?b[c]:a[c];return a},O=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,e){return b+b+c+c+e+e});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"},P=function(a){a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a); -var b=parseInt(a[1])/360,c=parseInt(a[2])/100,d=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=d=b=d;else var f=.5>d?d*(1+c):d+c-d*c,h=2*d-f,c=a(h,f,b+1/3),d=a(h,f,b),b=a(h,f,b-1/3);return"rgb("+255*c+","+255*d+","+255*b+")"},k=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},E=function(a,b,c){return k(b)?b:-1=a.delay&&(a.begin(b),a.begin=void 0);c.current>=b.duration?(a.loop?(c.start=+new Date,"alternate"===a.direction&&y(b,!0),e.number(a.loop)&& -a.loop--,c.raf=requestAnimationFrame(c.tick)):(b.ended=!0,a.complete&&a.complete(b),b.pause()),c.last=0):c.raf=requestAnimationFrame(c.tick)}}};b.seek=function(a){L(b,a/100*b.duration)};b.pause=function(){b.running=!1;cancelAnimationFrame(c.raf);X(b);var a=m.indexOf(b);-1a?d(2*a,b)/2:1-d(-2*a+2,b)/2};a["easeOutIn"+c]=function(a,b){return.5>a?(1-d(1-2*a,b))/2:(d(2*a-1,b)+1)/2}});a.linear=function(a){return a};return a}(),y=function(a){return f.str(a)?a:a+""},D=function(a){return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}, -E=function(a){if(f.col(a))return!1;try{return document.querySelectorAll(a)}catch(b){return!1}},z=function(a){return a.reduce(function(a,c){return a.concat(f.arr(c)?z(c):c)},[])},r=function(a){if(f.arr(a))return a;f.str(a)&&(a=E(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]},F=function(a,b){return a.some(function(a){return a===b})},Q=function(a,b){var c={};a.forEach(function(a){var d=JSON.stringify(b.map(function(b){return a[b]}));c[d]=c[d]||[];c[d].push(a)}); -return Object.keys(c).map(function(a){return c[a]})},G=function(a){return a.filter(function(a,c,d){return d.indexOf(a)===c})},A=function(a){var b={},c;for(c in a)b[c]=a[c];return b},u=function(a,b){for(var c in b)a[c]=f.und(a[c])?b[c]:a[c];return a},R=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,l){return b+b+c+c+l+l});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}, -S=function(a){a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);var b=parseInt(a[1])/360,c=parseInt(a[2])/100,d=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=d=b=d;else var e=.5>d?d*(1+c):d+c-d*c,h=2*d-e,c=a(h,e,b+1/3),d=a(h,e,b),b=a(h,e,b-1/3);return"rgb("+255*c+","+255*d+","+255*b+")"},p=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},H=function(a,b,c){return p(b)? -b:-1=b.delay&&(d.begin&&d.begin(b),d.begin=void 0,d.update&&d.update(b));c.current>=b.duration&&(d.loop?(c.start=a,"alternate"===d.direction&&B(b,!0),f.num(d.loop)&&d.loop--):(b.ended=!0,b.pause(),d.complete&&d.complete(b)),c.last=0)};b.seek=function(a){O(b,a/100*b.duration)};b.pause=function(){ba(b);var a=n.indexOf(b);-1< -a&&n.splice(a,1)};b.play=function(a){b.pause();a&&(b=u(P(u(a,b.settings)),b));c.start=0;c.last=b.ended?0:b.currentTime;a=b.settings;"reverse"===a.direction&&B(b);"alternate"!==a.direction||a.loop||(a.loop=1);aa(b);n.push(b);w||ea()};b.restart=function(){b.reversed&&B(b);b.pause();b.seek(0);b.play()};b.settings.autoplay&&b.play();return b};k.version="1.1.3";k.speed=1;k.list=n;k.remove=function(a){a=z(f.arr(a)?a.map(r):r(a));for(var b=n.length-1;0<=b;b--)for(var c=n[b],d=c.tweens,e=d.length-1;0<=e;e--)for(var h= -d[e].animatables,k=h.length-1;0<=k;k--)F(a,h[k].target)&&(h.splice(k,1),h.length||d.splice(e,1),d.length||c.pause())};k.easings=C;k.getValue=J;k.path=function(a){a=f.str(a)?E(a)[0]:a;return{path:a,value:a.getTotalLength()}};k.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return k}); diff --git a/js/anime-master/documentation/assets/js/anime/anime.2.0.0.js b/js/anime-master/documentation/assets/js/anime/anime.2.0.0.js deleted file mode 100644 index 15bddfd..0000000 --- a/js/anime-master/documentation/assets/js/anime/anime.2.0.0.js +++ /dev/null @@ -1,27 +0,0 @@ -/* - 2017 Julian Garnier - Released under the MIT license -*/ -var $jscomp$this=this; -(function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){function u(a){if(!h.col(a))try{return document.querySelectorAll(a)}catch(b){}}function r(a){return a.reduce(function(a,c){return a.concat(h.arr(c)?r(c):c)},[])}function v(a){if(h.arr(a))return a;h.str(a)&&(a=u(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function E(a,b){return a.some(function(a){return a===b})} -function z(a){var b={},c;for(c in a)b[c]=a[c];return b}function F(a,b){var c=z(a),d;for(d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function A(a,b){var c=z(a),d;for(d in b)c[d]=h.und(a[d])?b[d]:a[d];return c}function R(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,g){return b+b+c+c+g+g});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}function S(a){function b(a,b,c){0> -c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var c=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(c[1])/360;var d=parseInt(c[2])/100,c=parseInt(c[3])/100;if(0==d)d=c=a=c;else{var e=.5>c?c*(1+d):c+d-c*d,k=2*c-e,d=b(k,e,a+1/3),c=b(k,e,a);a=b(k,e,a-1/3)}return"rgb("+255*d+","+255*c+","+255*a+")"}function w(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function T(a){if(-1n&&q=m&&(f.began=!0,e("begin")),e("run")):(q<=n&&0!==O&&(d(0),p&&k()),q>=g&&O!==g&&(d(g),p||k()));a>=g&&(f.remaining?(t=h,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),P(),Q=b(),f.completed||(f.completed=!0,e("complete"))),l=0);if(f.children)for(a=f.children,g=0;g=b&&0<=d&&1>=d){var k=new Float32Array(11); -if(b!==c||d!==e)for(var g=0;11>g;++g)k[g]=a(.1*g,b,d);return function(g){if(b===c&&d===e)return g;if(0===g)return 0;if(1===g)return 1;for(var h=0,l=1;10!==l&&k[l]<=g;++l)h+=.1;--l;var l=h+(g-k[l])/(k[l+1]-k[l])*.1,n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(.001<=n){for(h=0;4>h;++h){n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(0===n)break;var m=a(l,b,d)-g,l=l-m/n}g=l}else if(0===n)g=l;else{var l=h,h=h+.1,f=0;do m=l+(h-l)/2,n=a(m,b,d)-g,0++f);g=m}return a(g,c,e)}}}}(), -M=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),c={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275], -function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},d={linear:x(.25,.25,.75,.75)},e={},k;for(k in c)e.type=k,c[e.type].forEach(function(a){return function(c,e){d["ease"+a.type+b[e]]=h.fnc(c)?c:x.apply($jscomp$this,c)}}(e)),e={type:e.type};return d}(),ha={css:function(a,b,c){return a.style[b]=c},attribute:function(a,b, -c){return a.setAttribute(b,c)},object:function(a,b,c){return a[b]=c},transform:function(a,b,c,d,e){d[e]||(d[e]=[]);d[e].push(b+"("+c+")")}},p=[],y=0,ia=function(){function a(){y=requestAnimationFrame(b)}function b(b){var c=p.length;if(c){for(var e=0;e -d&&(b.duration=a.duration);b.children.push(a)});return b};return b};m.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return m}); \ No newline at end of file diff --git a/js/anime-master/documentation/assets/js/anime/anime.2.0.1.js b/js/anime-master/documentation/assets/js/anime/anime.2.0.1.js deleted file mode 100644 index 5294577..0000000 --- a/js/anime-master/documentation/assets/js/anime/anime.2.0.1.js +++ /dev/null @@ -1,871 +0,0 @@ -/** - * https://animejs.com - * JavaScript animation engine - * @version v2.0.1 - * @author Julian Garnier - * @copyright ©2017 Julian Garnier - * Released under the MIT license -**/ - -(function(root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([], factory); - } else if (typeof module === 'object' && module.exports) { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(); - } else { - // Browser globals (root is window) - root.anime = factory(); - } -}(this, () => { - - // Defaults - - const defaultInstanceSettings = { - update: undefined, - begin: undefined, - run: undefined, - complete: undefined, - loop: 1, - direction: 'normal', - autoplay: true, - offset: 0 - } - - const defaultTweenSettings = { - duration: 1000, - delay: 0, - easing: 'easeOutElastic', - elasticity: 500, - round: 0 - } - - const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY']; - let transformString; - - // Utils - - function stringContains(str, text) { - return str.indexOf(text) > -1; - } - - const is = { - arr: a => Array.isArray(a), - obj: a => stringContains(Object.prototype.toString.call(a), 'Object'), - svg: a => a instanceof SVGElement, - dom: a => a.nodeType || is.svg(a), - str: a => typeof a === 'string', - fnc: a => typeof a === 'function', - und: a => typeof a === 'undefined', - hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a), - rgb: a => /^rgb/.test(a), - hsl: a => /^hsl/.test(a), - col: a => (is.hex(a) || is.rgb(a) || is.hsl(a)) - } - - // BezierEasing https://github.com/gre/bezier-easing - - const bezier = (() => { - - const kSplineTableSize = 11; - const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }; - function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }; - function C (aA1) { return 3.0 * aA1 }; - - function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }; - function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }; - - function binarySubdivide (aX, aA, aB, mX1, mX2) { - let currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT } else { aA = currentT }; - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { - for (let i = 0; i < 4; ++i) { - const currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) return aGuessT; - const currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) return; - let sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (let i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - let intervalStart = 0.0; - let currentSample = 1; - const lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - const guessForT = intervalStart + dist * kSampleStepSize; - const initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return x => { - if (mX1 === mY1 && mX2 === mY2) return x; - if (x === 0) return 0; - if (x === 1) return 1; - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - - })(); - - const easings = (() => { - - const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic']; - - // Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/ - - function elastic(t, p) { - return t === 0 || t === 1 ? t : - -Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2.0) * Math.asin(1))) * (Math.PI * 2)) / p ); - } - - // Approximated Penner equations http://matthewlein.com/ceaser/ - - const equations = { - In: [ - [0.550, 0.085, 0.680, 0.530], /* InQuad */ - [0.550, 0.055, 0.675, 0.190], /* InCubic */ - [0.895, 0.030, 0.685, 0.220], /* InQuart */ - [0.755, 0.050, 0.855, 0.060], /* InQuint */ - [0.470, 0.000, 0.745, 0.715], /* InSine */ - [0.950, 0.050, 0.795, 0.035], /* InExpo */ - [0.600, 0.040, 0.980, 0.335], /* InCirc */ - [0.600, -0.280, 0.735, 0.045], /* InBack */ - elastic /* InElastic */ - ], Out: [ - [0.250, 0.460, 0.450, 0.940], /* OutQuad */ - [0.215, 0.610, 0.355, 1.000], /* OutCubic */ - [0.165, 0.840, 0.440, 1.000], /* OutQuart */ - [0.230, 1.000, 0.320, 1.000], /* OutQuint */ - [0.390, 0.575, 0.565, 1.000], /* OutSine */ - [0.190, 1.000, 0.220, 1.000], /* OutExpo */ - [0.075, 0.820, 0.165, 1.000], /* OutCirc */ - [0.175, 0.885, 0.320, 1.275], /* OutBack */ - (t, f) => 1 - elastic(1 - t, f) /* OutElastic */ - ], InOut: [ - [0.455, 0.030, 0.515, 0.955], /* InOutQuad */ - [0.645, 0.045, 0.355, 1.000], /* InOutCubic */ - [0.770, 0.000, 0.175, 1.000], /* InOutQuart */ - [0.860, 0.000, 0.070, 1.000], /* InOutQuint */ - [0.445, 0.050, 0.550, 0.950], /* InOutSine */ - [1.000, 0.000, 0.000, 1.000], /* InOutExpo */ - [0.785, 0.135, 0.150, 0.860], /* InOutCirc */ - [0.680, -0.550, 0.265, 1.550], /* InOutBack */ - (t, f) => t < .5 ? elastic(t * 2, f) / 2 : 1 - elastic(t * -2 + 2, f) / 2 /* InOutElastic */ - ] - } - - let functions = { - linear: bezier(0.250, 0.250, 0.750, 0.750) - } - - for (let type in equations) { - equations[type].forEach((f, i) => { - functions['ease'+type+names[i]] = is.fnc(f) ? f : bezier.apply(this, f); - }); - } - - return functions; - - })(); - - // Strings - - function stringToHyphens(str) { - return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - } - - function selectString(str) { - if (is.col(str)) return; - try { - let nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } - } - - // Arrays - - function arrayLength(arr) { - return arr.length; - } - - function flattenArray(arr) { - return arr.reduce((a, b) => a.concat(is.arr(b) ? flattenArray(b) : b), []); - } - - function toArray(o) { - if (is.arr(o)) return o; - if (is.str(o)) o = selectString(o) || o; - if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o); - return [o]; - } - - function arrayContains(arr, val) { - return arr.some(a => a === val); - } - - // Objects - - function objectHas(obj, prop) { - return obj.hasOwnProperty(prop); - } - - function cloneObject(o) { - let clone = {}; - for (let p in o) clone[p] = o[p]; - return clone; - } - - function replaceObjectProps(o1, o2) { - let o = cloneObject(o1); - for (let p in o1) o[p] = objectHas(o2, p) ? o2[p] : o1[p]; - return o; - } - - function mergeObjects(o1, o2) { - let o = cloneObject(o1); - for (let p in o2) o[p] = is.und(o1[p]) ? o2[p] : o1[p]; - return o; - } - - // Colors - - function hexToRgb(hexValue) { - const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b ); - const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - const r = parseInt(rgb[1], 16); - const g = parseInt(rgb[2], 16); - const b = parseInt(rgb[3], 16); - return `rgb(${r},${g},${b})`; - } - - function hslToRgb(hslValue) { - const hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue); - const h = parseInt(hsl[1]) / 360; - const s = parseInt(hsl[2]) / 100; - const l = parseInt(hsl[3]) / 100; - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - let r, g, b; - if (s == 0) { - r = g = b = l; - } else { - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return `rgb(${r * 255},${g * 255},${b * 255})`; - } - - function colorToRgb(val) { - if (is.rgb(val)) return val; - if (is.hex(val)) return hexToRgb(val); - if (is.hsl(val)) return hslToRgb(val); - } - - // Units - - function getUnit(val) { - const split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(val); - if (split) return split[2]; - } - - function getTransformUnit(propName) { - if (stringContains(propName, 'translate')) return 'px'; - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) return 'deg'; - } - - // Values - - function parseFloatValue(val) { - return parseFloat(val); - } - - function minMaxValue(val, min, max) { - return Math.min(Math.max(val, min), max); - } - - function getFunctionValue(val, animatable) { - if (!is.fnc(val)) return val; - return val(animatable.target, animatable.id, animatable.total); - } - - function getCSSValue(el, prop) { - if (prop in el.style) { - return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0'; - } - } - - function getAnimationType(el, prop) { - if (is.dom(el) && arrayContains(validTransforms, prop)) return 'transform'; - if (is.dom(el) && (el.getAttribute(prop) || (is.svg(el) && el[prop]))) return 'attribute'; - if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) return 'css'; - if (el[prop] != null) return 'object'; - } - - function getTransformValue(el, propName) { - const defaultUnit = getTransformUnit(propName); - const defaultVal = stringContains(propName, 'scale') ? 1 : 0 + defaultUnit; - const str = el.style.transform; - if (!str) return defaultVal; - let match = []; - let props = []; - let values = []; - const rgx = /(\w+)\((.+?)\)/g; - while (match = rgx.exec(str)) { - props.push(match[1]); - values.push(match[2]); - } - const value = values.filter((val, i) => props[i] === propName ); - return arrayLength(value) ? value[0] : defaultVal; - } - - function getOriginalTargetValue(target, propName) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName); - case 'css': return getCSSValue(target, propName); - case 'attribute': return target.getAttribute(propName); - } - return target[propName] || 0; - } - - function getRelativeValue(to, from) { - const operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) return to; - const x = parseFloatValue(from); - const y = parseFloatValue(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y; - case '-': return x - y; - case '*': return x * y; - } - } - - function validateValue(val, unit) { - if (is.col(val)) return colorToRgb(val); - const originalUnit = getUnit(val); - const unitLess = originalUnit ? val.substr(0, arrayLength(val) - arrayLength(originalUnit)) : val; - return unit ? unitLess + unit : unitLess; - } - - // Motion path - - function isPath(val) { - return is.obj(val) && objectHas(val, 'totalLength'); - } - - function setDashoffset(el) { - const pathLength = el.getTotalLength(); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; - } - - function getPath(path, percent) { - const el = is.str(path) ? selectString(path)[0] : path; - const p = percent || 100; - return function(prop) { - return { - el: el, - property: prop, - totalLength: el.getTotalLength() * (p / 100) - } - } - } - - function getPathProgress(path, progress) { - function point(offset = 0) { - const l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - const p = point(); - const p0 = point(-1); - const p1 = point(+1); - switch (path.property) { - case 'x': return p.x; - case 'y': return p.y; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } - } - - // Decompose / recompose functions adapted from Animate Plus https://github.com/bendc/animateplus - - function decomposeValue(val, unit) { - const rgx = /-?\d*\.?\d+/g; - const value = validateValue((isPath(val) ? val.totalLength : val), unit) + ''; - return { - original: value, - numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: value.split(rgx) - } - } - - function recomposeValue(numbers, strings) { - return strings.reduce((a, b, i) => a + numbers[i - 1] + b); - } - - // Animatables - - function parseTargets(targets) { - const targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return targetsArray.filter((item, pos, self) => self.indexOf(item) === pos); - } - - function getAnimatables(targets) { - const parsed = parseTargets(targets); - return parsed.map((t, i) => { - return {target: t, id: i, total: arrayLength(parsed)}; - }); - } - - // Properties - - function normalizePropertyTweens(prop, tweenSettings) { - let settings = cloneObject(tweenSettings); - if (is.arr(prop)) { - const l = arrayLength(prop); - const isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) settings.duration = tweenSettings.duration / l; - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - return toArray(prop).map((v, i) => { - // Default delay value should be applied only on the first tween - const delay = !i ? tweenSettings.delay : 0; - // Use path object as a tween value - let obj = is.obj(v) && !isPath(v) ? v : {value: v}; - // Set default delay value - if (is.und(obj.delay)) obj.delay = delay; - return obj; - }).map(k => mergeObjects(k, settings)); - } - - function getProperties(instanceSettings, tweenSettings, params) { - let properties = []; - const settings = mergeObjects(instanceSettings, tweenSettings); - for (let p in params) { - if (!objectHas(settings, p) && p !== 'targets') { - properties.push({ - name: p, - offset: settings['offset'], - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; - } - - // Tweens - - function normalizeTweenValues(tween, animatable) { - let t = {}; - for (let p in tween) { - let value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(v => getFunctionValue(v, animatable)); - if (arrayLength(value) === 1) value = value[0]; - } - t[p] = value; - } - t.duration = parseFloatValue(t.duration); - t.delay = parseFloatValue(t.delay); - return t; - } - - function normalizeEasing(val) { - return is.arr(val) ? bezier.apply(this, val) : easings[val]; - } - - function normalizeTweens(prop, animatable) { - let previousTween; - return prop.tweens.map(t => { - let tween = normalizeTweenValues(t, animatable); - const tweenValue = tween.value; - const originalValue = getOriginalTargetValue(animatable.target, prop.name); - const previousValue = previousTween ? previousTween.to.original : originalValue; - const from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - const to = getRelativeValue(is.arr(tweenValue) ? tweenValue[1] : tweenValue, from); - const unit = getUnit(to) || getUnit(from) || getUnit(originalValue); - tween.isPath = isPath(tweenValue); - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(to, unit); - tween.start = previousTween ? previousTween.end : prop.offset; - tween.end = tween.start + tween.delay + tween.duration; - tween.easing = normalizeEasing(tween.easing); - tween.elasticity = (1000 - minMaxValue(tween.elasticity, 1, 999)) / 1000; - if (is.col(tween.from.original)) tween.round = 1; - previousTween = tween; - return tween; - }); - } - - // Tween progress - - const setTweenProgress = { - css: (t, p, v) => t.style[p] = v, - attribute: (t, p, v) => t.setAttribute(p, v), - object: (t, p, v) => t[p] = v, - transform: (t, p, v, transforms, id) => { - if (!transforms[id]) transforms[id] = []; - transforms[id].push(`${p}(${v})`); - } - } - - // Animations - - function createAnimation(animatable, prop) { - const animType = getAnimationType(animatable.target, prop.name); - if (animType) { - const tweens = normalizeTweens(prop, animatable); - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: tweens[arrayLength(tweens) - 1].end, - delay: tweens[0].delay - } - } - } - - function getAnimations(animatables, properties) { - return flattenArray(animatables.map(animatable => { - return properties.map(prop => { - return createAnimation(animatable, prop); - }); - })).filter(a => !is.und(a)); - } - - // Create Instance - - function getInstanceTimings(type, animations, tweenSettings) { - const math = (type === 'delay') ? Math.min : Math.max; - return arrayLength(animations) ? math.apply(Math, animations.map(anim => anim[type])) : tweenSettings[type]; - } - - function createNewInstance(params) { - const instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - const tweenSettings = replaceObjectProps(defaultTweenSettings, params); - const animatables = getAnimatables(params.targets); - const properties = getProperties(instanceSettings, tweenSettings, params); - const animations = getAnimations(animatables, properties); - return mergeObjects(instanceSettings, { - animatables: animatables, - animations: animations, - duration: getInstanceTimings('duration', animations, tweenSettings), - delay: getInstanceTimings('delay', animations, tweenSettings) - }); - } - - // Core - - let activeInstances = []; - let raf = 0; - - const engine = (() => { - function play() { raf = requestAnimationFrame(step); }; - function step(t) { - const activeLength = arrayLength(activeInstances); - if (activeLength) { - let i = 0; - while (i < activeLength) { - if (activeInstances[i]) activeInstances[i].tick(t); - i++; - } - play(); - } else { - cancelAnimationFrame(raf); - raf = 0; - } - } - return play; - })(); - - - // Public Instance - - function anime(params = {}) { - - let now, startTime, lastTime = 0; - - let resolve = null; - - function makePromise() { - return window.Promise && new Promise(_resolve => resolve = _resolve); - } - - let promise = makePromise(); - - let instance = createNewInstance(params); - - instance.reset = function() { - const direction = instance.direction; - const loops = instance.loop; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.completed = false; - instance.reversed = direction === 'reverse'; - instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops; - } - - function toggleInstanceDirection() { - instance.reversed = !instance.reversed; - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function syncInstanceChildren(insTime) { - const children = instance.children; - for (let i = 0; i < arrayLength(children); i++) children[i].seek(insTime); - } - - function setAnimationsProgress(insTime) { - let i = 0; - let transforms = {}; - const animations = instance.animations; - while (i < arrayLength(animations)) { - const anim = animations[i]; - const animatable = anim.animatable; - const tweens = anim.tweens; - const tween = tweens.filter(t => (insTime < t.end))[0] || tweens[arrayLength(tweens) - 1]; - const isPath = tween.isPath; - const round = tween.round; - const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - const eased = tween.easing(elapsed, tween.elasticity); - const progress = recomposeValue(tween.to.numbers.map((number, p) => { - const start = isPath ? 0 : tween.from.numbers[p]; - let value = start + eased * (number - start); - if (isPath) value = getPathProgress(tween.value, value); - if (round) value = Math.round(value * round) / round; - return value; - }), tween.to.strings); - setTweenProgress[anim.type](animatable.target, anim.property, progress, transforms, animatable.id); - anim.currentValue = progress; - i++; - } - if (transforms) { - let id; for (id in transforms) { - if (!transformString) { - const t = 'transform'; - transformString = (getCSSValue(document.body, t) ? t : `-webkit-${t}`); - } - instance.animatables[id].target.style[transformString] = transforms[id].join(' '); - } - } - instance.currentTime = insTime; - instance.progress = (insTime / instance.duration) * 100; - } - - function setCallback(cb) { - if (instance[cb]) instance[cb](instance); - } - - function countIteration() { - if (instance.remaining && instance.remaining !== true) { - instance.remaining--; - } - } - - function setInstanceProgress(engineTime) { - const insDuration = instance.duration; - const insOffset = instance.offset; - const insDelay = instance.delay; - const insCurrentTime = instance.currentTime; - const insReversed = instance.reversed; - const insTime = minMaxValue(adjustTime(engineTime), 0, insDuration); - if (insTime > insOffset && insTime < insDuration) { - setAnimationsProgress(insTime); - if (!instance.began && insTime >= insDelay) { - instance.began = true; - setCallback('begin'); - } - setCallback('run'); - } else { - if (insTime <= insOffset && insCurrentTime !== 0) { - setAnimationsProgress(0); - if (insReversed) countIteration(); - } - if (insTime >= insDuration && insCurrentTime !== insDuration) { - setAnimationsProgress(insDuration); - if (!insReversed) countIteration(); - } - } - if (engineTime >= insDuration) { - if (instance.remaining) { - startTime = now; - if (instance.direction === 'alternate') toggleInstanceDirection(); - } else { - instance.pause(); - resolve(); - promise = makePromise(); - if (!instance.completed) { - instance.completed = true; - setCallback('complete'); - } - } - lastTime = 0; - } - if (instance.children) syncInstanceChildren(insTime); - setCallback('update'); - } - - instance.tick = function(t) { - now = t; - if (!startTime) startTime = now; - const engineTime = (lastTime + now - startTime) * anime.speed; - setInstanceProgress(engineTime); - } - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time)); - } - - instance.pause = function() { - const i = activeInstances.indexOf(instance); - if (i > -1) activeInstances.splice(i, 1); - instance.paused = true; - } - - instance.play = function() { - if (!instance.paused) return; - instance.paused = false; - startTime = 0; - lastTime = instance.completed ? 0 : adjustTime(instance.currentTime); - activeInstances.push(instance); - if (!raf) engine(); - } - - instance.reverse = function() { - toggleInstanceDirection(); - startTime = 0; - lastTime = adjustTime(instance.currentTime); - } - - instance.restart = function() { - instance.pause(); - instance.reset(); - instance.play(); - } - - instance.finished = promise; - - instance.reset(); - - if (instance.autoplay) instance.play(); - - return instance; - - } - - // Remove targets from animation - - function removeTargets(targets) { - const targetsArray = parseTargets(targets); - for (let i = arrayLength(activeInstances)-1; i >= 0; i--) { - const instance = activeInstances[i]; - const animations = instance.animations; - for (let a = arrayLength(animations)-1; a >= 0; a--) { - if (arrayContains(targetsArray, animations[a].animatable.target)) { - animations.splice(a, 1); - if (!arrayLength(animations)) instance.pause(); - } - } - } - } - - // Timeline - - function timeline(params) { - let tl = anime(params); - tl.duration = 0; - tl.children = []; - tl.add = function(instancesParams) { - toArray(instancesParams).forEach(insParams => { - const offset = insParams.offset; - const tlDuration = tl.duration; - insParams.autoplay = false; - insParams.offset = is.und(offset) ? tlDuration : getRelativeValue(offset, tlDuration); - const ins = anime(insParams); - if (ins.duration > tlDuration) tl.duration = ins.duration; - tl.children.push(ins); - }); - return tl; - } - return tl; - } - - anime.version = '2.0.1'; - anime.speed = 1; - anime.running = activeInstances; - anime.remove = removeTargets; - anime.getValue = getOriginalTargetValue; - anime.path = getPath; - anime.setDashoffset = setDashoffset; - anime.bezier = bezier; - anime.easings = easings; - anime.timeline = timeline; - anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - - return anime; - -})); diff --git a/js/anime-master/documentation/assets/js/anime/anime.2.0.2.js b/js/anime-master/documentation/assets/js/anime/anime.2.0.2.js deleted file mode 100644 index 4aaaaf6..0000000 --- a/js/anime-master/documentation/assets/js/anime/anime.2.0.2.js +++ /dev/null @@ -1,875 +0,0 @@ -/** - * http://anime-js.com - * JavaScript animation engine - * @version v2.0.2 - * @author Julian Garnier - * @copyright ©2017 Julian Garnier - * Released under the MIT license -**/ - -(function(root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([], factory); - } else if (typeof module === 'object' && module.exports) { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(); - } else { - // Browser globals (root is window) - root.anime = factory(); - } -}(this, () => { - - // Defaults - - const defaultInstanceSettings = { - update: undefined, - begin: undefined, - run: undefined, - complete: undefined, - loop: 1, - direction: 'normal', - autoplay: true, - offset: 0 - } - - const defaultTweenSettings = { - duration: 1000, - delay: 0, - easing: 'easeOutElastic', - elasticity: 500, - round: 0 - } - - const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY']; - let transformString; - - // Utils - - function stringContains(str, text) { - return str.indexOf(text) > -1; - } - - const is = { - arr: a => Array.isArray(a), - obj: a => stringContains(Object.prototype.toString.call(a), 'Object'), - svg: a => a instanceof SVGElement, - dom: a => a.nodeType || is.svg(a), - str: a => typeof a === 'string', - fnc: a => typeof a === 'function', - und: a => typeof a === 'undefined', - hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a), - rgb: a => /^rgb/.test(a), - hsl: a => /^hsl/.test(a), - col: a => (is.hex(a) || is.rgb(a) || is.hsl(a)) - } - - // BezierEasing https://github.com/gre/bezier-easing - - const bezier = (() => { - - const kSplineTableSize = 11; - const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }; - function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }; - function C (aA1) { return 3.0 * aA1 }; - - function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }; - function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }; - - function binarySubdivide (aX, aA, aB, mX1, mX2) { - let currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT } else { aA = currentT }; - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { - for (let i = 0; i < 4; ++i) { - const currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) return aGuessT; - const currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) return; - let sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (let i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - let intervalStart = 0.0; - let currentSample = 1; - const lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - const guessForT = intervalStart + dist * kSampleStepSize; - const initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return x => { - if (mX1 === mY1 && mX2 === mY2) return x; - if (x === 0) return 0; - if (x === 1) return 1; - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - - })(); - - const easings = (() => { - - const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic']; - - // Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/ - - function elastic(t, p) { - return t === 0 || t === 1 ? t : - -Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2.0) * Math.asin(1))) * (Math.PI * 2)) / p ); - } - - // Approximated Penner equations http://matthewlein.com/ceaser/ - - const equations = { - In: [ - [0.550, 0.085, 0.680, 0.530], /* InQuad */ - [0.550, 0.055, 0.675, 0.190], /* InCubic */ - [0.895, 0.030, 0.685, 0.220], /* InQuart */ - [0.755, 0.050, 0.855, 0.060], /* InQuint */ - [0.470, 0.000, 0.745, 0.715], /* InSine */ - [0.950, 0.050, 0.795, 0.035], /* InExpo */ - [0.600, 0.040, 0.980, 0.335], /* InCirc */ - [0.600, -0.280, 0.735, 0.045], /* InBack */ - elastic /* InElastic */ - ], Out: [ - [0.250, 0.460, 0.450, 0.940], /* OutQuad */ - [0.215, 0.610, 0.355, 1.000], /* OutCubic */ - [0.165, 0.840, 0.440, 1.000], /* OutQuart */ - [0.230, 1.000, 0.320, 1.000], /* OutQuint */ - [0.390, 0.575, 0.565, 1.000], /* OutSine */ - [0.190, 1.000, 0.220, 1.000], /* OutExpo */ - [0.075, 0.820, 0.165, 1.000], /* OutCirc */ - [0.175, 0.885, 0.320, 1.275], /* OutBack */ - (t, f) => 1 - elastic(1 - t, f) /* OutElastic */ - ], InOut: [ - [0.455, 0.030, 0.515, 0.955], /* InOutQuad */ - [0.645, 0.045, 0.355, 1.000], /* InOutCubic */ - [0.770, 0.000, 0.175, 1.000], /* InOutQuart */ - [0.860, 0.000, 0.070, 1.000], /* InOutQuint */ - [0.445, 0.050, 0.550, 0.950], /* InOutSine */ - [1.000, 0.000, 0.000, 1.000], /* InOutExpo */ - [0.785, 0.135, 0.150, 0.860], /* InOutCirc */ - [0.680, -0.550, 0.265, 1.550], /* InOutBack */ - (t, f) => t < .5 ? elastic(t * 2, f) / 2 : 1 - elastic(t * -2 + 2, f) / 2 /* InOutElastic */ - ] - } - - let functions = { - linear: bezier(0.250, 0.250, 0.750, 0.750) - } - - for (let type in equations) { - equations[type].forEach((f, i) => { - functions['ease'+type+names[i]] = is.fnc(f) ? f : bezier.apply(this, f); - }); - } - - return functions; - - })(); - - // Strings - - function stringToHyphens(str) { - return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - } - - function selectString(str) { - if (is.col(str)) return; - try { - let nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } - } - - // Arrays - - function arrayLength(arr) { - return arr.length; - } - - function flattenArray(arr) { - return arr.reduce((a, b) => a.concat(is.arr(b) ? flattenArray(b) : b), []); - } - - function toArray(o) { - if (is.arr(o)) return o; - if (is.str(o)) o = selectString(o) || o; - if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o); - return [o]; - } - - // Objects - - function objectHas(obj, prop) { - return obj.hasOwnProperty(prop); - } - - function cloneObject(o) { - let clone = {}; - for (let p in o) clone[p] = o[p]; - return clone; - } - - function replaceObjectProps(o1, o2) { - let o = cloneObject(o1); - for (let p in o1) o[p] = objectHas(o2, p) ? o2[p] : o1[p]; - return o; - } - - function mergeObjects(o1, o2) { - let o = cloneObject(o1); - for (let p in o2) o[p] = is.und(o1[p]) ? o2[p] : o1[p]; - return o; - } - - // Colors - - function hexToRgb(hexValue) { - const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b ); - const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - const r = parseInt(rgb[1], 16); - const g = parseInt(rgb[2], 16); - const b = parseInt(rgb[3], 16); - return `rgb(${r},${g},${b})`; - } - - function hslToRgb(hslValue) { - const hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue); - const h = parseInt(hsl[1]) / 360; - const s = parseInt(hsl[2]) / 100; - const l = parseInt(hsl[3]) / 100; - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - let r, g, b; - if (s == 0) { - r = g = b = l; - } else { - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return `rgb(${r * 255},${g * 255},${b * 255})`; - } - - function colorToRgb(val) { - if (is.rgb(val)) return val; - if (is.hex(val)) return hexToRgb(val); - if (is.hsl(val)) return hslToRgb(val); - } - - // Units - - function getUnit(val) { - const split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(val); - if (split) return split[2]; - // if (split && split[2] && val.indexOf(split[2], arrayLength(val) - arrayLength(split[2])) !== -1) return split[2]; - } - - function getTransformUnit(propName) { - if (stringContains(propName, 'translate')) return 'px'; - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) return 'deg'; - } - - // Values - - function parseFloatValue(val) { - return parseFloat(val); - } - - function minMaxValue(val, min, max) { - return Math.min(Math.max(val, min), max); - } - - function getFunctionValue(val, animatable) { - if (!is.fnc(val)) return val; - return val(animatable.target, animatable.id, animatable.total); - } - - function getCSSValue(el, prop) { - if (prop in el.style) { - return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0'; - } - } - - function getAnimationType(el, prop) { - const isDom = is.dom(el); - if (isDom && validTransforms.some(a => a === prop)) return 'transform'; - if (isDom && (el.getAttribute(prop) || (is.svg(el) && el[prop]))) return 'attribute'; - if (isDom && (prop !== 'transform' && (prop in el.style))) return 'css'; - if (el[prop] != null) return 'object'; - } - - function getTransformValue(el, propName) { - const defaultUnit = getTransformUnit(propName); - const defaultVal = stringContains(propName, 'scale') ? 1 : 0 + defaultUnit; - const str = el.style.transform; - if (!str) return defaultVal; - let match = []; - let props = []; - let values = []; - const rgx = /(\w+)\((.+?)\)/g; - while (match = rgx.exec(str)) { - props.push(match[1]); - values.push(match[2]); - } - const value = values.filter((val, i) => props[i] === propName ); - return arrayLength(value) ? value[0] : defaultVal; - } - - function getOriginalTargetValue(target, propName) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName); - case 'css': return getCSSValue(target, propName); - case 'attribute': return target.getAttribute(propName); - } - return target[propName] || 0; - } - - function getRelativeValue(to, from) { - const operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) return to; - const x = parseFloatValue(from); - const y = parseFloatValue(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y; - case '-': return x - y; - case '*': return x * y; - } - } - - function validateValue(val, unit) { - if (is.col(val)) return colorToRgb(val); - return unit && !isNaN(val) ? val + unit : val; - } - - // Motion path - - function isPath(val) { - return is.obj(val) && objectHas(val, 'totalLength'); - } - - function setDashoffset(el) { - const pathLength = el.getTotalLength(); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; - } - - function getPath(path, percent) { - const el = is.str(path) ? selectString(path)[0] : path; - const p = percent || 100; - return function(prop) { - return { - el: el, - property: prop, - totalLength: el.getTotalLength() * (p / 100) - } - } - } - - function getPathProgress(path, progress) { - function point(offset = 0) { - const l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - const p = point(); - const p0 = point(-1); - const p1 = point(+1); - switch (path.property) { - case 'x': return p.x; - case 'y': return p.y; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } - } - - // Decompose / recompose functions adapted from Animate Plus https://github.com/bendc/animateplus - - function decomposeValue(val, unit) { - const rgx = /-?\d*\.?\d+/g; - const value = validateValue((isPath(val) ? val.totalLength : val), unit); - return { - original: value, - numbers: !is.str(value) ? [value] : value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: is.str(value) ? value.split(rgx) : [0, 0] - } - } - - function recomposeValue(numbers, strings) { - return strings.reduce((a, b, i) => a + numbers[i - 1] + b); - } - - // Animatables - - function parseTargets(targets) { - const targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return targetsArray.filter((item, pos, self) => self.indexOf(item) === pos); - } - - function getAnimatables(targets) { - const parsed = parseTargets(targets); - return parsed.map((t, i) => { - return {target: t, id: i, total: arrayLength(parsed)}; - }); - } - - // Properties - - function normalizePropertyTweens(prop, tweenSettings) { - let settings = cloneObject(tweenSettings); - if (is.arr(prop)) { - const l = arrayLength(prop); - const isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) settings.duration = tweenSettings.duration / l; - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - return toArray(prop).map((v, i) => { - // Default delay value should be applied only on the first tween - const delay = !i ? tweenSettings.delay : 0; - // Use path object as a tween value - let obj = is.obj(v) && !isPath(v) ? v : {value: v}; - // Set default delay value - if (is.und(obj.delay)) obj.delay = delay; - return obj; - }).map(k => mergeObjects(k, settings)); - } - - function getProperties(instanceSettings, tweenSettings, params) { - let properties = []; - const settings = mergeObjects(instanceSettings, tweenSettings); - for (let p in params) { - if (!objectHas(settings, p) && p !== 'targets') { - properties.push({ - name: p, - offset: settings['offset'], - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; - } - - // Tweens - - function normalizeTweenValues(tween, animatable) { - let t = {}; - for (let p in tween) { - let value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(v => getFunctionValue(v, animatable)); - if (arrayLength(value) === 1) value = value[0]; - } - t[p] = value; - } - t.duration = parseFloatValue(t.duration); - t.delay = parseFloatValue(t.delay); - return t; - } - - function normalizeEasing(val) { - return is.arr(val) ? bezier.apply(this, val) : easings[val]; - } - - function normalizeTweens(prop, animatable) { - let previousTween; - return prop.tweens.map(t => { - let tween = normalizeTweenValues(t, animatable); - const tweenValue = tween.value; - const originalValue = getOriginalTargetValue(animatable.target, prop.name); - const previousValue = previousTween ? previousTween.to.original : originalValue; - const from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - const to = getRelativeValue(is.arr(tweenValue) ? tweenValue[1] : tweenValue, from); - const unit = getUnit(to) || getUnit(from) || getUnit(originalValue); - tween.isPath = isPath(tweenValue); - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(to, unit); - tween.start = previousTween ? previousTween.end : prop.offset; - tween.end = tween.start + tween.delay + tween.duration; - tween.easing = normalizeEasing(tween.easing); - tween.elasticity = (1000 - minMaxValue(tween.elasticity, 1, 999)) / 1000; - if (is.col(tween.from.original)) tween.round = 1; - previousTween = tween; - return tween; - }); - } - - // Tween progress - - const setTweenProgress = { - css: (t, p, v) => t.style[p] = v, - attribute: (t, p, v) => t.setAttribute(p, v), - object: (t, p, v) => t[p] = v, - transform: (t, p, v, transforms, id) => { - if (!transforms[id]) transforms[id] = []; - transforms[id].push(`${p}(${v})`); - } - } - - // Animations - - function createAnimation(animatable, prop) { - const animType = getAnimationType(animatable.target, prop.name); - if (animType) { - const tweens = normalizeTweens(prop, animatable); - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: tweens[arrayLength(tweens) - 1].end, - delay: tweens[0].delay - } - } - } - - function getAnimations(animatables, properties) { - return flattenArray(animatables.map(animatable => { - return properties.map(prop => { - return createAnimation(animatable, prop); - }); - })).filter(a => !is.und(a)); - } - - // Create Instance - - function getInstanceTimings(type, animations, tweenSettings) { - const math = (type === 'delay') ? Math.min : Math.max; - return arrayLength(animations) ? math.apply(Math, animations.map(anim => anim[type])) : tweenSettings[type]; - } - - function createNewInstance(params) { - const instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - const tweenSettings = replaceObjectProps(defaultTweenSettings, params); - const animatables = getAnimatables(params.targets); - const properties = getProperties(instanceSettings, tweenSettings, params); - const animations = getAnimations(animatables, properties); - return mergeObjects(instanceSettings, { - animatables: animatables, - animations: animations, - duration: getInstanceTimings('duration', animations, tweenSettings), - delay: getInstanceTimings('delay', animations, tweenSettings) - }); - } - - // Core - - let activeInstances = []; - let raf = 0; - - const engine = (() => { - function play() { raf = requestAnimationFrame(step); }; - function step(t) { - const activeLength = arrayLength(activeInstances); - if (activeLength) { - let i = 0; - while (i < activeLength) { - if (activeInstances[i]) activeInstances[i].tick(t); - i++; - } - play(); - } else { - cancelAnimationFrame(raf); - raf = 0; - } - } - return play; - })(); - - - // Public Instance - - function anime(params = {}) { - - let now, startTime, lastTime = 0; - - let resolve = null; - - function makePromise() { - return window.Promise && new Promise(_resolve => resolve = _resolve); - } - - let promise = makePromise(); - - let instance = createNewInstance(params); - - instance.reset = function() { - const direction = instance.direction; - const loops = instance.loop; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.completed = false; - instance.reversed = direction === 'reverse'; - instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops; - } - - function toggleInstanceDirection() { - instance.reversed = !instance.reversed; - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function syncInstanceChildren(insTime) { - let i = 0; - const children = instance.children; - while (i < arrayLength(children)) { - children[i].seek(insTime); - i++; - } - } - - function setAnimationsProgress(insTime) { - let i = 0; - let transforms = {}; - const animations = instance.animations; - while (i < arrayLength(animations)) { - const anim = animations[i]; - const animatable = anim.animatable; - const tweens = anim.tweens; - const tween = tweens.filter(t => (insTime < t.end))[0] || tweens[arrayLength(tweens) - 1]; - const isPath = tween.isPath; - const round = tween.round; - const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - const eased = tween.easing(elapsed, tween.elasticity); - const progress = recomposeValue(tween.to.numbers.map((number, p) => { - const start = isPath ? 0 : tween.from.numbers[p]; - let value = start + eased * (number - start); - if (isPath) value = getPathProgress(tween.value, value); - if (round) value = Math.round(value * round) / round; - return value; - }), tween.to.strings); - setTweenProgress[anim.type](animatable.target, anim.property, progress, transforms, animatable.id); - anim.currentValue = progress; - i++; - } - if (transforms) { - let id; for (id in transforms) { - if (!transformString) { - const t = 'transform'; - transformString = (getCSSValue(document.body, t) ? t : `-webkit-${t}`); - } - instance.animatables[id].target.style[transformString] = transforms[id].join(' '); - } - } - instance.currentTime = insTime; - instance.progress = (insTime / instance.duration) * 100; - } - - function setCallback(cb) { - if (instance[cb]) instance[cb](instance); - } - - function setInstanceProgress(engineTime) { - const insDuration = instance.duration; - const insOffset = instance.offset; - const insDelay = instance.delay; - const insCurrentTime = instance.currentTime; - const insRemaining = instance.remaining; - const insReversed = instance.reversed; - const insTime = minMaxValue(adjustTime(engineTime), 0, insDuration); - if (insTime >= insOffset && insTime <= insDuration) { - setAnimationsProgress(insTime); - if (!instance.began && insTime >= insDelay) { - instance.began = true; - setCallback('begin'); - } - setCallback('run'); - } - if (insRemaining && insRemaining !== true) { - if ( - (insReversed && insTime === insOffset && insCurrentTime !== 0) || - (!insReversed && insTime === insDuration && insCurrentTime !== insDuration)) { - instance.remaining--; - } - } - if (engineTime >= insDuration) { - if (instance.remaining) { - startTime = now; - if (instance.direction === 'alternate') toggleInstanceDirection(); - } else { - instance.pause(); - resolve(); - promise = makePromise(); - if (!instance.completed) { - instance.completed = true; - setCallback('complete'); - } - } - lastTime = 0; - } - if (instance.children) syncInstanceChildren(insTime); - setCallback('update'); - } - - instance.tick = function(t) { - now = t; - if (!startTime) startTime = now; - const engineTime = (lastTime + now - startTime) * anime.speed; - setInstanceProgress(engineTime); - } - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time)); - } - - instance.pause = function() { - const i = activeInstances.indexOf(instance); - if (i > -1) activeInstances.splice(i, 1); - instance.paused = true; - } - - instance.play = function() { - if (!instance.paused) return; - instance.paused = false; - startTime = 0; - lastTime = instance.completed ? 0 : adjustTime(instance.currentTime); - activeInstances.push(instance); - if (!raf) engine(); - } - - instance.reverse = function() { - toggleInstanceDirection(); - startTime = 0; - lastTime = adjustTime(instance.currentTime); - } - - instance.restart = function() { - instance.pause(); - instance.reset(); - instance.play(); - } - - instance.finished = promise; - - instance.reset(); - - if (instance.autoplay) instance.play(); - - return instance; - - } - - // Remove targets from animation - - function removeTargets(targets) { - const targetsArray = parseTargets(targets); - for (let i = arrayLength(activeInstances)-1; i >= 0; i--) { - const instance = activeInstances[i]; - const animations = instance.animations; - for (let a = arrayLength(animations)-1; a >= 0; a--) { - if (targetsArray.some(t => t === animations[a].animatable.target)) { - animations.splice(a, 1); - if (!arrayLength(animations)) instance.pause(); - } - } - } - } - - // Timeline - - function timeline(params) { - let tl = anime(params); - tl.duration = 0; - tl.children = []; - tl.add = function(instancesParams) { - tl.children.forEach( i => { i.began = true; i.completed = true; }); - toArray(instancesParams).forEach(insParams => { - const tlDuration = tl.duration; - const insOffset = insParams.offset; - insParams.autoplay = false; - insParams.offset = is.und(insOffset) ? tlDuration : getRelativeValue(insOffset, tlDuration); - tl.seek(insParams.offset); - const ins = anime(insParams); - if (ins.duration > tlDuration) tl.duration = ins.duration; - ins.began = true; - tl.children.push(ins); - }); - tl.seek(0); - tl.reset(); - for (let i = tl.children.length; i--; ){ - const child = tl.children[i]; - child.seek(child.offset); - child.reset(); - } - if (tl.autoplay) tl.play(); - return tl; - } - return tl; - } - - anime.version = '2.0.2'; - anime.speed = 1; - anime.running = activeInstances; - anime.remove = removeTargets; - anime.getValue = getOriginalTargetValue; - anime.path = getPath; - anime.setDashoffset = setDashoffset; - anime.bezier = bezier; - anime.easings = easings; - anime.timeline = timeline; - anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - - return anime; - -})); \ No newline at end of file diff --git a/js/anime-master/documentation/assets/js/anime/anime.2.1.0.js b/js/anime-master/documentation/assets/js/anime/anime.2.1.0.js deleted file mode 100644 index 57c348f..0000000 --- a/js/anime-master/documentation/assets/js/anime/anime.2.1.0.js +++ /dev/null @@ -1,939 +0,0 @@ -/** - * https://animejs.com - * JavaScript animation engine - * @version v2.1.0 - * @author Julian Garnier - * @copyright ©2017 Julian Garnier - * Released under the MIT license -**/ - -(function(root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([], factory); - } else if (typeof module === 'object' && module.exports) { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(); - } else { - // Browser globals (root is window) - root.anime = factory(); - } -}(this, () => { - - // Defaults - - const defaultInstanceSettings = { - update: undefined, - begin: undefined, - run: undefined, - complete: undefined, - loop: 1, - direction: 'normal', - autoplay: true, - offset: 0 - } - - const defaultTweenSettings = { - duration: 1000, - delay: 0, - easing: 'easeOutElastic', - elasticity: 500, - round: 0 - } - - const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY', 'perspective']; - let transformString; - - // Utils - - function stringContains(str, text) { - return str.indexOf(text) > -1; - } - - const is = { - arr: a => Array.isArray(a), - obj: a => stringContains(Object.prototype.toString.call(a), 'Object'), - svg: a => a instanceof SVGElement, - dom: a => a.nodeType || is.svg(a), - str: a => typeof a === 'string', - fnc: a => typeof a === 'function', - und: a => typeof a === 'undefined', - hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a), - rgb: a => /^rgb/.test(a), - hsl: a => /^hsl/.test(a), - col: a => (is.hex(a) || is.rgb(a) || is.hsl(a)) - } - - // BezierEasing https://github.com/gre/bezier-easing - - const bezier = (() => { - - const kSplineTableSize = 11; - const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }; - function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }; - function C (aA1) { return 3.0 * aA1 }; - - function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }; - function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }; - - function binarySubdivide (aX, aA, aB, mX1, mX2) { - let currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT } else { aA = currentT }; - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { - for (let i = 0; i < 4; ++i) { - const currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) return aGuessT; - const currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) return; - let sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (let i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - let intervalStart = 0.0; - let currentSample = 1; - const lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - const guessForT = intervalStart + dist * kSampleStepSize; - const initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return x => { - if (mX1 === mY1 && mX2 === mY2) return x; - if (x === 0) return 0; - if (x === 1) return 1; - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - - })(); - - const easings = (() => { - - const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic']; - - // Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/ - - function elastic(t, p) { - return t === 0 || t === 1 ? t : - -Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2.0) * Math.asin(1))) * (Math.PI * 2)) / p ); - } - - // Approximated Penner equations http://matthewlein.com/ceaser/ - - const equations = { - In: [ - [0.550, 0.085, 0.680, 0.530], /* InQuad */ - [0.550, 0.055, 0.675, 0.190], /* InCubic */ - [0.895, 0.030, 0.685, 0.220], /* InQuart */ - [0.755, 0.050, 0.855, 0.060], /* InQuint */ - [0.470, 0.000, 0.745, 0.715], /* InSine */ - [0.950, 0.050, 0.795, 0.035], /* InExpo */ - [0.600, 0.040, 0.980, 0.335], /* InCirc */ - [0.600, -0.280, 0.735, 0.045], /* InBack */ - elastic /* InElastic */ - ], Out: [ - [0.250, 0.460, 0.450, 0.940], /* OutQuad */ - [0.215, 0.610, 0.355, 1.000], /* OutCubic */ - [0.165, 0.840, 0.440, 1.000], /* OutQuart */ - [0.230, 1.000, 0.320, 1.000], /* OutQuint */ - [0.390, 0.575, 0.565, 1.000], /* OutSine */ - [0.190, 1.000, 0.220, 1.000], /* OutExpo */ - [0.075, 0.820, 0.165, 1.000], /* OutCirc */ - [0.175, 0.885, 0.320, 1.275], /* OutBack */ - (t, f) => 1 - elastic(1 - t, f) /* OutElastic */ - ], InOut: [ - [0.455, 0.030, 0.515, 0.955], /* InOutQuad */ - [0.645, 0.045, 0.355, 1.000], /* InOutCubic */ - [0.770, 0.000, 0.175, 1.000], /* InOutQuart */ - [0.860, 0.000, 0.070, 1.000], /* InOutQuint */ - [0.445, 0.050, 0.550, 0.950], /* InOutSine */ - [1.000, 0.000, 0.000, 1.000], /* InOutExpo */ - [0.785, 0.135, 0.150, 0.860], /* InOutCirc */ - [0.680, -0.550, 0.265, 1.550], /* InOutBack */ - (t, f) => t < .5 ? elastic(t * 2, f) / 2 : 1 - elastic(t * -2 + 2, f) / 2 /* InOutElastic */ - ] - } - - let functions = { - linear: bezier(0.250, 0.250, 0.750, 0.750) - } - - for (let type in equations) { - equations[type].forEach((f, i) => { - functions['ease'+type+names[i]] = is.fnc(f) ? f : bezier.apply(this, f); - }); - } - - return functions; - - })(); - - // Strings - - function stringToHyphens(str) { - return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - } - - function selectString(str) { - if (is.col(str)) return; - try { - let nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } - } - - // Arrays - - function flattenArray(arr) { - return arr.reduce((a, b) => a.concat(is.arr(b) ? flattenArray(b) : b), []); - } - - function toArray(o) { - if (is.arr(o)) return o; - if (is.str(o)) o = selectString(o) || o; - if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o); - return [o]; - } - - function arrayContains(arr, val) { - return arr.some(a => a === val); - } - - // Objects - - function objectHas(obj, prop) { - return obj.hasOwnProperty(prop); - } - - function cloneObject(o) { - let clone = {}; - for (let p in o) clone[p] = o[p]; - return clone; - } - - function replaceObjectProps(o1, o2) { - let o = cloneObject(o1); - for (let p in o1) o[p] = objectHas(o2, p) ? o2[p] : o1[p]; - return o; - } - - function mergeObjects(o1, o2) { - let o = cloneObject(o1); - for (let p in o2) o[p] = is.und(o1[p]) ? o2[p] : o1[p]; - return o; - } - - // Colors - - function hexToRgb(hexValue) { - const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b ); - const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - const r = parseInt(rgb[1], 16); - const g = parseInt(rgb[2], 16); - const b = parseInt(rgb[3], 16); - return `rgb(${r},${g},${b})`; - } - - function hslToRgb(hslValue) { - const hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue); - const h = parseInt(hsl[1]) / 360; - const s = parseInt(hsl[2]) / 100; - const l = parseInt(hsl[3]) / 100; - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - let r, g, b; - if (s == 0) { - r = g = b = l; - } else { - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return `rgb(${r * 255},${g * 255},${b * 255})`; - } - - function colorToRgb(val) { - if (is.rgb(val)) return val; - if (is.hex(val)) return hexToRgb(val); - if (is.hsl(val)) return hslToRgb(val); - } - - // Units - - function getUnit(val) { - const split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val); - if (split) return split[2]; - } - - function getTransformUnit(propName) { - if (stringContains(propName, 'translate') || propName === 'perspective') return 'px'; - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) return 'deg'; - } - - // Values - - function minMaxValue(val, min, max) { - return Math.min(Math.max(val, min), max); - } - - function getFunctionValue(val, animatable) { - if (!is.fnc(val)) return val; - return val(animatable.target, animatable.id, animatable.total); - } - - function getCSSValue(el, prop) { - if (prop in el.style) { - return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0'; - } - } - - function getAnimationType(el, prop) { - if (is.dom(el) && arrayContains(validTransforms, prop)) return 'transform'; - if (is.dom(el) && (el.getAttribute(prop) || (is.svg(el) && el[prop]))) return 'attribute'; - if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) return 'css'; - if (el[prop] != null) return 'object'; - } - - function getTransformValue(el, propName) { - const defaultUnit = getTransformUnit(propName); - const defaultVal = stringContains(propName, 'scale') ? 1 : 0 + defaultUnit; - const str = el.style.transform; - if (!str) return defaultVal; - let match = []; - let props = []; - let values = []; - const rgx = /(\w+)\((.+?)\)/g; - while (match = rgx.exec(str)) { - props.push(match[1]); - values.push(match[2]); - } - const value = values.filter((val, i) => props[i] === propName ); - return value.length ? value[0] : defaultVal; - } - - function getOriginalTargetValue(target, propName) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName); - case 'css': return getCSSValue(target, propName); - case 'attribute': return target.getAttribute(propName); - } - return target[propName] || 0; - } - - function getRelativeValue(to, from) { - const operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) return to; - const u = getUnit(to) || 0; - const x = parseFloat(from); - const y = parseFloat(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y + u; - case '-': return x - y + u; - case '*': return x * y + u; - } - } - - function validateValue(val, unit) { - if (is.col(val)) return colorToRgb(val); - const originalUnit = getUnit(val); - const unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val; - return unit && !/\s/g.test(val) ? unitLess + unit : unitLess; - } - - // getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes. - // adapted from https://gist.github.com/SebLambla/3e0550c496c236709744 - - function getDistance(p1, p2) { - return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); - } - - function getCircleLength(el) { - return 2 * Math.PI * el.getAttribute('r'); - } - - function getRectLength(el) { - return (el.getAttribute('width') * 2) + (el.getAttribute('height') * 2); - } - - function getLineLength(el) { - return getDistance( - {x: el.getAttribute('x1'), y: el.getAttribute('y1')}, - {x: el.getAttribute('x2'), y: el.getAttribute('y2')} - ); - } - - function getPolylineLength(el) { - const points = el.points; - let totalLength = 0; - let previousPos; - for (let i = 0 ; i < points.numberOfItems; i++) { - const currentPos = points.getItem(i); - if (i > 0) totalLength += getDistance(previousPos, currentPos); - previousPos = currentPos; - } - return totalLength; - } - - function getPolygonLength(el) { - const points = el.points; - return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0)); - } - - // Path animation - - function getTotalLength(el) { - if (el.getTotalLength) return el.getTotalLength(); - switch(el.tagName.toLowerCase()) { - case 'circle': return getCircleLength(el); - case 'rect': return getRectLength(el); - case 'line': return getLineLength(el); - case 'polyline': return getPolylineLength(el); - case 'polygon': return getPolygonLength(el); - } - } - - function setDashoffset(el) { - const pathLength = getTotalLength(el); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; - } - - // Motion path - - function isPath(val) { - return is.obj(val) && objectHas(val, 'totalLength'); - } - - function getPath(path, percent) { - const el = is.str(path) ? selectString(path)[0] : path; - const p = percent || 100; - return function(prop) { - return { - el: el, - property: prop, - totalLength: getTotalLength(el) * (p / 100) - } - } - } - - function getPathProgress(path, progress) { - function point(offset = 0) { - const l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - const p = point(); - const p0 = point(-1); - const p1 = point(+1); - switch (path.property) { - case 'x': return p.x; - case 'y': return p.y; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } - } - - // Decompose / recompose functions adapted from Animate Plus https://github.com/bendc/animateplus - - function decomposeValue(val, unit) { - const rgx = /-?\d*\.?\d+/g; - const value = validateValue((isPath(val) ? val.totalLength : val), unit) + ''; - return { - original: value, - numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: (is.str(val) || unit) ? value.split(rgx) : [] - } - } - - function recomposeValue(numbers, strings) { - return (strings.length === 0) ? numbers[0] : strings.reduce((a, b, i) => a + numbers[i - 1] + (b ? b : ' ')); - } - - // Animatables - - function parseTargets(targets) { - const targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return targetsArray.filter((item, pos, self) => self.indexOf(item) === pos); - } - - function getAnimatables(targets) { - const parsed = parseTargets(targets); - return parsed.map((t, i) => { - return {target: t, id: i, total: parsed.length}; - }); - } - - // Properties - - function normalizePropertyTweens(prop, tweenSettings) { - let settings = cloneObject(tweenSettings); - if (is.arr(prop)) { - const l = prop.length; - const isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) settings.duration = tweenSettings.duration / l; - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - return toArray(prop).map((v, i) => { - // Default delay value should be applied only on the first tween - const delay = !i ? tweenSettings.delay : 0; - // Use path object as a tween value - let obj = is.obj(v) && !isPath(v) ? v : {value: v}; - // Set default delay value - if (is.und(obj.delay)) obj.delay = delay; - return obj; - }).map(k => mergeObjects(k, settings)); - } - - function getProperties(instanceSettings, tweenSettings, params) { - let properties = []; - const settings = mergeObjects(instanceSettings, tweenSettings); - for (let p in params) { - if (!objectHas(settings, p) && p !== 'targets') { - properties.push({ - name: p, - offset: settings['offset'], - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; - } - - // Tweens - - function normalizeTweenValues(tween, animatable) { - let t = {}; - for (let p in tween) { - let value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(v => getFunctionValue(v, animatable)); - if (value.length === 1) value = value[0]; - } - t[p] = value; - } - t.duration = parseFloat(t.duration); - t.delay = parseFloat(t.delay); - return t; - } - - function normalizeEasing(val) { - return is.arr(val) ? bezier.apply(this, val) : easings[val]; - } - - function normalizeTweens(prop, animatable) { - let previousTween; - return prop.tweens.map(t => { - let tween = normalizeTweenValues(t, animatable); - const tweenValue = tween.value; - const originalValue = getOriginalTargetValue(animatable.target, prop.name); - const previousValue = previousTween ? previousTween.to.original : originalValue; - const from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - const to = getRelativeValue(is.arr(tweenValue) ? tweenValue[1] : tweenValue, from); - const unit = getUnit(to) || getUnit(from) || getUnit(originalValue); - tween.isPath = isPath(tweenValue); - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(to, unit); - tween.start = previousTween ? previousTween.end : prop.offset; - tween.end = tween.start + tween.delay + tween.duration; - tween.easing = normalizeEasing(tween.easing); - tween.elasticity = (1000 - minMaxValue(tween.elasticity, 1, 999)) / 1000; - if (is.col(tween.from.original)) tween.round = 1; - previousTween = tween; - return tween; - }); - } - - // Tween progress - - const setTweenProgress = { - css: (t, p, v) => t.style[p] = v, - attribute: (t, p, v) => t.setAttribute(p, v), - object: (t, p, v) => t[p] = v, - transform: (t, p, v, transforms, id) => { - if (!transforms[id]) transforms[id] = []; - transforms[id].push(`${p}(${v})`); - } - } - - // Animations - - function createAnimation(animatable, prop) { - const animType = getAnimationType(animatable.target, prop.name); - if (animType) { - const tweens = normalizeTweens(prop, animatable); - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: tweens[tweens.length - 1].end, - delay: tweens[0].delay - } - } - } - - function getAnimations(animatables, properties) { - return flattenArray(animatables.map(animatable => { - return properties.map(prop => { - return createAnimation(animatable, prop); - }); - })).filter(a => !is.und(a)); - } - - // Create Instance - - function getInstanceTimings(type, animations, tweenSettings) { - const math = (type === 'delay') ? Math.min : Math.max; - return animations.length ? math.apply(Math, animations.map(anim => anim[type])) : tweenSettings[type]; - } - - function createNewInstance(params) { - const instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - const tweenSettings = replaceObjectProps(defaultTweenSettings, params); - const animatables = getAnimatables(params.targets); - const properties = getProperties(instanceSettings, tweenSettings, params); - const animations = getAnimations(animatables, properties); - return mergeObjects(instanceSettings, { - children: [], - animatables: animatables, - animations: animations, - duration: getInstanceTimings('duration', animations, tweenSettings), - delay: getInstanceTimings('delay', animations, tweenSettings) - }); - } - - // Core - - let activeInstances = []; - let raf = 0; - - const engine = (() => { - function play() { raf = requestAnimationFrame(step); }; - function step(t) { - const activeLength = activeInstances.length; - if (activeLength) { - let i = 0; - while (i < activeLength) { - if (activeInstances[i]) activeInstances[i].tick(t); - i++; - } - play(); - } else { - cancelAnimationFrame(raf); - raf = 0; - } - } - return play; - })(); - - - // Public Instance - - function anime(params = {}) { - - let now, startTime, lastTime = 0; - - let resolve = null; - - function makePromise() { - return window.Promise && new Promise(_resolve => resolve = _resolve); - } - - let promise = makePromise(); - - let instance = createNewInstance(params); - - function toggleInstanceDirection() { - instance.reversed = !instance.reversed; - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function syncInstanceChildren(time) { - const children = instance.children; - if (time >= instance.currentTime) { - for (let i = 0; i < children.length; i++) children[i].seek(time); - } else { - for (let i = children.length; i--;) children[i].seek(time); - } - } - - function setAnimationsProgress(insTime) { - let i = 0; - let transforms = {}; - const animations = instance.animations; - while (i < animations.length) { - const anim = animations[i]; - const animatable = anim.animatable; - const tweens = anim.tweens; - const tween = tweens.filter(t => (insTime < t.end))[0] || tweens[tweens.length - 1]; - const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed, tween.elasticity); - const round = tween.round; - const progress = recomposeValue(tween.to.numbers.map((number, p) => { - const start = tween.from.numbers[p]; - let value = start + eased * (number - start); - if (tween.isPath) value = getPathProgress(tween.value, value); - if (round) value = Math.round(value * round) / round; - return value; - }), tween.to.strings); - setTweenProgress[anim.type](animatable.target, anim.property, progress, transforms, animatable.id); - anim.currentValue = progress; - i++; - } - if (transforms) { - let id; for (id in transforms) { - if (!transformString) { - const t = 'transform'; - transformString = (getCSSValue(document.body, t) ? t : `-webkit-${t}`); - } - instance.animatables[id].target.style[transformString] = transforms[id].join(' '); - } - } - instance.currentTime = insTime; - instance.progress = (insTime / instance.duration) * 100; - } - - function setCallback(cb) { - if (instance[cb]) instance[cb](instance); - } - - function countIteration() { - if (instance.remaining && instance.remaining !== true) { - instance.remaining--; - } - } - - function setInstanceProgress(engineTime) { - const insDuration = instance.duration; - const insOffset = instance.offset; - const insDelay = instance.delay; - const insCurrentTime = instance.currentTime; - const insReversed = instance.reversed; - const insTime = adjustTime(engineTime); - if (instance.children.length) syncInstanceChildren(insTime); - if (insTime >= insDelay) { - setCallback('run'); - if (!instance.began) { - instance.began = true; - setCallback('begin'); - } - } - if (insTime > insOffset && insTime < insDuration) { - setAnimationsProgress(insTime); - } else { - if (insTime <= insOffset && insCurrentTime !== 0) { - setAnimationsProgress(0); - if (insReversed) countIteration(); - } - if (insTime >= insDuration && insCurrentTime !== insDuration) { - setAnimationsProgress(insDuration); - if (!insReversed) countIteration(); - } - } - setCallback('update'); - if (engineTime >= insDuration) { - if (instance.remaining) { - startTime = now; - if (instance.direction === 'alternate') toggleInstanceDirection(); - } else { - instance.pause(); - if (!instance.completed) { - instance.completed = true; - setCallback('complete'); - if ('Promise' in window) { - resolve(); - promise = makePromise(); - } - } - } - lastTime = 0; - } - } - - instance.reset = function() { - const direction = instance.direction; - const loops = instance.loop; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.completed = false; - instance.reversed = direction === 'reverse'; - instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops; - setAnimationsProgress(0); - for (let i = instance.children.length; i--; ){ - instance.children[i].reset(); - } - } - - instance.tick = function(t) { - now = t; - if (!startTime) startTime = now; - const engineTime = (lastTime + now - startTime) * anime.speed; - setInstanceProgress(engineTime); - } - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time)); - } - - instance.pause = function() { - const i = activeInstances.indexOf(instance); - if (i > -1) activeInstances.splice(i, 1); - instance.paused = true; - } - - instance.play = function() { - if (!instance.paused) return; - instance.paused = false; - startTime = 0; - lastTime = adjustTime(instance.currentTime); - activeInstances.push(instance); - if (!raf) engine(); - } - - instance.reverse = function() { - toggleInstanceDirection(); - startTime = 0; - lastTime = adjustTime(instance.currentTime); - } - - instance.restart = function() { - instance.pause(); - instance.reset(); - instance.play(); - } - - instance.finished = promise; - - instance.reset(); - - if (instance.autoplay) instance.play(); - - return instance; - - } - - // Remove targets from animation - - function removeTargets(targets) { - const targetsArray = parseTargets(targets); - for (let i = activeInstances.length; i--;) { - const instance = activeInstances[i]; - const animations = instance.animations; - for (let a = animations.length; a--;) { - if (arrayContains(targetsArray, animations[a].animatable.target)) { - animations.splice(a, 1); - if (!animations.length) instance.pause(); - } - } - } - } - - // Timeline - - function timeline(params) { - let tl = anime(params); - tl.pause(); - tl.duration = 0; - tl.add = function(instancesParams) { - tl.children.forEach(i => { i.began = true; i.completed = true; }); - toArray(instancesParams).forEach(instanceParams => { - let insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params || {})); - insParams.targets = insParams.targets || params.targets; - const tlDuration = tl.duration; - const insOffset = insParams.offset; - insParams.autoplay = false; - insParams.offset = is.und(insOffset) ? tlDuration : getRelativeValue(insOffset, tlDuration); - tl.began = true; - tl.completed = true; - tl.seek(insParams.offset); - const ins = anime(insParams); - ins.began = true; - ins.completed = true; - if (ins.duration > tlDuration) tl.duration = ins.duration; - tl.children.push(ins); - }); - tl.seek(0); - tl.reset(); - if (tl.autoplay) tl.restart(); - return tl; - } - return tl; - } - - anime.version = '2.1.0'; - anime.speed = 1; - anime.running = activeInstances; - anime.remove = removeTargets; - anime.getValue = getOriginalTargetValue; - anime.path = getPath; - anime.setDashoffset = setDashoffset; - anime.bezier = bezier; - anime.easings = easings; - anime.timeline = timeline; - anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - - return anime; - -})); diff --git a/js/anime-master/documentation/assets/js/anime/anime.2.2.0.js b/js/anime-master/documentation/assets/js/anime/anime.2.2.0.js deleted file mode 100644 index c2cac13..0000000 --- a/js/anime-master/documentation/assets/js/anime/anime.2.2.0.js +++ /dev/null @@ -1,994 +0,0 @@ -/** - * https://animejs.com - * JavaScript animation engine - * @version v2.2.0 - * @author Julian Garnier - * @copyright ©2017 Julian Garnier - * Released under the MIT license -**/ - -(function(root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([], factory); - } else if (typeof module === 'object' && module.exports) { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(); - } else { - // Browser globals (root is window) - root.anime = factory(); - } -}(this, () => { - - // Defaults - - const defaultInstanceSettings = { - update: undefined, - begin: undefined, - run: undefined, - complete: undefined, - loop: 1, - direction: 'normal', - autoplay: true, - offset: 0 - } - - const defaultTweenSettings = { - duration: 1000, - delay: 0, - easing: 'easeOutElastic', - elasticity: 500, - round: 0 - } - - const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY', 'perspective']; - let transformString; - - // Utils - - function stringContains(str, text) { - return str.indexOf(text) > -1; - } - - const is = { - arr: a => Array.isArray(a), - obj: a => stringContains(Object.prototype.toString.call(a), 'Object'), - pth: a => is.obj(a) && a.hasOwnProperty('totalLength'), - svg: a => a instanceof SVGElement, - dom: a => a.nodeType || is.svg(a), - str: a => typeof a === 'string', - fnc: a => typeof a === 'function', - und: a => typeof a === 'undefined', - hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a), - rgb: a => /^rgb/.test(a), - hsl: a => /^hsl/.test(a), - col: a => (is.hex(a) || is.rgb(a) || is.hsl(a)) - } - - // BezierEasing https://github.com/gre/bezier-easing - - const bezier = (() => { - - const kSplineTableSize = 11; - const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }; - function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }; - function C (aA1) { return 3.0 * aA1 }; - - function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }; - function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }; - - function binarySubdivide (aX, aA, aB, mX1, mX2) { - let currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT } else { aA = currentT }; - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { - for (let i = 0; i < 4; ++i) { - const currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) return aGuessT; - const currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) return; - let sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (let i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - let intervalStart = 0.0; - let currentSample = 1; - const lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - const guessForT = intervalStart + dist * kSampleStepSize; - const initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return x => { - if (mX1 === mY1 && mX2 === mY2) return x; - if (x === 0) return 0; - if (x === 1) return 1; - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - - })(); - - const easings = (() => { - - const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic']; - - // Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/ - - function elastic(t, p) { - return t === 0 || t === 1 ? t : - -Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2.0) * Math.asin(1))) * (Math.PI * 2)) / p ); - } - - // Approximated Penner equations http://matthewlein.com/ceaser/ - - const equations = { - In: [ - [0.550, 0.085, 0.680, 0.530], /* InQuad */ - [0.550, 0.055, 0.675, 0.190], /* InCubic */ - [0.895, 0.030, 0.685, 0.220], /* InQuart */ - [0.755, 0.050, 0.855, 0.060], /* InQuint */ - [0.470, 0.000, 0.745, 0.715], /* InSine */ - [0.950, 0.050, 0.795, 0.035], /* InExpo */ - [0.600, 0.040, 0.980, 0.335], /* InCirc */ - [0.600, -0.280, 0.735, 0.045], /* InBack */ - elastic /* InElastic */ - ], Out: [ - [0.250, 0.460, 0.450, 0.940], /* OutQuad */ - [0.215, 0.610, 0.355, 1.000], /* OutCubic */ - [0.165, 0.840, 0.440, 1.000], /* OutQuart */ - [0.230, 1.000, 0.320, 1.000], /* OutQuint */ - [0.390, 0.575, 0.565, 1.000], /* OutSine */ - [0.190, 1.000, 0.220, 1.000], /* OutExpo */ - [0.075, 0.820, 0.165, 1.000], /* OutCirc */ - [0.175, 0.885, 0.320, 1.275], /* OutBack */ - (t, f) => 1 - elastic(1 - t, f) /* OutElastic */ - ], InOut: [ - [0.455, 0.030, 0.515, 0.955], /* InOutQuad */ - [0.645, 0.045, 0.355, 1.000], /* InOutCubic */ - [0.770, 0.000, 0.175, 1.000], /* InOutQuart */ - [0.860, 0.000, 0.070, 1.000], /* InOutQuint */ - [0.445, 0.050, 0.550, 0.950], /* InOutSine */ - [1.000, 0.000, 0.000, 1.000], /* InOutExpo */ - [0.785, 0.135, 0.150, 0.860], /* InOutCirc */ - [0.680, -0.550, 0.265, 1.550], /* InOutBack */ - (t, f) => t < .5 ? elastic(t * 2, f) / 2 : 1 - elastic(t * -2 + 2, f) / 2 /* InOutElastic */ - ] - } - - let functions = { - linear: bezier(0.250, 0.250, 0.750, 0.750) - } - - for (let type in equations) { - equations[type].forEach((f, i) => { - functions['ease'+type+names[i]] = is.fnc(f) ? f : bezier.apply(this, f); - }); - } - - return functions; - - })(); - - // Strings - - function stringToHyphens(str) { - return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - } - - function selectString(str) { - if (is.col(str)) return; - try { - let nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } - } - - // Arrays - - function filterArray(arr, callback) { - const len = arr.length; - const thisArg = arguments.length >= 2 ? arguments[1] : void 0; - let result = []; - for (let i = 0; i < len; i++) { - if (i in arr) { - const val = arr[i]; - if (callback.call(thisArg, val, i, arr)) { - result.push(val); - } - } - } - return result; - } - - function flattenArray(arr) { - return arr.reduce((a, b) => a.concat(is.arr(b) ? flattenArray(b) : b), []); - } - - function toArray(o) { - if (is.arr(o)) return o; - if (is.str(o)) o = selectString(o) || o; - if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o); - return [o]; - } - - function arrayContains(arr, val) { - return arr.some(a => a === val); - } - - // Objects - - function cloneObject(o) { - let clone = {}; - for (let p in o) clone[p] = o[p]; - return clone; - } - - function replaceObjectProps(o1, o2) { - let o = cloneObject(o1); - for (let p in o1) o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; - return o; - } - - function mergeObjects(o1, o2) { - let o = cloneObject(o1); - for (let p in o2) o[p] = is.und(o1[p]) ? o2[p] : o1[p]; - return o; - } - - // Colors - - function rgbToRgba(rgbValue) { - const rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue); - return rgb ? `rgba(${rgb[1]},1)` : rgbValue; - } - - function hexToRgba(hexValue) { - const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b ); - const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - const r = parseInt(rgb[1], 16); - const g = parseInt(rgb[2], 16); - const b = parseInt(rgb[3], 16); - return `rgba(${r},${g},${b},1)`; - } - - function hslToRgba(hslValue) { - const hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue); - const h = parseInt(hsl[1]) / 360; - const s = parseInt(hsl[2]) / 100; - const l = parseInt(hsl[3]) / 100; - const a = hsl[4] || 1; - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - let r, g, b; - if (s == 0) { - r = g = b = l; - } else { - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return `rgba(${r * 255},${g * 255},${b * 255},${a})`; - } - - function colorToRgb(val) { - if (is.rgb(val)) return rgbToRgba(val); - if (is.hex(val)) return hexToRgba(val); - if (is.hsl(val)) return hslToRgba(val); - } - - // Units - - function getUnit(val) { - const split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val); - if (split) return split[2]; - } - - function getTransformUnit(propName) { - if (stringContains(propName, 'translate') || propName === 'perspective') return 'px'; - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) return 'deg'; - } - - // Values - - function minMaxValue(val, min, max) { - return Math.min(Math.max(val, min), max); - } - - function getFunctionValue(val, animatable) { - if (!is.fnc(val)) return val; - return val(animatable.target, animatable.id, animatable.total); - } - - function getCSSValue(el, prop) { - if (prop in el.style) { - return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0'; - } - } - - function getAnimationType(el, prop) { - if (is.dom(el) && arrayContains(validTransforms, prop)) return 'transform'; - if (is.dom(el) && (el.getAttribute(prop) || (is.svg(el) && el[prop]))) return 'attribute'; - if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) return 'css'; - if (el[prop] != null) return 'object'; - } - - function getTransformValue(el, propName) { - const defaultUnit = getTransformUnit(propName); - const defaultVal = stringContains(propName, 'scale') ? 1 : 0 + defaultUnit; - const str = el.style.transform; - if (!str) return defaultVal; - let match = []; - let props = []; - let values = []; - const rgx = /(\w+)\((.+?)\)/g; - while (match = rgx.exec(str)) { - props.push(match[1]); - values.push(match[2]); - } - const value = filterArray(values, (val, i) => props[i] === propName); - return value.length ? value[0] : defaultVal; - } - - function getOriginalTargetValue(target, propName) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName); - case 'css': return getCSSValue(target, propName); - case 'attribute': return target.getAttribute(propName); - } - return target[propName] || 0; - } - - function getRelativeValue(to, from) { - const operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) return to; - const u = getUnit(to) || 0; - const x = parseFloat(from); - const y = parseFloat(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y + u; - case '-': return x - y + u; - case '*': return x * y + u; - } - } - - function validateValue(val, unit) { - if (is.col(val)) return colorToRgb(val); - const originalUnit = getUnit(val); - const unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val; - return unit && !/\s/g.test(val) ? unitLess + unit : unitLess; - } - - // getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes. - // adapted from https://gist.github.com/SebLambla/3e0550c496c236709744 - - function getDistance(p1, p2) { - return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); - } - - function getCircleLength(el) { - return 2 * Math.PI * el.getAttribute('r'); - } - - function getRectLength(el) { - return (el.getAttribute('width') * 2) + (el.getAttribute('height') * 2); - } - - function getLineLength(el) { - return getDistance( - {x: el.getAttribute('x1'), y: el.getAttribute('y1')}, - {x: el.getAttribute('x2'), y: el.getAttribute('y2')} - ); - } - - function getPolylineLength(el) { - const points = el.points; - let totalLength = 0; - let previousPos; - for (let i = 0 ; i < points.numberOfItems; i++) { - const currentPos = points.getItem(i); - if (i > 0) totalLength += getDistance(previousPos, currentPos); - previousPos = currentPos; - } - return totalLength; - } - - function getPolygonLength(el) { - const points = el.points; - return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0)); - } - - // Path animation - - function getTotalLength(el) { - if (el.getTotalLength) return el.getTotalLength(); - switch(el.tagName.toLowerCase()) { - case 'circle': return getCircleLength(el); - case 'rect': return getRectLength(el); - case 'line': return getLineLength(el); - case 'polyline': return getPolylineLength(el); - case 'polygon': return getPolygonLength(el); - } - } - - function setDashoffset(el) { - const pathLength = getTotalLength(el); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; - } - - // Motion path - - function getPath(path, percent) { - const el = is.str(path) ? selectString(path)[0] : path; - const p = percent || 100; - return function(prop) { - return { - el: el, - property: prop, - totalLength: getTotalLength(el) * (p / 100) - } - } - } - - function getPathProgress(path, progress) { - function point(offset = 0) { - const l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - const p = point(); - const p0 = point(-1); - const p1 = point(+1); - switch (path.property) { - case 'x': return p.x; - case 'y': return p.y; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } - } - - // Decompose value - - function decomposeValue(val, unit) { - const rgx = /-?\d*\.?\d+/g; - const value = validateValue((is.pth(val) ? val.totalLength : val), unit) + ''; - return { - original: value, - numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: (is.str(val) || unit) ? value.split(rgx) : [] - } - } - - // Animatables - - function parseTargets(targets) { - const targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return filterArray(targetsArray, (item, pos, self) => self.indexOf(item) === pos); - } - - function getAnimatables(targets) { - const parsed = parseTargets(targets); - return parsed.map((t, i) => { - return {target: t, id: i, total: parsed.length}; - }); - } - - // Properties - - function normalizePropertyTweens(prop, tweenSettings) { - let settings = cloneObject(tweenSettings); - if (is.arr(prop)) { - const l = prop.length; - const isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) settings.duration = tweenSettings.duration / l; - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - return toArray(prop).map((v, i) => { - // Default delay value should be applied only on the first tween - const delay = !i ? tweenSettings.delay : 0; - // Use path object as a tween value - let obj = is.obj(v) && !is.pth(v) ? v : {value: v}; - // Set default delay value - if (is.und(obj.delay)) obj.delay = delay; - return obj; - }).map(k => mergeObjects(k, settings)); - } - - function getProperties(instanceSettings, tweenSettings, params) { - let properties = []; - const settings = mergeObjects(instanceSettings, tweenSettings); - for (let p in params) { - if (!settings.hasOwnProperty(p) && p !== 'targets') { - properties.push({ - name: p, - offset: settings['offset'], - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; - } - - // Tweens - - function normalizeTweenValues(tween, animatable) { - let t = {}; - for (let p in tween) { - let value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(v => getFunctionValue(v, animatable)); - if (value.length === 1) value = value[0]; - } - t[p] = value; - } - t.duration = parseFloat(t.duration); - t.delay = parseFloat(t.delay); - return t; - } - - function normalizeEasing(val) { - return is.arr(val) ? bezier.apply(this, val) : easings[val]; - } - - function normalizeTweens(prop, animatable) { - let previousTween; - return prop.tweens.map(t => { - let tween = normalizeTweenValues(t, animatable); - const tweenValue = tween.value; - const originalValue = getOriginalTargetValue(animatable.target, prop.name); - const previousValue = previousTween ? previousTween.to.original : originalValue; - const from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - const to = getRelativeValue(is.arr(tweenValue) ? tweenValue[1] : tweenValue, from); - const unit = getUnit(to) || getUnit(from) || getUnit(originalValue); - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(to, unit); - tween.start = previousTween ? previousTween.end : prop.offset; - tween.end = tween.start + tween.delay + tween.duration; - tween.easing = normalizeEasing(tween.easing); - tween.elasticity = (1000 - minMaxValue(tween.elasticity, 1, 999)) / 1000; - tween.isPath = is.pth(tweenValue); - tween.isColor = is.col(tween.from.original); - if (tween.isColor) tween.round = 1; - previousTween = tween; - return tween; - }); - } - - // Tween progress - - const setTweenProgress = { - css: (t, p, v) => t.style[p] = v, - attribute: (t, p, v) => t.setAttribute(p, v), - object: (t, p, v) => t[p] = v, - transform: (t, p, v, transforms, id) => { - if (!transforms[id]) transforms[id] = []; - transforms[id].push(`${p}(${v})`); - } - } - - // Animations - - function createAnimation(animatable, prop) { - const animType = getAnimationType(animatable.target, prop.name); - if (animType) { - const tweens = normalizeTweens(prop, animatable); - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: tweens[tweens.length - 1].end, - delay: tweens[0].delay - } - } - } - - function getAnimations(animatables, properties) { - return filterArray(flattenArray(animatables.map(animatable => { - return properties.map(prop => { - return createAnimation(animatable, prop); - }); - })), a => !is.und(a)); - } - - // Create Instance - - function getInstanceTimings(type, animations, instanceSettings, tweenSettings) { - const isDelay = (type === 'delay'); - if (animations.length) { - return (isDelay ? Math.min : Math.max).apply(Math, animations.map(anim => anim[type])); - } else { - return isDelay ? tweenSettings.delay : instanceSettings.offset + tweenSettings.delay + tweenSettings.duration; - } - } - - function createNewInstance(params) { - const instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - const tweenSettings = replaceObjectProps(defaultTweenSettings, params); - const animatables = getAnimatables(params.targets); - const properties = getProperties(instanceSettings, tweenSettings, params); - const animations = getAnimations(animatables, properties); - return mergeObjects(instanceSettings, { - children: [], - animatables: animatables, - animations: animations, - duration: getInstanceTimings('duration', animations, instanceSettings, tweenSettings), - delay: getInstanceTimings('delay', animations, instanceSettings, tweenSettings) - }); - } - - // Core - - let activeInstances = []; - let raf = 0; - - const engine = (() => { - function play() { raf = requestAnimationFrame(step); }; - function step(t) { - const activeLength = activeInstances.length; - if (activeLength) { - let i = 0; - while (i < activeLength) { - if (activeInstances[i]) activeInstances[i].tick(t); - i++; - } - play(); - } else { - cancelAnimationFrame(raf); - raf = 0; - } - } - return play; - })(); - - - // Public Instance - - function anime(params = {}) { - - let now, startTime, lastTime = 0; - - let resolve = null; - - function makePromise(instance) { - const promise = window.Promise && new Promise(_resolve => resolve = _resolve); - instance.finished = promise; - return promise; - } - - let instance = createNewInstance(params); - - let promise = makePromise(instance); - - function toggleInstanceDirection() { - instance.reversed = !instance.reversed; - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function syncInstanceChildren(time) { - const children = instance.children; - const childrenLength = children.length; - if (time >= instance.currentTime) { - for (let i = 0; i < childrenLength; i++) children[i].seek(time); - } else { - for (let i = childrenLength; i--;) children[i].seek(time); - } - } - - function setAnimationsProgress(insTime) { - let i = 0; - let transforms = {}; - const animations = instance.animations; - const animationsLength = animations.length; - while (i < animationsLength) { - const anim = animations[i]; - const animatable = anim.animatable; - const tweens = anim.tweens; - const tweenLength = tweens.length - 1; - let tween = tweens[tweenLength]; - // Only check for keyframes if there is more than one tween - if (tweenLength) tween = filterArray(tweens, t => (insTime < t.end))[0] || tween; - const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed, tween.elasticity); - const strings = tween.to.strings; - const round = tween.round; - let numbers = []; - let progress; - const toNumbersLength = tween.to.numbers.length; - for (let n = 0; n < toNumbersLength; n++) { - let value; - const toNumber = tween.to.numbers[n]; - const fromNumber = tween.from.numbers[n]; - if (!tween.isPath) { - value = fromNumber + (eased * (toNumber - fromNumber)); - } else { - value = getPathProgress(tween.value, eased * toNumber); - } - if (round) { - if (!(tween.isColor && n > 2)) { - value = Math.round(value * round) / round; - } - } - numbers.push(value); - } - // Manual Array.reduce for better performances - const stringsLength = strings.length; - if (!stringsLength) { - progress = numbers[0]; - } else { - progress = strings[0]; - for (let s = 0; s < stringsLength; s++) { - const a = strings[s]; - const b = strings[s + 1]; - const n = numbers[s]; - if (!isNaN(n)) { - if (!b) { - progress += n + ' '; - } else { - progress += n + b; - } - } - } - } - setTweenProgress[anim.type](animatable.target, anim.property, progress, transforms, animatable.id); - anim.currentValue = progress; - i++; - } - const transformsLength = Object.keys(transforms).length; - if (transformsLength) { - for (let id = 0; id < transformsLength; id++) { - if (!transformString) { - const t = 'transform'; - transformString = (getCSSValue(document.body, t) ? t : `-webkit-${t}`); - } - instance.animatables[id].target.style[transformString] = transforms[id].join(' '); - } - } - instance.currentTime = insTime; - instance.progress = (insTime / instance.duration) * 100; - } - - function setCallback(cb) { - if (instance[cb]) instance[cb](instance); - } - - function countIteration() { - if (instance.remaining && instance.remaining !== true) { - instance.remaining--; - } - } - - function setInstanceProgress(engineTime) { - const insDuration = instance.duration; - const insOffset = instance.offset; - const insStart = insOffset + instance.delay; - const insCurrentTime = instance.currentTime; - const insReversed = instance.reversed; - const insTime = adjustTime(engineTime); - if (instance.children.length) syncInstanceChildren(insTime); - if (insTime >= insStart || !insDuration) { - if (!instance.began) { - instance.began = true; - setCallback('begin'); - } - setCallback('run'); - } - if (insTime > insOffset && insTime < insDuration) { - setAnimationsProgress(insTime); - } else { - if (insTime <= insOffset && insCurrentTime !== 0) { - setAnimationsProgress(0); - if (insReversed) countIteration(); - } - if ((insTime >= insDuration && insCurrentTime !== insDuration) || !insDuration) { - setAnimationsProgress(insDuration); - if (!insReversed) countIteration(); - } - } - setCallback('update'); - if (engineTime >= insDuration) { - if (instance.remaining) { - startTime = now; - if (instance.direction === 'alternate') toggleInstanceDirection(); - } else { - instance.pause(); - if (!instance.completed) { - instance.completed = true; - setCallback('complete'); - if ('Promise' in window) { - resolve(); - promise = makePromise(instance); - } - } - } - lastTime = 0; - } - } - - instance.reset = function() { - const direction = instance.direction; - const loops = instance.loop; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.completed = false; - instance.reversed = direction === 'reverse'; - instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops; - setAnimationsProgress(0); - for (let i = instance.children.length; i--; ){ - instance.children[i].reset(); - } - } - - instance.tick = function(t) { - now = t; - if (!startTime) startTime = now; - const engineTime = (lastTime + now - startTime) * anime.speed; - setInstanceProgress(engineTime); - } - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time)); - } - - instance.pause = function() { - const i = activeInstances.indexOf(instance); - if (i > -1) activeInstances.splice(i, 1); - instance.paused = true; - } - - instance.play = function() { - if (!instance.paused) return; - instance.paused = false; - instance.completed = false; - startTime = 0; - lastTime = adjustTime(instance.currentTime); - activeInstances.push(instance); - if (!raf) engine(); - } - - instance.reverse = function() { - toggleInstanceDirection(); - startTime = 0; - lastTime = adjustTime(instance.currentTime); - } - - instance.restart = function() { - instance.pause(); - instance.reset(); - instance.play(); - } - - instance.reset(); - - if (instance.autoplay) instance.play(); - - return instance; - - } - - // Remove targets from animation - - function removeTargets(targets) { - const targetsArray = parseTargets(targets); - for (let i = activeInstances.length; i--;) { - const instance = activeInstances[i]; - const animations = instance.animations; - for (let a = animations.length; a--;) { - if (arrayContains(targetsArray, animations[a].animatable.target)) { - animations.splice(a, 1); - if (!animations.length) instance.pause(); - } - } - } - } - - // Timeline - - function timeline(params) { - let tl = anime(params); - tl.pause(); - tl.duration = 0; - tl.add = function(instancesParams) { - tl.children.forEach(i => { i.began = true; i.completed = true; }); - toArray(instancesParams).forEach(instanceParams => { - let insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params || {})); - insParams.targets = insParams.targets || params.targets; - const tlDuration = tl.duration; - const insOffset = insParams.offset; - insParams.autoplay = false; - insParams.direction = tl.direction; - insParams.offset = is.und(insOffset) ? tlDuration : getRelativeValue(insOffset, tlDuration); - tl.began = true; - tl.completed = true; - tl.seek(insParams.offset); - const ins = anime(insParams); - ins.began = true; - ins.completed = true; - if (ins.duration > tlDuration) tl.duration = ins.duration; - tl.children.push(ins); - }); - tl.seek(0); - tl.reset(); - if (tl.autoplay) tl.restart(); - return tl; - } - return tl; - } - - anime.version = '2.2.0'; - anime.speed = 1; - anime.running = activeInstances; - anime.remove = removeTargets; - anime.getValue = getOriginalTargetValue; - anime.path = getPath; - anime.setDashoffset = setDashoffset; - anime.bezier = bezier; - anime.easings = easings; - anime.timeline = timeline; - anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - - return anime; - -})); \ No newline at end of file diff --git a/js/anime-master/documentation/assets/js/anime/anime.3.0.0-alpha.js b/js/anime-master/documentation/assets/js/anime/anime.3.0.0-alpha.js deleted file mode 100644 index ffcf194..0000000 --- a/js/anime-master/documentation/assets/js/anime/anime.3.0.0-alpha.js +++ /dev/null @@ -1,1004 +0,0 @@ -/** - * https://animejs.com - * JavaScript animation engine - * @version v3.0.0-alpha - * @author Julian Garnier - * @copyright ©2017 Julian Garnier - * Released under the MIT license -**/ - -(function(root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([], factory); - } else if (typeof module === 'object' && module.exports) { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(); - } else { - // Browser globals (root is window) - root.anime = factory(); - } -}(this, () => { - - // Defaults - - const defaultInstanceSettings = { - update: undefined, - begin: undefined, - run: undefined, - complete: undefined, - loop: 1, - direction: 'normal', - autoplay: true, - timeOffset: 0 - } - - const defaultTweenSettings = { - duration: 1000, - delay: 0, - endDelay: 0, - easing: 'easeOutElastic', - elasticity: 500, - round: 0 - } - - const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective']; - - // Utils - - function stringContains(str, text) { - return str.indexOf(text) > -1; - } - - const is = { - arr: a => Array.isArray(a), - obj: a => stringContains(Object.prototype.toString.call(a), 'Object'), - pth: a => is.obj(a) && a.hasOwnProperty('totalLength'), - svg: a => a instanceof SVGElement, - dom: a => a.nodeType || is.svg(a), - str: a => typeof a === 'string', - fnc: a => typeof a === 'function', - und: a => typeof a === 'undefined', - hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a), - rgb: a => /^rgb/.test(a), - hsl: a => /^hsl/.test(a), - col: a => (is.hex(a) || is.rgb(a) || is.hsl(a)) - } - - // BezierEasing https://github.com/gre/bezier-easing - - const bezier = (() => { - - const kSplineTableSize = 11; - const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }; - function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }; - function C (aA1) { return 3.0 * aA1 }; - - function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }; - function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }; - - function binarySubdivide (aX, aA, aB, mX1, mX2) { - let currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT } else { aA = currentT }; - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { - for (let i = 0; i < 4; ++i) { - const currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) return aGuessT; - const currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) return; - let sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (let i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - let intervalStart = 0.0; - let currentSample = 1; - const lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - const guessForT = intervalStart + dist * kSampleStepSize; - const initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return x => { - if (mX1 === mY1 && mX2 === mY2) return x; - if (x === 0) return 0; - if (x === 1) return 1; - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - - })(); - - const easings = (() => { - - const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic']; - - // Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/ - - function elastic(t, p) { - return t === 0 || t === 1 ? t : - -Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2.0) * Math.asin(1))) * (Math.PI * 2)) / p ); - } - - // Approximated Penner equations http://matthewlein.com/ceaser/ - - const equations = { - In: [ - [0.550, 0.085, 0.680, 0.530], /* InQuad */ - [0.550, 0.055, 0.675, 0.190], /* InCubic */ - [0.895, 0.030, 0.685, 0.220], /* InQuart */ - [0.755, 0.050, 0.855, 0.060], /* InQuint */ - [0.470, 0.000, 0.745, 0.715], /* InSine */ - [0.950, 0.050, 0.795, 0.035], /* InExpo */ - [0.600, 0.040, 0.980, 0.335], /* InCirc */ - [0.600, -0.280, 0.735, 0.045], /* InBack */ - elastic /* InElastic */ - ], Out: [ - [0.250, 0.460, 0.450, 0.940], /* OutQuad */ - [0.215, 0.610, 0.355, 1.000], /* OutCubic */ - [0.165, 0.840, 0.440, 1.000], /* OutQuart */ - [0.230, 1.000, 0.320, 1.000], /* OutQuint */ - [0.390, 0.575, 0.565, 1.000], /* OutSine */ - [0.190, 1.000, 0.220, 1.000], /* OutExpo */ - [0.075, 0.820, 0.165, 1.000], /* OutCirc */ - [0.175, 0.885, 0.320, 1.275], /* OutBack */ - (t, f) => 1 - elastic(1 - t, f) /* OutElastic */ - ], InOut: [ - [0.455, 0.030, 0.515, 0.955], /* InOutQuad */ - [0.645, 0.045, 0.355, 1.000], /* InOutCubic */ - [0.770, 0.000, 0.175, 1.000], /* InOutQuart */ - [0.860, 0.000, 0.070, 1.000], /* InOutQuint */ - [0.445, 0.050, 0.550, 0.950], /* InOutSine */ - [1.000, 0.000, 0.000, 1.000], /* InOutExpo */ - [0.785, 0.135, 0.150, 0.860], /* InOutCirc */ - [0.680, -0.550, 0.265, 1.550], /* InOutBack */ - (t, f) => t < .5 ? elastic(t * 2, f) / 2 : 1 - elastic(t * -2 + 2, f) / 2 /* InOutElastic */ - ] - } - - let functions = { - linear: bezier(0.250, 0.250, 0.750, 0.750) - } - - for (let type in equations) { - equations[type].forEach((f, i) => { - functions['ease'+type+names[i]] = is.fnc(f) ? f : bezier.apply(this, f); - }); - } - - return functions; - - })(); - - // Strings - - function stringToHyphens(str) { - return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - } - - function selectString(str) { - try { - let nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } - } - - // Arrays - - function filterArray(arr, callback) { - const len = arr.length; - const thisArg = arguments.length >= 2 ? arguments[1] : void 0; - let result = []; - for (let i = 0; i < len; i++) { - if (i in arr) { - const val = arr[i]; - if (callback.call(thisArg, val, i, arr)) { - result.push(val); - } - } - } - return result; - } - - function flattenArray(arr) { - return arr.reduce((a, b) => a.concat(is.arr(b) ? flattenArray(b) : b), []); - } - - function toArray(o) { - if (is.arr(o)) return o; - if (is.str(o)) o = selectString(o) || o; - if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o); - return [o]; - } - - function arrayContains(arr, val) { - return arr.some(a => a === val); - } - - // Objects - - function cloneObject(o) { - let clone = {}; - for (let p in o) clone[p] = o[p]; - return clone; - } - - function replaceObjectProps(o1, o2) { - let o = cloneObject(o1); - for (let p in o1) o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; - return o; - } - - function mergeObjects(o1, o2) { - let o = cloneObject(o1); - for (let p in o2) o[p] = is.und(o1[p]) ? o2[p] : o1[p]; - return o; - } - - // Colors - - function rgbToRgba(rgbValue) { - const rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue); - return rgb ? `rgba(${rgb[1]},1)` : rgbValue; - } - - function hexToRgba(hexValue) { - const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b ); - const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - const r = parseInt(rgb[1], 16); - const g = parseInt(rgb[2], 16); - const b = parseInt(rgb[3], 16); - return `rgba(${r},${g},${b},1)`; - } - - function hslToRgba(hslValue) { - const hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue); - const h = parseInt(hsl[1], 10) / 360; - const s = parseInt(hsl[2], 10) / 100; - const l = parseInt(hsl[3], 10) / 100; - const a = hsl[4] || 1; - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - let r, g, b; - if (s == 0) { - r = g = b = l; - } else { - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return `rgba(${r * 255},${g * 255},${b * 255},${a})`; - } - - function colorToRgb(val) { - if (is.rgb(val)) return rgbToRgba(val); - if (is.hex(val)) return hexToRgba(val); - if (is.hsl(val)) return hslToRgba(val); - } - - // Units - - function getUnit(val) { - const split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val); - if (split) return split[2]; - } - - function getTransformUnit(propName) { - if (stringContains(propName, 'translate') || propName === 'perspective') return 'px'; - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) return 'deg'; - } - - // Values - - function minMaxValue(val, min, max) { - return Math.min(Math.max(val, min), max); - } - - function getFunctionValue(val, animatable) { - if (!is.fnc(val)) return val; - return val(animatable.target, animatable.id, animatable.total); - } - - function getCSSValue(el, prop) { - if (prop in el.style) { - return el.style[prop] || getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0'; - } - } - - function getAnimationType(el, prop) { - if (is.dom(el) && arrayContains(validTransforms, prop)) return 'transform'; - if (is.dom(el) && (el.getAttribute(prop) || (is.svg(el) && el[prop]))) return 'attribute'; - if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) return 'css'; - if (el[prop] != null) return 'object'; - } - - function getElementTransforms(el) { - if (!is.dom(el)) return; - const str = el.style.transform || ''; - const reg = /(\w+)\(([^)]*)\)/g; - const transforms = new Map(); - let m; while (m = reg.exec(str)) transforms.set(m[1], m[2]); - return transforms; - } - - function getTransformValue(el, propName, animatable) { - const defaultVal = stringContains(propName, 'scale') ? 1 : 0 + getTransformUnit(propName); - const prop = getElementTransforms(el).get(propName) || defaultVal; - animatable.transforms.list.set(propName, prop); - animatable.transforms['last'] = propName; - return prop; - } - - function getOriginalTargetValue(target, propName, animatable) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName, animatable); - case 'css': return getCSSValue(target, propName); - case 'attribute': return target.getAttribute(propName); - default: return target[propName] || 0; - } - } - - function getRelativeValue(to, from) { - const operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) return to; - const u = getUnit(to) || 0; - const x = parseFloat(from); - const y = parseFloat(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y + u; - case '-': return x - y + u; - case '*': return x * y + u; - } - } - - function validateValue(val, unit) { - if (is.col(val)) return colorToRgb(val); - const originalUnit = getUnit(val); - const unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val; - return unit && !/\s/g.test(val) ? unitLess + unit : unitLess; - } - - // getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes. - // adapted from https://gist.github.com/SebLambla/3e0550c496c236709744 - - function getDistance(p1, p2) { - return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); - } - - function getCircleLength(el) { - return 2 * Math.PI * el.getAttribute('r'); - } - - function getRectLength(el) { - return (el.getAttribute('width') * 2) + (el.getAttribute('height') * 2); - } - - function getLineLength(el) { - return getDistance( - {x: el.getAttribute('x1'), y: el.getAttribute('y1')}, - {x: el.getAttribute('x2'), y: el.getAttribute('y2')} - ); - } - - function getPolylineLength(el) { - const points = el.points; - let totalLength = 0; - let previousPos; - for (let i = 0 ; i < points.numberOfItems; i++) { - const currentPos = points.getItem(i); - if (i > 0) totalLength += getDistance(previousPos, currentPos); - previousPos = currentPos; - } - return totalLength; - } - - function getPolygonLength(el) { - const points = el.points; - return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0)); - } - - // Path animation - - function getTotalLength(el) { - if (el.getTotalLength) return el.getTotalLength(); - switch(el.tagName.toLowerCase()) { - case 'circle': return getCircleLength(el); - case 'rect': return getRectLength(el); - case 'line': return getLineLength(el); - case 'polyline': return getPolylineLength(el); - case 'polygon': return getPolygonLength(el); - } - } - - function setDashoffset(el) { - const pathLength = getTotalLength(el); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; - } - - // Motion path - - function getPath(path, percent) { - const el = is.str(path) ? selectString(path)[0] : path; - const p = percent || 100; - return function(property) { - return { - el, - property, - totalLength: getTotalLength(el) * (p / 100) - } - } - } - - function getPathProgress(path, progress) { - function point(offset = 0) { - const l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - const p = point(); - const p0 = point(-1); - const p1 = point(+1); - switch (path.property) { - case 'x': return p.x; - case 'y': return p.y; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } - } - - // Decompose value - - function decomposeValue(val, unit) { - const rgx = /-?\d*\.?\d+/g; - const value = validateValue((is.pth(val) ? val.totalLength : val), unit) + ''; - return { - original: value, - numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: (is.str(val) || unit) ? value.split(rgx) : [] - } - } - - // Animatables - - function parseTargets(targets) { - const targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return filterArray(targetsArray, (item, pos, self) => self.indexOf(item) === pos); - } - - function getAnimatables(targets) { - const parsed = parseTargets(targets); - return parsed.map((t, i) => { - return {target: t, id: i, total: parsed.length, transforms: { list: getElementTransforms(t) } }; - }); - } - - // Properties - - function normalizePropertyTweens(prop, tweenSettings) { - let settings = cloneObject(tweenSettings); - if (is.arr(prop)) { - const l = prop.length; - const isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) settings.duration = tweenSettings.duration / l; - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - const propArray = is.arr(prop) ? prop : [prop]; - return propArray.map((v, i) => { - // Default delay value should be applied only on the first tween - const delay = !i ? tweenSettings.delay : 0; - // Use path object as a tween value - let obj = is.obj(v) && !is.pth(v) ? v : {value: v}; - // Set default delay value - if (is.und(obj.delay)) obj.delay = delay; - return obj; - }).map(k => mergeObjects(k, settings)); - } - - function getProperties(instanceSettings, tweenSettings, params) { - let properties = []; - const settings = mergeObjects(instanceSettings, tweenSettings); - for (let p in params) { - if (!settings.hasOwnProperty(p) && p !== 'targets') { - properties.push({ - name: p, - offset: settings['timeOffset'], - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; - } - - // Tweens - - function normalizeTweenValues(tween, animatable) { - let t = {}; - for (let p in tween) { - let value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(v => getFunctionValue(v, animatable)); - if (value.length === 1) value = value[0]; - } - t[p] = value; - } - t.duration = parseFloat(t.duration); - t.delay = parseFloat(t.delay); - return t; - } - - function normalizeEasing(val) { - return is.arr(val) ? bezier.apply(this, val) : easings[val]; - } - - function normalizeTweens(prop, animatable) { - let previousTween; - return prop.tweens.map(t => { - let tween = normalizeTweenValues(t, animatable); - const tweenValue = tween.value; - const originalValue = getOriginalTargetValue(animatable.target, prop.name, animatable); - const previousValue = previousTween ? previousTween.to.original : originalValue; - const from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - const to = getRelativeValue(is.arr(tweenValue) ? tweenValue[1] : tweenValue, from); - const unit = getUnit(to) || getUnit(from) || getUnit(originalValue); - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(to, unit); - tween.start = previousTween ? previousTween.end : prop.offset; - tween.end = tween.start + tween.delay + tween.duration + tween.endDelay; - tween.easing = normalizeEasing(tween.easing); - tween.elasticity = (1000 - minMaxValue(tween.elasticity, 1, 999)) / 1000; - tween.isPath = is.pth(tweenValue); - tween.isColor = is.col(tween.from.original); - if (tween.isColor) tween.round = 1; - previousTween = tween; - return tween; - }); - } - - // Tween progress - - const setProgressValue = { - css: (t, p, v) => t.style[p] = v, - attribute: (t, p, v) => t.setAttribute(p, v), - object: (t, p, v) => t[p] = v, - transform: (t, p, v, transforms, manual) => { - transforms.list.set(p, v); - if (p === transforms.last || manual) { - let str = ''; - for (let [prop, value] of transforms.list) { - str += `${prop}(${value}) `; - } - t.style.transform = str; - } - } - } - - function setTargetValue(targets, properties) { - const animatables = getAnimatables(targets); - animatables.forEach(animatable => { - for (var property in properties) { - const value = properties[property]; - const originalValue = getOriginalTargetValue(animatable.target, property, animatable); - const unit = getUnit(value) || getUnit(originalValue); - const to = getRelativeValue(validateValue(value, unit), originalValue); - const animType = getAnimationType(animatable.target, property); - setProgressValue[animType](animatable.target, property, to, animatable.transforms, true); - } - }); - } - - // Animations - - function createAnimation(animatable, prop) { - const animType = getAnimationType(animatable.target, prop.name); - if (animType) { - const tweens = normalizeTweens(prop, animatable); - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: tweens[tweens.length - 1].end, - delay: tweens[0].delay - } - } - } - - function getAnimations(animatables, properties) { - return filterArray(flattenArray(animatables.map(animatable => { - return properties.map(prop => { - return createAnimation(animatable, prop); - }); - })), a => !is.und(a)); - } - - // Create Instance - - function getInstanceTimings(type, animations, instanceSettings, tweenSettings) { - const isDelay = (type === 'delay'); - if (animations.length) { - return (isDelay ? Math.min : Math.max).apply(Math, animations.map(anim => anim[type])); - } else { - return isDelay ? tweenSettings.delay : instanceSettings.timeOffset + tweenSettings.delay + tweenSettings.duration; - } - } - - function createNewInstance(params) { - const instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - const tweenSettings = replaceObjectProps(defaultTweenSettings, params); - const animatables = getAnimatables(params.targets); - const properties = getProperties(instanceSettings, tweenSettings, params); - const animations = getAnimations(animatables, properties); - return mergeObjects(instanceSettings, { - children: [], - animatables: animatables, - animations: animations, - duration: getInstanceTimings('duration', animations, instanceSettings, tweenSettings), - delay: getInstanceTimings('delay', animations, instanceSettings, tweenSettings) - }); - } - - // Core - - let activeInstances = []; - let raf; - - const engine = (() => { - function play() { - raf = requestAnimationFrame(step); - }; - function step(t) { - if (activeInstances.length) { - let i = 0; - while (i < activeInstances.length) { - const activeInstance = activeInstances[i]; - if (!activeInstance.paused) { - activeInstance.tick(t); - } else { - const instanceIndex = activeInstances.indexOf(activeInstance); - if (instanceIndex > -1) activeInstances.splice(instanceIndex, 1); - } - i++; - } - play(); - } else { - raf = cancelAnimationFrame(raf); - } - } - return play; - })(); - - - // Public Instance - - function anime(params = {}) { - - let now, startTime, lastTime = 0; - - let resolve = null; - - function makePromise() { - return window.Promise && new Promise(_resolve => resolve = _resolve); - } - - let promise = makePromise(); - - let instance = createNewInstance(params); - - function toggleInstanceDirection() { - instance.reversed = !instance.reversed; - const children = instance.children; - children.forEach(child => child.reversed = instance.reversed); - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function syncInstanceChildren(time, manual) { - const children = instance.children; - const childrenLength = children.length; - if (!manual || time >= instance.currentTime) { - for (let i = 0; i < childrenLength; i++) children[i].seek(time); - } else { - // Manual backward seeking requires looping in reverse - for (let i = childrenLength; i--;) children[i].seek(time); - } - } - - function setAnimationsProgress(insTime) { - let i = 0; - const animations = instance.animations; - const animationsLength = animations.length; - while (i < animationsLength) { - const anim = animations[i]; - const animatable = anim.animatable; - const tweens = anim.tweens; - const tweenLength = tweens.length - 1; - let tween = tweens[tweenLength]; - // Only check for keyframes if there is more than one tween - if (tweenLength) tween = filterArray(tweens, t => (insTime < t.end))[0] || tween; - const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed, tween.elasticity); - const strings = tween.to.strings; - const round = tween.round; - const numbers = []; - let progress; - const toNumbersLength = tween.to.numbers.length; - for (let n = 0; n < toNumbersLength; n++) { - let value; - const toNumber = tween.to.numbers[n]; - const fromNumber = tween.from.numbers[n]; - if (!tween.isPath) { - value = fromNumber + (eased * (toNumber - fromNumber)); - } else { - value = getPathProgress(tween.value, eased * toNumber); - } - if (round) { - if (!(tween.isColor && n > 2)) { - value = Math.round(value * round) / round; - } - } - numbers.push(value); - } - // Manual Array.reduce for better performances - const stringsLength = strings.length; - if (!stringsLength) { - progress = numbers[0]; - } else { - progress = strings[0]; - for (let s = 0; s < stringsLength; s++) { - const a = strings[s]; - const b = strings[s + 1]; - const n = numbers[s]; - if (!isNaN(n)) { - if (!b) { - progress += n + ' '; - } else { - progress += n + b; - } - } - } - } - setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms); - anim.currentValue = progress; - i++; - } - instance.currentTime = insTime; - instance.progress = (insTime / instance.duration) * 100; - } - - function setCallback(cb) { - if (instance[cb]) instance[cb](instance); - } - - function countIteration() { - if (instance.remaining && instance.remaining !== true) { - instance.remaining--; - } - } - - function setInstanceProgress(engineTime, manual) { - const insOffset = instance.timeOffset; - const insDuration = instance.duration; - const insTime = adjustTime(engineTime); - if (instance.children.length) syncInstanceChildren(insTime, manual); - if (insTime >= (insOffset + instance.delay) || !insDuration) { - if (!instance.began) { - instance.began = true; - setCallback('begin'); - } - setCallback('run'); - } - if (insTime > insOffset && insTime < insDuration) { - setAnimationsProgress(insTime); - } else { - if (insTime <= insOffset && instance.currentTime !== 0) { - setAnimationsProgress(0); - if (instance.reversed) countIteration(); - } - if ((insTime >= insDuration && instance.currentTime !== insDuration) || !insDuration) { - setAnimationsProgress(insDuration); - if (!instance.reversed) countIteration(); - } - } - setCallback('update'); - if (engineTime >= insDuration) { - if (instance.remaining) { - startTime = now; - if (instance.direction === 'alternate') toggleInstanceDirection(); - } else { - instance.paused = true; - if (!instance.completed) { - instance.completed = true; - setCallback('complete'); - if ('Promise' in window) { - resolve(); - promise = makePromise(); - } - } - } - lastTime = 0; - } - } - - instance.reset = function() { - const direction = instance.direction; - const loops = instance.loop; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.completed = false; - instance.reversed = direction === 'reverse'; - instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops; - setAnimationsProgress(0); - for (let i = instance.children.length; i--; ){ - instance.children[i].reset(); - } - } - - instance.tick = function(t) { - now = t; - if (!startTime) startTime = now; - const engineTime = (lastTime + now - startTime) * anime.speed; - setInstanceProgress(engineTime); - } - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time), true); - } - - instance.pause = function() { - instance.paused = true; - } - - instance.play = function() { - if (!instance.paused) return; - instance.paused = false; - startTime = 0; - lastTime = adjustTime(instance.currentTime); - activeInstances.push(instance); - if (!raf) engine(); - } - - instance.reverse = function() { - toggleInstanceDirection(); - startTime = 0; - lastTime = adjustTime(instance.currentTime); - } - - instance.restart = function() { - instance.pause(); - instance.reset(); - instance.play(); - } - - instance.finished = promise; - - instance.reset(); - - if (instance.autoplay) instance.play(); - - return instance; - - } - - // Remove targets from animation - - function removeTargets(targets) { - const targetsArray = parseTargets(targets); - for (let i = activeInstances.length; i--;) { - const instance = activeInstances[i]; - const animations = instance.animations; - for (let a = animations.length; a--;) { - if (arrayContains(targetsArray, animations[a].animatable.target)) { - animations.splice(a, 1); - if (!animations.length) instance.pause(); - } - } - } - } - - // Timeline - - function timeline(params = {}) { - let tl = anime(params); - tl.pause(); - tl.duration = 0; - tl.add = function(instanceParams, timeOffset) { - tl.children.forEach(i => { i.began = true; i.completed = true; }); - let insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params)); - insParams.targets = insParams.targets || params.targets; - const tlDuration = tl.duration; - insParams.autoplay = false; - insParams.direction = tl.direction; - insParams.timeOffset = is.und(timeOffset) ? tlDuration : getRelativeValue(timeOffset, tlDuration); - tl.began = true; - tl.completed = true; - tl.seek(insParams.timeOffset); - const ins = anime(insParams); - ins.began = true; - ins.completed = true; - if (ins.duration > tlDuration) tl.duration = ins.duration; - tl.children.push(ins); - tl.seek(0); - tl.reset(); - if (tl.autoplay) tl.restart(); - return tl; - } - return tl; - } - - anime.version = '3.0.0-alpha'; - anime.speed = 1; - anime.running = activeInstances; - anime.remove = removeTargets; - anime.get = getOriginalTargetValue; - anime.set = setTargetValue; - anime.path = getPath; - anime.setDashoffset = setDashoffset; - anime.bezier = bezier; - anime.easings = easings; - anime.timeline = timeline; - anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - - return anime; - -})); \ No newline at end of file diff --git a/js/anime-master/documentation/assets/js/documentation.js b/js/anime-master/documentation/assets/js/documentation.js deleted file mode 100644 index 3085b5d..0000000 --- a/js/anime-master/documentation/assets/js/documentation.js +++ /dev/null @@ -1,268 +0,0 @@ -var navigationEl = document.querySelector('.navigation'); -var demosEl = document.querySelector('.demos'); -var articleEls = document.querySelectorAll('article'); -var demoInfoEl = document.querySelector('.demo-info'); -var descriptionEl = document.querySelector('.info-output'); -var descriptionTitleEl = document.querySelector('.demo-info h2'); -var demos = []; - -function getScrollTop() { - return document.body.scrollTop || document.documentElement.scrollTop; -} - -function scrollTo(selector, offset, cb) { - var offset = offset || 0; - var el = document.querySelector(selector); - var scrollAnim = anime({ - targets: {scroll: demosEl.scrollTop}, - scroll: el.offsetTop - offset, - duration: 500, - easing: 'easeInOutQuart', - update: function(a) { demosEl.scrollTop = a.animations[0].currentValue; }, - complete: function() { if (cb) cb(); } - }); -} - -function parseJS(demoCode) { - var split = demoCode.split('/*DEMO*/\n'); - return split[1] || ''; -} - -function createCodePreview(code) { - var previewEl = document.createElement('div'); - var preEl = document.createElement('pre'); - var codeEl = document.createElement('code'); - previewEl.classList.add('code-preview'); - previewEl.innerHTML = '

Code example

'; - codeEl.appendChild(code); - preEl.appendChild(codeEl); - previewEl.appendChild(preEl); - return previewEl; -} - -function outputCode(demoCode, demoTitle, demoDecription, demoColorClass) { - var js = document.createTextNode(parseJS(demoCode)); - demoInfoEl.classList.remove(demoInfoEl.classList[2]); - demoInfoEl.classList.add(demoColorClass); - descriptionEl.innerHTML = demoDecription; - descriptionEl.appendChild(createCodePreview(js)); - descriptionTitleEl.innerHTML = demoTitle; - codeEls = descriptionEl.querySelectorAll('code'); - for (var i = 0; i < codeEls.length; i++) { - hljs.highlightBlock(codeEls[i]); - } -} - -function toggleSectionLink(ulEl) { - var ulEls = document.querySelectorAll('.navigation ul'); - var ulLiEls = ulEl.querySelectorAll('.li'); - for (var i = 0; i < ulEls.length; i++) ulEls[i].classList.remove('active'); - ulEl.classList.add('active'); - anime.remove(ulEls); - anime({ - targets: '.navigation ul:not(.active)', - height: 30, - duration: 400, - easing: 'easeOutQuart' - }); - anime({ - targets: ulEl, - height: function(el) { - var height = 0; - var childNodes = el.childNodes; - for (var i = 0; i < childNodes.length; i++) height += childNodes[i].offsetHeight; - return height; - }, - duration: 600, - delay: 400, - easing: 'easeInOutQuart' - }); -} - -function resetDemo() { - var els = document.querySelectorAll('.el'); - for (var i = 0; i < els.length; i++) { - anime.remove(els[i]); - els[i].style = ''; - } -} - -function resetDemos() { - for (var i = 0; i < anime.running.length; i++) { - var anim = anime.running[i]; - anim.pause(); - anim.seek(0); - } - document.body.classList.add('ready'); -} - -function createDemo(el) { - var demo = {}; - var demoColorClass = el.parentNode.classList[0]; - var scriptEl = el.querySelector('script'); - var demoContentEl = el.querySelector('.demo-content'); - var descriptionContentEl = el.querySelector('.demo-description'); - var demoTitle = el.querySelector('h3').innerHTML; - var id = el.id; - var demoAnim = window[id]; - var demoCode = scriptEl ? scriptEl.innerHTML : ''; - var demoDescription = descriptionContentEl ? descriptionContentEl.innerHTML : ''; - function restart() { - resetDemo(); - demoAnim(); - } - function highlightDemo(e, push) { - var canRestart = !el.classList.contains('controls'); - if (e) { - e.preventDefault(); - if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT') { - canRestart = false; - } - } - if (!el.classList.contains('active')) { - resetDemos(); - var linkEls = document.querySelectorAll('.demo-link'); - for (var i = 0; i < demos.length; i++) { - var d = demos[i]; - d.el.classList.remove('active'); - linkEls[i].parentNode.classList.remove('active'); - //d.anim.pause(); - } - outputCode(demoCode, demoTitle, demoDescription, demoColorClass); - var linkEl = document.querySelector('a[href="#'+id+'"]'); - var ulEl = linkEl.parentNode.parentNode; - linkEl.parentNode.classList.add('active'); - el.classList.add('active'); - scrollTo('#'+id, 60, function() { - toggleSectionLink(ulEl); - if (canRestart) restart(); - }); - if (push) history.pushState(null, null, '#'+id); - } else { - if (canRestart) restart(); - } - } - function enterDemo() { - if (!el.classList.contains('active')) { - restart(); - } - } - function leaveDemo() { - if (!el.classList.contains('active')) { - resetDemo(); - } - } - el.addEventListener('click', function(e) { - highlightDemo(e, true); - }); - resetDemos(); - return { - el: el, - title: demoTitle, - id: id, - anim: demoAnim, - highlight: highlightDemo - } -} - -function getDemoById(id) { - return demos.filter(function(a) { return a.id === id})[0]; -} - -function createLinksSection(articleEl) { - var articleId = articleEl.id; - var articleTitle = articleEl.querySelector('h2').innerHTML; - var colorClass = articleEl.classList[0]; - var ulEl = document.createElement('ul'); - var liEl = document.createElement('li'); - var sectionLinkEl = document.createElement('a'); - sectionLinkEl.setAttribute('href', '#'+articleId); - sectionLinkEl.innerHTML = articleTitle; - sectionLinkEl.addEventListener('click', function(e) { - e.preventDefault(); - var firstDemoId = articleEl.querySelector('.demo').id; - var firstDemo = getDemoById(firstDemoId); - firstDemo.highlight(e, true); - }); - liEl.appendChild(sectionLinkEl); - ulEl.appendChild(liEl); - ulEl.classList.add(colorClass); - return ulEl; -} - -function createDemoLink(demo) { - var liEl = document.createElement('li'); - var demoLinkEl = document.createElement('a'); - demoLinkEl.setAttribute('href', '#'+demo.id); - demoLinkEl.innerHTML = demo.title; - demoLinkEl.classList.add('demo-link'); - demoLinkEl.addEventListener('click', function(e) { - demo.highlight(e, true); - }); - liEl.appendChild(demoLinkEl); - return liEl; -} - -var fragment = document.createDocumentFragment(); - -for (var i = 0; i < articleEls.length; i++) { - var articleEl = articleEls[i]; - var linksSectionEl = createLinksSection(articleEl); - var demoEls = articleEl.querySelectorAll('.demo'); - for (var d = 0; d < demoEls.length; d++) { - var demo = createDemo(demoEls[d]); - var demoLinkEl = createDemoLink(demo); - linksSectionEl.appendChild(demoLinkEl); - demos.push(demo); - } - fragment.appendChild(linksSectionEl); -} - -navigationEl.appendChild(fragment); - -function updateDemos() { - var hash = window.location.hash; - if (hash) { - var id = hash.replace('#',''); - var demo = getDemoById(id); - if (demo) demo.highlight(); - } else { - demos[0].highlight(); - } -} - -function keyboardNavigation(e) { - var activeDemoEl = document.querySelector('.demo.active'); - switch (e.keyCode) { - case 38: - var prevEl = activeDemoEl.previousElementSibling; - while (prevEl && !prevEl.classList.contains('demo') && prevEl.parentNode.previousElementSibling) { - prevEl = prevEl.parentNode.previousElementSibling.lastElementChild; - } - if (prevEl && prevEl.classList.contains('demo')) getDemoById(prevEl.id).highlight(e, true); - break; - case 40: - var nextEl = activeDemoEl.nextElementSibling; - if (!nextEl && activeDemoEl.parentNode.nextElementSibling) { - nextEl = activeDemoEl.parentNode.nextElementSibling.querySelector('.demo'); - } - if (nextEl && nextEl.classList.contains('demo')) getDemoById(nextEl.id).highlight(e, true); - break; - } -} - -// Update date and version number - -var versionNumerEls = document.querySelectorAll('.version-number'); -var dateEl = document.querySelector('.date'); -var date = new Date(); - -for (var i = 0; i < versionNumerEls.length; i++) { - versionNumerEls[i].innerHTML = anime.version; -} - -// Init - -updateDemos(); -window.onhashchange = updateDemos; -document.onkeydown = keyboardNavigation; diff --git a/js/anime-master/documentation/assets/js/vendors/beautify-html.js b/js/anime-master/documentation/assets/js/vendors/beautify-html.js deleted file mode 100644 index c814ccc..0000000 --- a/js/anime-master/documentation/assets/js/vendors/beautify-html.js +++ /dev/null @@ -1,1125 +0,0 @@ -/*jshint curly:true, eqeqeq:true, laxbreak:true, noempty:false */ -/* - - The MIT License (MIT) - - Copyright (c) 2007-2017 Einar Lielmanis, Liam Newman, and contributors. - - Permission is hereby granted, free of charge, to any person - obtaining a copy of this software and associated documentation files - (the "Software"), to deal in the Software without restriction, - including without limitation the rights to use, copy, modify, merge, - publish, distribute, sublicense, and/or sell copies of the Software, - and to permit persons to whom the Software is furnished to do so, - subject to the following conditions: - - The above copyright notice and this permission notice shall be - included in all copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF - MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS - BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN - ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN - CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - - - Style HTML ---------------- - - Written by Nochum Sossonko, (nsossonko@hotmail.com) - - Based on code initially developed by: Einar Lielmanis, - http://jsbeautifier.org/ - - Usage: - style_html(html_source); - - style_html(html_source, options); - - The options are: - indent_inner_html (default false) — indent and sections, - indent_size (default 4) — indentation size, - indent_char (default space) — character to indent with, - wrap_line_length (default 250) - maximum amount of characters per line (0 = disable) - brace_style (default "collapse") - "collapse" | "expand" | "end-expand" | "none" - put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are. - unformatted (defaults to inline tags) - list of tags, that shouldn't be reformatted - content_unformatted (defaults to pre tag) - list of tags, that its content shouldn't be reformatted - indent_scripts (default normal) - "keep"|"separate"|"normal" - preserve_newlines (default true) - whether existing line breaks before elements should be preserved - Only works before elements, not inside tags or for text. - max_preserve_newlines (default unlimited) - maximum number of line breaks to be preserved in one chunk - indent_handlebars (default false) - format and indent {{#foo}} and {{/foo}} - end_with_newline (false) - end with a newline - extra_liners (default [head,body,/html]) -List of tags that should have an extra newline before them. - - e.g. - - style_html(html_source, { - 'indent_inner_html': false, - 'indent_size': 2, - 'indent_char': ' ', - 'wrap_line_length': 78, - 'brace_style': 'expand', - 'preserve_newlines': true, - 'max_preserve_newlines': 5, - 'indent_handlebars': false, - 'extra_liners': ['/html'] - }); -*/ - -(function() { - - // function trim(s) { - // return s.replace(/^\s+|\s+$/g, ''); - // } - - function ltrim(s) { - return s.replace(/^\s+/g, ''); - } - - function rtrim(s) { - return s.replace(/\s+$/g, ''); - } - - function mergeOpts(allOptions, targetType) { - var finalOpts = {}; - var name; - - for (name in allOptions) { - if (name !== targetType) { - finalOpts[name] = allOptions[name]; - } - } - - //merge in the per type settings for the targetType - if (targetType in allOptions) { - for (name in allOptions[targetType]) { - finalOpts[name] = allOptions[targetType][name]; - } - } - return finalOpts; - } - - var lineBreak = /\r\n|[\n\r\u2028\u2029]/; - var allLineBreaks = new RegExp(lineBreak.source, 'g'); - - function style_html(html_source, options, js_beautify, css_beautify) { - //Wrapper function to invoke all the necessary constructors and deal with the output. - - var multi_parser, - indent_inner_html, - indent_body_inner_html, - indent_head_inner_html, - indent_size, - indent_character, - wrap_line_length, - brace_style, - unformatted, - content_unformatted, - preserve_newlines, - max_preserve_newlines, - indent_handlebars, - wrap_attributes, - wrap_attributes_indent_size, - is_wrap_attributes_force, - is_wrap_attributes_force_expand_multiline, - is_wrap_attributes_force_aligned, - end_with_newline, - extra_liners, - eol; - - options = options || {}; - - // Allow the setting of language/file-type specific options - // with inheritance of overall settings - options = mergeOpts(options, 'html'); - - // backwards compatibility to 1.3.4 - if ((options.wrap_line_length === undefined || parseInt(options.wrap_line_length, 10) === 0) && - (options.max_char !== undefined && parseInt(options.max_char, 10) !== 0)) { - options.wrap_line_length = options.max_char; - } - - indent_inner_html = (options.indent_inner_html === undefined) ? false : options.indent_inner_html; - indent_body_inner_html = (options.indent_body_inner_html === undefined) ? true : options.indent_body_inner_html; - indent_head_inner_html = (options.indent_head_inner_html === undefined) ? true : options.indent_head_inner_html; - indent_size = (options.indent_size === undefined) ? 4 : parseInt(options.indent_size, 10); - indent_character = (options.indent_char === undefined) ? ' ' : options.indent_char; - brace_style = (options.brace_style === undefined) ? 'collapse' : options.brace_style; - wrap_line_length = parseInt(options.wrap_line_length, 10) === 0 ? 32786 : parseInt(options.wrap_line_length || 250, 10); - unformatted = options.unformatted || [ - // https://www.w3.org/TR/html5/dom.html#phrasing-content - 'a', 'abbr', 'area', 'audio', 'b', 'bdi', 'bdo', 'br', 'button', 'canvas', 'cite', - 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', - 'input', 'ins', 'kbd', 'keygen', 'label', 'map', 'mark', 'math', 'meter', 'noscript', - 'object', 'output', 'progress', 'q', 'ruby', 's', 'samp', /* 'script', */ 'select', 'small', - 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', - 'video', 'wbr', 'text', - // prexisting - not sure of full effect of removing, leaving in - 'acronym', 'address', 'big', 'dt', 'ins', 'strike', 'tt', - ]; - content_unformatted = options.content_unformatted || [ - 'pre', - ]; - preserve_newlines = (options.preserve_newlines === undefined) ? true : options.preserve_newlines; - max_preserve_newlines = preserve_newlines ? - (isNaN(parseInt(options.max_preserve_newlines, 10)) ? 32786 : parseInt(options.max_preserve_newlines, 10)) : - 0; - indent_handlebars = (options.indent_handlebars === undefined) ? false : options.indent_handlebars; - wrap_attributes = (options.wrap_attributes === undefined) ? 'auto' : options.wrap_attributes; - wrap_attributes_indent_size = (isNaN(parseInt(options.wrap_attributes_indent_size, 10))) ? indent_size : parseInt(options.wrap_attributes_indent_size, 10); - is_wrap_attributes_force = wrap_attributes.substr(0, 'force'.length) === 'force'; - is_wrap_attributes_force_expand_multiline = (wrap_attributes === 'force-expand-multiline'); - is_wrap_attributes_force_aligned = (wrap_attributes === 'force-aligned'); - end_with_newline = (options.end_with_newline === undefined) ? false : options.end_with_newline; - extra_liners = (typeof options.extra_liners === 'object') && options.extra_liners ? - options.extra_liners.concat() : (typeof options.extra_liners === 'string') ? - options.extra_liners.split(',') : 'head,body,/html'.split(','); - eol = options.eol ? options.eol : 'auto'; - - if (options.indent_with_tabs) { - indent_character = '\t'; - indent_size = 1; - } - - if (eol === 'auto') { - eol = '\n'; - if (html_source && lineBreak.test(html_source || '')) { - eol = html_source.match(lineBreak)[0]; - } - } - - eol = eol.replace(/\\r/, '\r').replace(/\\n/, '\n'); - - // HACK: newline parsing inconsistent. This brute force normalizes the input. - html_source = html_source.replace(allLineBreaks, '\n'); - - function Parser() { - - this.pos = 0; //Parser position - this.token = ''; - this.current_mode = 'CONTENT'; //reflects the current Parser mode: TAG/CONTENT - this.tags = { //An object to hold tags, their position, and their parent-tags, initiated with default values - parent: 'parent1', - parentcount: 1, - parent1: '' - }; - this.tag_type = ''; - this.token_text = this.last_token = this.last_text = this.token_type = ''; - this.newlines = 0; - this.indent_content = indent_inner_html; - this.indent_body_inner_html = indent_body_inner_html; - this.indent_head_inner_html = indent_head_inner_html; - - this.Utils = { //Uilities made available to the various functions - whitespace: "\n\r\t ".split(''), - - single_token: [ - // HTLM void elements - aka self-closing tags - aka singletons - // https://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements - 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', - 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr', - // NOTE: Optional tags - are not understood. - // https://www.w3.org/TR/html5/syntax.html#optional-tags - // The rules for optional tags are too complex for a simple list - // Also, the content of these tags should still be indented in many cases. - // 'li' is a good exmple. - - // Doctype and xml elements - '!doctype', '?xml', - // ?php tag - '?php', - // other tags that were in this list, keeping just in case - 'basefont', 'isindex' - ], - extra_liners: extra_liners, //for tags that need a line of whitespace before them - in_array: function(what, arr) { - for (var i = 0; i < arr.length; i++) { - if (what === arr[i]) { - return true; - } - } - return false; - } - }; - - // Return true if the given text is composed entirely of whitespace. - this.is_whitespace = function(text) { - for (var n = 0; n < text.length; n++) { - if (!this.Utils.in_array(text.charAt(n), this.Utils.whitespace)) { - return false; - } - } - return true; - }; - - this.traverse_whitespace = function() { - var input_char = ''; - - input_char = this.input.charAt(this.pos); - if (this.Utils.in_array(input_char, this.Utils.whitespace)) { - this.newlines = 0; - while (this.Utils.in_array(input_char, this.Utils.whitespace)) { - if (preserve_newlines && input_char === '\n' && this.newlines <= max_preserve_newlines) { - this.newlines += 1; - } - - this.pos++; - input_char = this.input.charAt(this.pos); - } - return true; - } - return false; - }; - - // Append a space to the given content (string array) or, if we are - // at the wrap_line_length, append a newline/indentation. - // return true if a newline was added, false if a space was added - this.space_or_wrap = function(content) { - if (this.line_char_count >= this.wrap_line_length) { //insert a line when the wrap_line_length is reached - this.print_newline(false, content); - this.print_indentation(content); - return true; - } else { - this.line_char_count++; - content.push(' '); - return false; - } - }; - - this.get_content = function() { //function to capture regular content between tags - var input_char = '', - content = [], - handlebarsStarted = 0; - - while (this.input.charAt(this.pos) !== '<' || handlebarsStarted === 2) { - if (this.pos >= this.input.length) { - return content.length ? content.join('') : ['', 'TK_EOF']; - } - - if (this.traverse_whitespace()) { - this.space_or_wrap(content); - continue; - } - - input_char = this.input.charAt(this.pos); - - if (indent_handlebars) { - if (input_char === '{') { - handlebarsStarted += 1; - } else if (handlebarsStarted < 2) { - handlebarsStarted = 0; - } - - if (input_char === '}' && handlebarsStarted > 0) { - if (handlebarsStarted-- === 0) { - break; - } - } - // Handlebars parsing is complicated. - // {{#foo}} and {{/foo}} are formatted tags. - // {{something}} should get treated as content, except: - // {{else}} specifically behaves like {{#if}} and {{/if}} - var peek3 = this.input.substr(this.pos, 3); - if (peek3 === '{{#' || peek3 === '{{/') { - // These are tags and not content. - break; - } else if (peek3 === '{{!') { - return [this.get_tag(), 'TK_TAG_HANDLEBARS_COMMENT']; - } else if (this.input.substr(this.pos, 2) === '{{') { - if (this.get_tag(true) === '{{else}}') { - break; - } - } - } - - this.pos++; - this.line_char_count++; - content.push(input_char); //letter at-a-time (or string) inserted to an array - } - return content.length ? content.join('') : ''; - }; - - this.get_contents_to = function(name) { //get the full content of a script or style to pass to js_beautify - if (this.pos === this.input.length) { - return ['', 'TK_EOF']; - } - var content = ''; - var reg_match = new RegExp('', 'igm'); - reg_match.lastIndex = this.pos; - var reg_array = reg_match.exec(this.input); - var end_script = reg_array ? reg_array.index : this.input.length; //absolute end of script - if (this.pos < end_script) { //get everything in between the script tags - content = this.input.substring(this.pos, end_script); - this.pos = end_script; - } - return content; - }; - - this.record_tag = function(tag) { //function to record a tag and its parent in this.tags Object - if (this.tags[tag + 'count']) { //check for the existence of this tag type - this.tags[tag + 'count']++; - this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level - } else { //otherwise initialize this tag type - this.tags[tag + 'count'] = 1; - this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level - } - this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent; //set the parent (i.e. in the case of a div this.tags.div1parent) - this.tags.parent = tag + this.tags[tag + 'count']; //and make this the current parent (i.e. in the case of a div 'div1') - }; - - this.retrieve_tag = function(tag) { //function to retrieve the opening tag to the corresponding closer - if (this.tags[tag + 'count']) { //if the openener is not in the Object we ignore it - var temp_parent = this.tags.parent; //check to see if it's a closable tag. - while (temp_parent) { //till we reach '' (the initial value); - if (tag + this.tags[tag + 'count'] === temp_parent) { //if this is it use it - break; - } - temp_parent = this.tags[temp_parent + 'parent']; //otherwise keep on climbing up the DOM Tree - } - if (temp_parent) { //if we caught something - this.indent_level = this.tags[tag + this.tags[tag + 'count']]; //set the indent_level accordingly - this.tags.parent = this.tags[temp_parent + 'parent']; //and set the current parent - } - delete this.tags[tag + this.tags[tag + 'count'] + 'parent']; //delete the closed tags parent reference... - delete this.tags[tag + this.tags[tag + 'count']]; //...and the tag itself - if (this.tags[tag + 'count'] === 1) { - delete this.tags[tag + 'count']; - } else { - this.tags[tag + 'count']--; - } - } - }; - - this.indent_to_tag = function(tag) { - // Match the indentation level to the last use of this tag, but don't remove it. - if (!this.tags[tag + 'count']) { - return; - } - var temp_parent = this.tags.parent; - while (temp_parent) { - if (tag + this.tags[tag + 'count'] === temp_parent) { - break; - } - temp_parent = this.tags[temp_parent + 'parent']; - } - if (temp_parent) { - this.indent_level = this.tags[tag + this.tags[tag + 'count']]; - } - }; - - this.get_tag = function(peek) { //function to get a full tag and parse its type - var input_char = '', - content = [], - comment = '', - space = false, - first_attr = true, - has_wrapped_attrs = false, - tag_start, tag_end, - tag_start_char, - orig_pos = this.pos, - orig_line_char_count = this.line_char_count, - is_tag_closed = false, - tail; - - peek = peek !== undefined ? peek : false; - - do { - if (this.pos >= this.input.length) { - if (peek) { - this.pos = orig_pos; - this.line_char_count = orig_line_char_count; - } - return content.length ? content.join('') : ['', 'TK_EOF']; - } - - input_char = this.input.charAt(this.pos); - this.pos++; - - if (this.Utils.in_array(input_char, this.Utils.whitespace)) { //don't want to insert unnecessary space - space = true; - continue; - } - - if (input_char === "'" || input_char === '"') { - input_char += this.get_unformatted(input_char); - space = true; - } - - if (input_char === '=') { //no space before = - space = false; - } - tail = this.input.substr(this.pos - 1); - if (is_wrap_attributes_force_expand_multiline && has_wrapped_attrs && !is_tag_closed && (input_char === '>' || input_char === '/')) { - if (tail.match(/^\/?\s*>/)) { - space = false; - is_tag_closed = true; - this.print_newline(false, content); - this.print_indentation(content); - } - } - if (content.length && content[content.length - 1] !== '=' && input_char !== '>' && space) { - //no space after = or before > - var wrapped = this.space_or_wrap(content); - var indentAttrs = wrapped && input_char !== '/' && !is_wrap_attributes_force; - space = false; - - if (is_wrap_attributes_force && input_char !== '/') { - var force_first_attr_wrap = false; - if (is_wrap_attributes_force_expand_multiline && first_attr) { - var is_only_attribute = tail.match(/^\S*(="([^"]|\\")*")?\s*\/?\s*>/) !== null; - force_first_attr_wrap = !is_only_attribute; - } - if (!first_attr || force_first_attr_wrap) { - this.print_newline(false, content); - this.print_indentation(content); - indentAttrs = true; - } - } - if (indentAttrs) { - has_wrapped_attrs = true; - - //indent attributes an auto, forced, or forced-align line-wrap - var alignment_size = wrap_attributes_indent_size; - if (is_wrap_attributes_force_aligned) { - alignment_size = content.indexOf(' ') + 1; - } - - for (var count = 0; count < alignment_size; count++) { - content.push(indent_character); - } - } - if (first_attr) { - for (var i = 0; i < content.length; i++) { - if (content[i] === ' ') { - first_attr = false; - break; - } - } - } - } - - if (indent_handlebars && tag_start_char === '<') { - // When inside an angle-bracket tag, put spaces around - // handlebars not inside of strings. - if ((input_char + this.input.charAt(this.pos)) === '{{') { - input_char += this.get_unformatted('}}'); - if (content.length && content[content.length - 1] !== ' ' && content[content.length - 1] !== '<') { - input_char = ' ' + input_char; - } - space = true; - } - } - - if (input_char === '<' && !tag_start_char) { - tag_start = this.pos - 1; - tag_start_char = '<'; - } - - if (indent_handlebars && !tag_start_char) { - if (content.length >= 2 && content[content.length - 1] === '{' && content[content.length - 2] === '{') { - if (input_char === '#' || input_char === '/' || input_char === '!') { - tag_start = this.pos - 3; - } else { - tag_start = this.pos - 2; - } - tag_start_char = '{'; - } - } - - this.line_char_count++; - content.push(input_char); //inserts character at-a-time (or string) - - if (content[1] && (content[1] === '!' || content[1] === '?' || content[1] === '%')) { //if we're in a comment, do something special - // We treat all comments as literals, even more than preformatted tags - // we just look for the appropriate close tag - content = [this.get_comment(tag_start)]; - break; - } - - if (indent_handlebars && content[1] && content[1] === '{' && content[2] && content[2] === '!') { //if we're in a comment, do something special - // We treat all comments as literals, even more than preformatted tags - // we just look for the appropriate close tag - content = [this.get_comment(tag_start)]; - break; - } - - if (indent_handlebars && tag_start_char === '{' && content.length > 2 && content[content.length - 2] === '}' && content[content.length - 1] === '}') { - break; - } - } while (input_char !== '>'); - - var tag_complete = content.join(''); - var tag_index; - var tag_offset; - - if (tag_complete.indexOf('\n') !== -1) { //if there's a line break, thats where the tag name ends - tag_index = tag_complete.indexOf('\n'); - } else if (tag_complete.indexOf(' ') !== -1) { //if there's whitespace, thats where the tag name ends - tag_index = tag_complete.indexOf(' '); - } else if (tag_complete.charAt(0) === '{') { - tag_index = tag_complete.indexOf('}'); - } else { //otherwise go with the tag ending - tag_index = tag_complete.indexOf('>'); - } - if (tag_complete.charAt(0) === '<' || !indent_handlebars) { - tag_offset = 1; - } else { - tag_offset = tag_complete.charAt(2) === '#' ? 3 : 2; - } - var tag_check = tag_complete.substring(tag_offset, tag_index).toLowerCase(); - if (tag_complete.charAt(tag_complete.length - 2) === '/' || - this.Utils.in_array(tag_check, this.Utils.single_token)) { //if this tag name is a single tag type (either in the list or has a closing /) - if (!peek) { - this.tag_type = 'SINGLE'; - } - } else if (indent_handlebars && tag_complete.charAt(0) === '{' && tag_check === 'else') { - if (!peek) { - this.indent_to_tag('if'); - this.tag_type = 'HANDLEBARS_ELSE'; - this.indent_content = true; - this.traverse_whitespace(); - } - } else if (this.is_unformatted(tag_check, unformatted) || - this.is_unformatted(tag_check, content_unformatted)) { - // do not reformat the "unformatted" or "content_unformatted" tags - comment = this.get_unformatted('', tag_complete); //...delegate to get_unformatted function - content.push(comment); - tag_end = this.pos - 1; - this.tag_type = 'SINGLE'; - } else if (tag_check === 'script' && - (tag_complete.search('type') === -1 || - (tag_complete.search('type') > -1 && - tag_complete.search(/\b(text|application|dojo)\/(x-)?(javascript|ecmascript|jscript|livescript|(ld\+)?json|method|aspect)/) > -1))) { - if (!peek) { - this.record_tag(tag_check); - this.tag_type = 'SCRIPT'; - } - } else if (tag_check === 'style' && - (tag_complete.search('type') === -1 || - (tag_complete.search('type') > -1 && tag_complete.search('text/css') > -1))) { - if (!peek) { - this.record_tag(tag_check); - this.tag_type = 'STYLE'; - } - } else if (tag_check.charAt(0) === '!') { //peek for ', - matched = false; - - this.pos = start_pos; - var input_char = this.input.charAt(this.pos); - this.pos++; - - while (this.pos <= this.input.length) { - comment += input_char; - - // only need to check for the delimiter if the last chars match - if (comment.charAt(comment.length - 1) === delimiter.charAt(delimiter.length - 1) && - comment.indexOf(delimiter) !== -1) { - break; - } - - // only need to search for custom delimiter for the first few characters - if (!matched && comment.length < 10) { - if (comment.indexOf(''; - matched = true; - } else if (comment.indexOf(''; - matched = true; - } else if (comment.indexOf(''; - matched = true; - } else if (comment.indexOf(''; - matched = true; - } else if (comment.indexOf('{{!--') === 0) { // {{!-- handlebars comment - delimiter = '--}}'; - matched = true; - } else if (comment.indexOf('{{!') === 0) { // {{! handlebars comment - if (comment.length === 5 && comment.indexOf('{{!--') === -1) { - delimiter = '}}'; - matched = true; - } - } else if (comment.indexOf(''; - matched = true; - } else if (comment.indexOf('<%') === 0) { // {{! handlebars comment - delimiter = '%>'; - matched = true; - } - } - - input_char = this.input.charAt(this.pos); - this.pos++; - } - - return comment; - }; - - function tokenMatcher(delimiter) { - var token = ''; - - var add = function(str) { - var newToken = token + str.toLowerCase(); - token = newToken.length <= delimiter.length ? newToken : newToken.substr(newToken.length - delimiter.length, delimiter.length); - }; - - var doesNotMatch = function() { - return token.indexOf(delimiter) === -1; - }; - - return { - add: add, - doesNotMatch: doesNotMatch - }; - } - - this.get_unformatted = function(delimiter, orig_tag) { //function to return unformatted content in its entirety - if (orig_tag && orig_tag.toLowerCase().indexOf(delimiter) !== -1) { - return ''; - } - var input_char = ''; - var content = ''; - var space = true; - - var delimiterMatcher = tokenMatcher(delimiter); - - do { - - if (this.pos >= this.input.length) { - return content; - } - - input_char = this.input.charAt(this.pos); - this.pos++; - - if (this.Utils.in_array(input_char, this.Utils.whitespace)) { - if (!space) { - this.line_char_count--; - continue; - } - if (input_char === '\n' || input_char === '\r') { - content += '\n'; - /* Don't change tab indention for unformatted blocks. If using code for html editing, this will greatly affect
 tags if they are specified in the 'unformatted array'
-                for (var i=0; i]*>\s*$/);
-
-                // if next_tag comes back but is not an isolated tag, then
-                // let's treat the 'a' tag as having content
-                // and respect the unformatted option
-                if (!tag || this.Utils.in_array(tag, unformatted)) {
-                    return true;
-                } else {
-                    return false;
-                }
-            };
-
-            this.printer = function(js_source, indent_character, indent_size, wrap_line_length, brace_style) { //handles input/output and some other printing functions
-
-                this.input = js_source || ''; //gets the input for the Parser
-
-                // HACK: newline parsing inconsistent. This brute force normalizes the input.
-                this.input = this.input.replace(/\r\n|[\r\u2028\u2029]/g, '\n');
-
-                this.output = [];
-                this.indent_character = indent_character;
-                this.indent_string = '';
-                this.indent_size = indent_size;
-                this.brace_style = brace_style;
-                this.indent_level = 0;
-                this.wrap_line_length = wrap_line_length;
-                this.line_char_count = 0; //count to see if wrap_line_length was exceeded
-
-                for (var i = 0; i < this.indent_size; i++) {
-                    this.indent_string += this.indent_character;
-                }
-
-                this.print_newline = function(force, arr) {
-                    this.line_char_count = 0;
-                    if (!arr || !arr.length) {
-                        return;
-                    }
-                    if (force || (arr[arr.length - 1] !== '\n')) { //we might want the extra line
-                        if ((arr[arr.length - 1] !== '\n')) {
-                            arr[arr.length - 1] = rtrim(arr[arr.length - 1]);
-                        }
-                        arr.push('\n');
-                    }
-                };
-
-                this.print_indentation = function(arr) {
-                    for (var i = 0; i < this.indent_level; i++) {
-                        arr.push(this.indent_string);
-                        this.line_char_count += this.indent_string.length;
-                    }
-                };
-
-                this.print_token = function(text) {
-                    // Avoid printing initial whitespace.
-                    if (this.is_whitespace(text) && !this.output.length) {
-                        return;
-                    }
-                    if (text || text !== '') {
-                        if (this.output.length && this.output[this.output.length - 1] === '\n') {
-                            this.print_indentation(this.output);
-                            text = ltrim(text);
-                        }
-                    }
-                    this.print_token_raw(text);
-                };
-
-                this.print_token_raw = function(text) {
-                    // If we are going to print newlines, truncate trailing
-                    // whitespace, as the newlines will represent the space.
-                    if (this.newlines > 0) {
-                        text = rtrim(text);
-                    }
-
-                    if (text && text !== '') {
-                        if (text.length > 1 && text.charAt(text.length - 1) === '\n') {
-                            // unformatted tags can grab newlines as their last character
-                            this.output.push(text.slice(0, -1));
-                            this.print_newline(false, this.output);
-                        } else {
-                            this.output.push(text);
-                        }
-                    }
-
-                    for (var n = 0; n < this.newlines; n++) {
-                        this.print_newline(n > 0, this.output);
-                    }
-                    this.newlines = 0;
-                };
-
-                this.indent = function() {
-                    this.indent_level++;
-                };
-
-                this.unindent = function() {
-                    if (this.indent_level > 0) {
-                        this.indent_level--;
-                    }
-                };
-            };
-            return this;
-        }
-
-        /*_____________________--------------------_____________________*/
-
-        multi_parser = new Parser(); //wrapping functions Parser
-        multi_parser.printer(html_source, indent_character, indent_size, wrap_line_length, brace_style); //initialize starting values
-
-        while (true) {
-            var t = multi_parser.get_token();
-            multi_parser.token_text = t[0];
-            multi_parser.token_type = t[1];
-
-            if (multi_parser.token_type === 'TK_EOF') {
-                break;
-            }
-
-            switch (multi_parser.token_type) {
-                case 'TK_TAG_START':
-                    multi_parser.print_newline(false, multi_parser.output);
-                    multi_parser.print_token(multi_parser.token_text);
-                    if (multi_parser.indent_content) {
-                        if ((multi_parser.indent_body_inner_html || !multi_parser.token_text.match(//)) &&
-                            (multi_parser.indent_head_inner_html || !multi_parser.token_text.match(//))) {
-
-                            multi_parser.indent();
-                        }
-
-                        multi_parser.indent_content = false;
-                    }
-                    multi_parser.current_mode = 'CONTENT';
-                    break;
-                case 'TK_TAG_STYLE':
-                case 'TK_TAG_SCRIPT':
-                    multi_parser.print_newline(false, multi_parser.output);
-                    multi_parser.print_token(multi_parser.token_text);
-                    multi_parser.current_mode = 'CONTENT';
-                    break;
-                case 'TK_TAG_END':
-                    //Print new line only if the tag has no content and has child
-                    if (multi_parser.last_token === 'TK_CONTENT' && multi_parser.last_text === '') {
-                        var tag_name = (multi_parser.token_text.match(/\w+/) || [])[0];
-                        var tag_extracted_from_last_output = null;
-                        if (multi_parser.output.length) {
-                            tag_extracted_from_last_output = multi_parser.output[multi_parser.output.length - 1].match(/(?:<|{{#)\s*(\w+)/);
-                        }
-                        if (tag_extracted_from_last_output === null ||
-                            (tag_extracted_from_last_output[1] !== tag_name && !multi_parser.Utils.in_array(tag_extracted_from_last_output[1], unformatted))) {
-                            multi_parser.print_newline(false, multi_parser.output);
-                        }
-                    }
-                    multi_parser.print_token(multi_parser.token_text);
-                    multi_parser.current_mode = 'CONTENT';
-                    break;
-                case 'TK_TAG_SINGLE':
-                    // Don't add a newline before elements that should remain unformatted.
-                    var tag_check = multi_parser.token_text.match(/^\s*<([a-z-]+)/i);
-                    if (!tag_check || !multi_parser.Utils.in_array(tag_check[1], unformatted)) {
-                        multi_parser.print_newline(false, multi_parser.output);
-                    }
-                    multi_parser.print_token(multi_parser.token_text);
-                    multi_parser.current_mode = 'CONTENT';
-                    break;
-                case 'TK_TAG_HANDLEBARS_ELSE':
-                    // Don't add a newline if opening {{#if}} tag is on the current line
-                    var foundIfOnCurrentLine = false;
-                    for (var lastCheckedOutput = multi_parser.output.length - 1; lastCheckedOutput >= 0; lastCheckedOutput--) {
-                        if (multi_parser.output[lastCheckedOutput] === '\n') {
-                            break;
-                        } else {
-                            if (multi_parser.output[lastCheckedOutput].match(/{{#if/)) {
-                                foundIfOnCurrentLine = true;
-                                break;
-                            }
-                        }
-                    }
-                    if (!foundIfOnCurrentLine) {
-                        multi_parser.print_newline(false, multi_parser.output);
-                    }
-                    multi_parser.print_token(multi_parser.token_text);
-                    if (multi_parser.indent_content) {
-                        multi_parser.indent();
-                        multi_parser.indent_content = false;
-                    }
-                    multi_parser.current_mode = 'CONTENT';
-                    break;
-                case 'TK_TAG_HANDLEBARS_COMMENT':
-                    multi_parser.print_token(multi_parser.token_text);
-                    multi_parser.current_mode = 'TAG';
-                    break;
-                case 'TK_CONTENT':
-                    multi_parser.print_token(multi_parser.token_text);
-                    multi_parser.current_mode = 'TAG';
-                    break;
-                case 'TK_STYLE':
-                case 'TK_SCRIPT':
-                    if (multi_parser.token_text !== '') {
-                        multi_parser.print_newline(false, multi_parser.output);
-                        var text = multi_parser.token_text,
-                            _beautifier,
-                            script_indent_level = 1;
-                        if (multi_parser.token_type === 'TK_SCRIPT') {
-                            _beautifier = typeof js_beautify === 'function' && js_beautify;
-                        } else if (multi_parser.token_type === 'TK_STYLE') {
-                            _beautifier = typeof css_beautify === 'function' && css_beautify;
-                        }
-
-                        if (options.indent_scripts === "keep") {
-                            script_indent_level = 0;
-                        } else if (options.indent_scripts === "separate") {
-                            script_indent_level = -multi_parser.indent_level;
-                        }
-
-                        var indentation = multi_parser.get_full_indent(script_indent_level);
-                        if (_beautifier) {
-
-                            // call the Beautifier if avaliable
-                            var Child_options = function() {
-                                this.eol = '\n';
-                            };
-                            Child_options.prototype = options;
-                            var child_options = new Child_options();
-                            text = _beautifier(text.replace(/^\s*/, indentation), child_options);
-                        } else {
-                            // simply indent the string otherwise
-                            var white = text.match(/^\s*/)[0];
-                            var _level = white.match(/[^\n\r]*$/)[0].split(multi_parser.indent_string).length - 1;
-                            var reindent = multi_parser.get_full_indent(script_indent_level - _level);
-                            text = text.replace(/^\s*/, indentation)
-                                .replace(/\r\n|\r|\n/g, '\n' + reindent)
-                                .replace(/\s+$/, '');
-                        }
-                        if (text) {
-                            multi_parser.print_token_raw(text);
-                            multi_parser.print_newline(true, multi_parser.output);
-                        }
-                    }
-                    multi_parser.current_mode = 'TAG';
-                    break;
-                default:
-                    // We should not be getting here but we don't want to drop input on the floor
-                    // Just output the text and move on
-                    if (multi_parser.token_text !== '') {
-                        multi_parser.print_token(multi_parser.token_text);
-                    }
-                    break;
-            }
-            multi_parser.last_token = multi_parser.token_type;
-            multi_parser.last_text = multi_parser.token_text;
-        }
-        var sweet_code = multi_parser.output.join('').replace(/[\r\n\t ]+$/, '');
-
-        // establish end_with_newline
-        if (end_with_newline) {
-            sweet_code += '\n';
-        }
-
-        if (eol !== '\n') {
-            sweet_code = sweet_code.replace(/[\n]/g, eol);
-        }
-
-        return sweet_code;
-    }
-
-    if (typeof define === "function" && define.amd) {
-        // Add support for AMD ( https://github.com/amdjs/amdjs-api/wiki/AMD#defineamd-property- )
-        define(["require", "./beautify", "./beautify-css"], function(requireamd) {
-            var js_beautify = requireamd("./beautify");
-            var css_beautify = requireamd("./beautify-css");
-
-            return {
-                html_beautify: function(html_source, options) {
-                    return style_html(html_source, options, js_beautify.js_beautify, css_beautify.css_beautify);
-                }
-            };
-        });
-    } else if (typeof exports !== "undefined") {
-        // Add support for CommonJS. Just put this file somewhere on your require.paths
-        // and you will be able to `var html_beautify = require("beautify").html_beautify`.
-        var js_beautify = require('./beautify.js');
-        var css_beautify = require('./beautify-css.js');
-
-        exports.html_beautify = function(html_source, options) {
-            return style_html(html_source, options, js_beautify.js_beautify, css_beautify.css_beautify);
-        };
-    } else if (typeof window !== "undefined") {
-        // If we're running a web page and don't have either of the above, add our one global
-        window.html_beautify = function(html_source, options) {
-            return style_html(html_source, options, window.js_beautify, window.css_beautify);
-        };
-    } else if (typeof global !== "undefined") {
-        // If we don't even have window, try global.
-        global.html_beautify = function(html_source, options) {
-            return style_html(html_source, options, global.js_beautify, global.css_beautify);
-        };
-    }
-
-}());
diff --git a/js/anime-master/documentation/assets/js/vendors/highlight.pack.js b/js/anime-master/documentation/assets/js/vendors/highlight.pack.js
deleted file mode 100644
index f5c34e8..0000000
--- a/js/anime-master/documentation/assets/js/vendors/highlight.pack.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! highlight.js v9.12.0 | BSD3 License | git.io/hljslicense */
-!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&").replace(//g,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset"}function u(e){s+=""}function c(e){("start"===e.event?o:u)(e.node)}for(var l=0,s="",f=[];e.length||r.length;){var g=i();if(s+=n(a.substring(l,g[0].offset)),l=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===l);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return s+n(a.substr(l))}function l(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):x(a.k).forEach(function(e){u(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return l("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var c=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=c.length?t(c.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!a&&r(n.iR,e)}function l(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function p(e,n,t,r){var a=r?"":I.classPrefix,i='',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=l(E,r),e?(B+=e[1],a+=p(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!y[E.sL])return n(k);var t=e?f(E.sL,k,!0,x[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(B+=t.r),e&&(x[E.sL]=t.top),p(t.language,t.value,!1,!0)}function b(){L+=null!=E.sL?d():h(),k=""}function v(e){L+=e.cN?p(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(k+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),b(),t.rB||t.eB||(k=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),b(),a.eE&&(k=n));do E.cN&&(L+=C),E.skip||(B+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"")+'"');return k+=n,n.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,E=i||N,x={},L="";for(R=E;R!==N;R=R.parent)R.cN&&(L=p(R.cN,"",!0)+L);var k="",B=0;try{for(var M,j,O=0;;){if(E.t.lastIndex=O,M=E.t.exec(t),!M)break;j=m(t.substring(O,M.index),M[0]),O=M.index+j}for(m(t.substr(O)),R=E;R.parent;R=R.parent)R.cN&&(L+=C);return{r:B,value:L,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function g(e,t){t=t||I.languages||x(y);var r={r:0,value:n(e)},a=r;return t.filter(w).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return I.tabReplace||I.useBR?e.replace(M,function(e,n){return I.useBR&&"\n"===e?"
":I.tabReplace?n.replace(/\t/g,I.tabReplace):""}):e}function h(e,n,t){var r=n?L[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function d(e){var n,t,r,o,l,s=i(e);a(s)||(I.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):n=e,l=n.textContent,r=s?f(s,l,!0):g(l),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),l)),r.value=p(r.value),e.innerHTML=r.value,e.className=h(e.className,s,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){I=o(I,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,d)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=y[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function R(){return x(y)}function w(e){return e=(e||"").toLowerCase(),y[e]||y[L[e]]}var E=[],x=Object.keys,y={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="
",I={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=d,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("json",function(e){var i={literal:"true false null"},n=[e.QSM,e.CNM],r={e:",",eW:!0,eE:!0,c:n,k:i},t={b:"{",e:"}",c:[{cN:"attr",b:/"/,e:/"/,c:[e.BE],i:"\\n"},e.inherit(r,{b:/:/})],i:"\\S"},c={b:"\\[",e:"\\]",c:[e.inherit(r)],i:"\\S"};return n.splice(n.length,0,t,c),{c:n,k:i,i:"\\S"}});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"|$)",e:">",k:{name:"style"},c:[t],starts:{e:"",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"|$)",e:">",k:{name:"script"},c:[t],starts:{e:"",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b://,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}}); \ No newline at end of file diff --git a/js/anime-master/documentation/assets/js/vendors/stats.min.js b/js/anime-master/documentation/assets/js/vendors/stats.min.js deleted file mode 100644 index 1407aba..0000000 --- a/js/anime-master/documentation/assets/js/vendors/stats.min.js +++ /dev/null @@ -1,17 +0,0 @@ -// stats.js - http://github.com/mrdoob/stats.js -(function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;dg+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/ -1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v); -b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f}); - -var stats = new Stats(); -stats.showPanel(0); -document.body.appendChild(stats.dom); - -anime({ - update: function() { - stats.begin(); - stats.end(); - }, - duration: Infinity -}); diff --git a/js/anime-master/documentation/assets/js/website.js b/js/anime-master/documentation/assets/js/website.js deleted file mode 100644 index 35c28f9..0000000 --- a/js/anime-master/documentation/assets/js/website.js +++ /dev/null @@ -1,886 +0,0 @@ -// import anime from '../../../lib/anime.es.js'; - -/* Ontersection observer */ - -!function(t,e){"use strict";function n(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||a(),this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=e.width*e.height,i=this.intersectionRect,o=i.width*i.height;n?this.intersectionRatio=o/n:this.intersectionRatio=this.isIntersecting?1:0}function i(t,e){var n=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(n.root&&1!=n.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=r(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(n.rootMargin),this.thresholds=this._initThresholds(n.threshold),this.root=n.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}function o(){return t.performance&&performance.now&&performance.now()}function r(t,e){var n=null;return function(){n||(n=setTimeout(function(){t(),n=null},e))}}function s(t,e,n,i){"function"==typeof t.addEventListener?t.addEventListener(e,n,i||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,i){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,i||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,n)}function c(t,e){var n=Math.max(t.top,e.top),i=Math.min(t.bottom,e.bottom),o=Math.max(t.left,e.left),r=Math.min(t.right,e.right),s=r-o,h=i-n;return s>=0&&h>=0&&{top:n,bottom:i,left:o,right:r,width:s,height:h}}function u(t){var e;try{e=t.getBoundingClientRect()}catch(n){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):a()}function a(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function l(t,e){for(var n=e;n;){if(n==t)return!0;n=p(n)}return!1}function p(t){var e=t.parentNode;return e&&11==e.nodeType&&e.host?e.host:e}if("IntersectionObserver"in t&&"IntersectionObserverEntry"in t&&"intersectionRatio"in t.IntersectionObserverEntry.prototype)return void("isIntersecting"in t.IntersectionObserverEntry.prototype||Object.defineProperty(t.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}}));var f=[];i.prototype.THROTTLE_TIMEOUT=100,i.prototype.POLL_INTERVAL=null,i.prototype.observe=function(t){var e=this._observationTargets.some(function(e){return e.element==t});if(!e){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},i.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},i.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},i.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},i.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||0>t||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},i.prototype._parseRootMargin=function(t){var e=t||"0px",n=e.split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return n[1]=n[1]||n[0],n[2]=n[2]||n[0],n[3]=n[3]||n[1],n},i.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(s(t,"resize",this._checkForIntersections,!0),s(e,"scroll",this._checkForIntersections,!0),"MutationObserver"in t&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},i.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,h(t,"resize",this._checkForIntersections,!0),h(e,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},i.prototype._checkForIntersections=function(){var t=this._rootIsInDom(),e=t?this._getRootRect():a();this._observationTargets.forEach(function(i){var r=i.element,s=u(r),h=this._rootContainsTarget(r),c=i.entry,a=t&&h&&this._computeTargetAndRootIntersection(r,e),l=i.entry=new n({time:o(),target:r,boundingClientRect:s,rootBounds:e,intersectionRect:a});c?t&&h?this._hasCrossedThreshold(c,l)&&this._queuedEntries.push(l):c&&c.isIntersecting&&this._queuedEntries.push(l):this._queuedEntries.push(l)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},i.prototype._computeTargetAndRootIntersection=function(n,i){if("none"!=t.getComputedStyle(n).display){for(var o=u(n),r=o,s=p(n),h=!1;!h;){var a=null,l=1==s.nodeType?t.getComputedStyle(s):{};if("none"==l.display)return;if(s==this.root||s==e?(h=!0,a=i):s!=e.body&&s!=e.documentElement&&"visible"!=l.overflow&&(a=u(s)),a&&(r=c(a,r),!r))break;s=p(s)}return r}},i.prototype._getRootRect=function(){var t;if(this.root)t=u(this.root);else{var n=e.documentElement,i=e.body;t={top:0,left:0,right:n.clientWidth||i.clientWidth,width:n.clientWidth||i.clientWidth,bottom:n.clientHeight||i.clientHeight,height:n.clientHeight||i.clientHeight}}return this._expandRectByRootMargin(t)},i.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100}),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},i.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,i=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==i)for(var o=0;or!=i>r)return!0}},i.prototype._rootIsInDom=function(){return!this.root||l(e,this.root)},i.prototype._rootContainsTarget=function(t){return l(this.root||e,t)},i.prototype._registerInstance=function(){f.indexOf(this)<0&&f.push(this)},i.prototype._unregisterInstance=function(){var t=f.indexOf(this);-1!=t&&f.splice(t,1)},t.IntersectionObserver=i,t.IntersectionObserverEntry=n}(window,document); - -/* Helpers */ - -function dragElement(el, events) { - - function getPointer(e) { - var x = 'clientX'; - var y = 'clientY'; - var evt = e.touches ? e.touches[0] : e; - return { x: evt[x], y: evt[y] }; - } - - var drag = { x: 0, y: 0, deltaX: 0, deltaY: 0, active: true, events: events || {} }; - var originalX = 0; - var originalY = 0; - var pointerX = 0; - var pointerY = 0; - - function move(e) { - if (drag.active) return; - drag.deltaX = pointerX - getPointer(e).x; - drag.deltaY = pointerY - getPointer(e).y; - drag.x = originalX - drag.deltaX; - drag.y = originalY - drag.deltaY; - if (drag.events.move) drag.events.move(drag); - } - - function release(e) { - drag.active = true; - if (drag.events.release) drag.events.release(drag); - document.removeEventListener('mousemove', move, false); - document.removeEventListener('mouseup', release, false); - document.removeEventListener('touchmove', move, false); - document.removeEventListener('touchend', release, false); - } - - function start(e) { - if (!drag.active) return; - e.preventDefault(); - drag.active = false; - pointerX = getPointer(e).x; - pointerY = getPointer(e).y; - originalX = drag.x; - originalY = drag.y; - if (drag.events.begin) drag.events.begin(drag); - document.addEventListener('mousemove', move, false); - document.addEventListener('mouseup', release, false); - document.addEventListener('touchmove', move, false); - document.addEventListener('touchend', release, false); - } - - el.addEventListener('mousedown', start, false); - el.addEventListener('touchstart', start, false); - - return drag; - -} - -// Better scroll events - -function onScroll(cb) { - var isTicking = false; - var scrollY = 0; - var body = document.body; - var html = document.documentElement; - var scrollHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); - function scroll() { - scrollY = window.scrollY; - if (cb) cb(scrollY, scrollHeight); - requestTick(); - } - function requestTick() { - if (!isTicking) requestAnimationFrame(updateScroll); - isTicking = true; - } - function updateScroll() { - isTicking = false; - var currentScrollY = scrollY; - } - scroll(); - window.onscroll = scroll; -} - -// Scroll to element - -function scrollToElement(el, offset) { - var off = offset || 0; - var rect = el.getBoundingClientRect(); - var top = rect.top + off; - var animation = anime({ - targets: [document.body, document.documentElement], - scrollTop: '+='+top, - easing: 'easeInOutSine', - duration: 1500 - }); - // onScroll(animation.pause); -} - -// Check if element is in viewport - -function isElementInViewport(el, inCB, outCB, rootMargin) { - var margin = rootMargin || '-10%'; - function handleIntersect(entries, observer) { - var entry = entries[0]; - if (entry.isIntersecting) { - if (inCB && typeof inCB === 'function') inCB(el, entry); - } else { - if (outCB && typeof outCB === 'function') outCB(el, entry); - } - } - var observer = new IntersectionObserver(handleIntersect, {rootMargin: margin}); - observer.observe(el); -} - -function fitElementToParent(el, padding) { - var timeout = null; - function resize() { - if (timeout) clearTimeout(timeout); - anime.set(el, {scale: 1}); - var pad = padding || 0; - var parentEl = el.parentNode; - var elOffsetWidth = el.offsetWidth - pad; - var parentOffsetWidth = parentEl.offsetWidth; - var ratio = parentOffsetWidth / elOffsetWidth; - timeout = setTimeout(anime.set(el, {scale: ratio}), 100); - } - resize(); - window.addEventListener('resize', resize); -} - -// Update date and version number - -var versionNumerEls = document.querySelectorAll('.version-number'); - -for (var i = 0; i < versionNumerEls.length; i++) { - versionNumerEls[i].innerHTML = anime.version; -} - -var dateEl = document.querySelector('.date'); -var date = new Date(); - -dateEl.innerHTML = date.getFullYear(); - -// main logo animation - -var logoAnimation = (function() { - - var logoAnimationEl = document.querySelector('.logo-animation'); - var bouncePath = anime.path('.bounce path'); - - fitElementToParent(logoAnimationEl, 0); - - anime.set(['.letter-a', '.letter-n', '.letter-i'], {translateX: 70}); - anime.set('.letter-e', {translateX: -70}); - anime.set('.dot', { translateX: 630, translateY: -200 }); - - var logoAnimationTL = anime.timeline({ - autoplay: false, - easing: 'easeOutSine' - }) - .add({ - targets: '.letter-i .line', - duration: 0, - begin: function(a) { a.animatables[0].target.removeAttribute('stroke-dasharray'); } - }, 0) - .add({ - targets: '.bounced', - transformOrigin: ['50% 100% 0px', '50% 100% 0px'], - translateY: [ - {value: [150, -160], duration: 190, endDelay: 20, easing: 'cubicBezier(0.225, 1, 0.915, 0.980)'}, - {value: 4, duration: 120, easing: 'easeInQuad'}, - {value: 0, duration: 120, easing: 'easeOutQuad'} - ], - scaleX: [ - {value: [.25, .85], duration: 190, easing: 'easeOutQuad'}, - {value: 1.08, duration: 120, delay: 85, easing: 'easeInOutSine'}, - {value: 1, duration: 260, delay: 25, easing: 'easeOutQuad'} - ], - scaleY: [ - {value: [.3, .8], duration: 120, easing: 'easeOutSine'}, - {value: .35, duration: 120, delay: 180, easing: 'easeInOutSine'}, - {value: .57, duration: 180, delay: 25, easing: 'easeOutQuad'}, - {value: .5, duration: 190, delay: 15, easing: 'easeOutQuad'} - ], - delay: anime.stagger(80) - }) - .add({ - targets: '.dot', - opacity: { value: 1, duration: 100 }, - translateY: 250, - scaleY: [4, .7], - scaleX: { value: 1.3, delay: 100, duration: 200}, - duration: 280, - easing: 'cubicBezier(0.350, 0.560, 0.305, 1)' - }, '-=290') - .add({ - targets: '.letter-m .line', - easing: 'easeOutElastic(1, .8)', - duration: 600, - d: function(el) { return el.dataset.d2 }, - begin: function(a) { a.animatables[0].target.removeAttribute('stroke-dasharray'); } - }, '-=140') - .add({ - targets: ['.letter-a', '.letter-n', '.letter-i', '.letter-e'], - translateX: 0, - easing: 'easeOutElastic(1, .6)', - duration: 800, - delay: anime.stagger(40, {from: 2.5}), - change: function(a) { a.animatables[2].target.removeAttribute('stroke-dasharray'); } - }, '-=600') - .add({ - targets: '.letter-m .line', - d: function(el) { return el.dataset.d3 }, - easing: 'spring(.2, 200, 3, 60)', - }, '-=680') - .add({ - targets: '.dot', - translateX: bouncePath('x'), - translateY: bouncePath('y'), - rotate: {value: '1turn', duration: 790}, - scaleX: { value: 1, duration: 50, easing: 'easeOutSine' }, - scaleY: [ - { value: [1, 1.5], duration: 50, easing: 'easeInSine' }, - { value: 1, duration: 50, easing: 'easeOutExpo' } - ], - easing: 'cubicBezier(0, .74, 1, .255)', - duration: 800 - }, '-=1273') - .add({ - targets: '.dot', - scale: 1, - rotate: '1turn', - scaleY: {value: .5, duration: 150, delay: 230}, - translateX: 430, - translateY: [ - {value: 244, duration: 100}, - {value: 204, duration: 200, delay: 130}, - {value: 224, duration: 225, easing: 'easeOutQuad', delay: 25} - ], - duration: 200, - easing: 'easeOutSine' - }, '-=474') - .add({ - targets: '.letter-i .line', - transformOrigin: ['50% 100% 0', '50% 100% 0'], - d: function(el) { return el.dataset.d2 }, - easing: 'cubicBezier(0.400, 0.530, 0.070, 1)', - duration: 80 - }, '-=670') - .add({ - targets: '.logo-letter', - translateY: [ - {value: 40, duration: 150, easing: 'easeOutQuart'}, - {value: 0, duration: 800, easing: 'easeOutElastic(1, .5)'} - ], - strokeDashoffset: [anime.setDashoffset, 0], - delay: anime.stagger(60, {from: 'center'}) - }, '-=670') - .add({ - targets: '.bounced', - scaleY: [ - {value: .4, duration: 150, easing: 'easeOutQuart'}, - {value: .5, duration: 800, easing: 'easeOutElastic(1, .5)'} - ], - delay: anime.stagger(60, {from: 'center'}) - }, '-=1090') - - return logoAnimationTL; - -})(); - -var headerIntroAnimation = anime.timeline({ - easing: 'easeOutSine', - autoplay: false -}) -.add({ - targets: ['.header a', '.secondary-menu a', '.section-intro .feature-description-text'], - opacity: {value: [0.001, 1], easing: 'linear', duration: 300}, - translateY: [40, 0], - translateZ: 0, - duration: 500, - delay: anime.stagger(40, {start: 400, from: 'last'}), - begin: function(anim) { - anim.animatables.forEach(function(a) { - anime.set(a.target, { - transition: 'transform 0s ease' - }); - }); - }, - complete: function(anim) { - logoAnimation.play(); - anim.animatables.forEach(function(a) { - a.target.style = ''; - anime.set(a.target, { - opacity: 1, - transition: 'transform .225s ease' - }); - }); - } -}, 0); - -var introEasingsAnimation = (function() { - - var easingVisualizerEl = document.querySelector('.easing-visualizer'); - var barsWrapperEl = easingVisualizerEl.querySelector('.bars-wrapper'); - var dotsWrapperEl = easingVisualizerEl.querySelector('.dots-wrapper'); - var barsFragment = document.createDocumentFragment(); - var dotsFragment = document.createDocumentFragment(); - var numberOfBars = 91; - var duration = 450; - var animation; - var paused = true; - - fitElementToParent(easingVisualizerEl); - - for (var i = 0; i < numberOfBars; i++) { - var barEl = document.createElement('div'); - var dotEl = document.createElement('div'); - barEl.classList.add('bar'); - dotEl.classList.add('dot'); - dotEl.classList.add('color-red'); - barsFragment.appendChild(barEl); - dotsFragment.appendChild(dotEl); - } - - barsWrapperEl.appendChild(barsFragment); - dotsWrapperEl.appendChild(dotsFragment); - - var defaultEase = 'easeOutElastic'; - - function play() { - - paused = false; - - if (animation) animation.pause(); - - var easings = []; - for (let ease in anime.penner) easings.push(ease); - easings.push('steps('+anime.random(5, 20)+')'); - easings.push('steps('+anime.random(5, 20)+')'); - easings.push('cubicBezier(0.545, 0.475, 0.145, 1)'); - var ease = easings[anime.random(0, easings.length - 1)]; - - animation = anime.timeline({ - duration: duration, - easing: ease, - complete: play - }) - .add({ - targets: '.easing-visualizer .bar', - scaleY: anime.stagger([1, 44], {easing: ease, from: 'center', direction: 'reverse'}), - delay: anime.stagger(7, {from: 'center'}) - }) - .add({ - targets: '.easing-visualizer .dot', - translateY: anime.stagger(['-160px', '160px'], {easing: ease, from: 'last'}), - delay: anime.stagger(7, {from: 'center'}) - }, 0); - - } - - function pause() { - - if (paused) return; - paused = true; - if (animation) animation.pause(); - - animation = anime.timeline({ - easing: 'easeInOutQuad' - }) - .add({ - targets: '.easing-visualizer .bar', - scaleY: anime.stagger([1, 44], {easing: defaultEase, from: 'center', direction: 'reverse'}), - duration: duration, - delay: anime.stagger(7, {from: 'center'}) - }) - .add({ - targets: '.easing-visualizer .dot', - translateY: anime.stagger(['-144px', '144px'], {easing: defaultEase, from: 'last'}), - duration: duration, - delay: anime.stagger(7, {from: 'center'}) - }, 0); - - } - - function init() { - - animation = anime.timeline({ - duration: 600, - easing: 'easeInOutQuad', - complete: function() { - isElementInViewport(easingVisualizerEl, play, pause); - } - }) - .add({ - targets: '.easing-visualizer .bar', - scale: [0, 1], - delay: anime.stagger(8, {from: 'center'}) - }) - .add({ - targets: '.easing-visualizer .dot', - scale: [0, 1], - delay: anime.stagger(8, {from: 'center'}), - complete: function() { - headerIntroAnimation.play(); - } - }, 0) - .add({ - targets: '.easing-visualizer .bar', - scaleY: anime.stagger([1, 44], {easing: 'easeInOutQuad', from: 'center', direction: 'reverse'}), - duration: duration, - easing: 'easeInOutQuad', - delay: anime.stagger(7, {from: 'center'}) - }) - .add({ - targets: '.easing-visualizer .dot', - translateY: anime.stagger(['-144px', '144px'], {easing: 'easeInOutQuad', from: 'last'}), - duration: duration, - easing: 'easeInOutQuad', - delay: anime.stagger(7, {from: 'center'}) - }, '-=600'); - - - } - - return { - init: init, - play: play, - pause: pause - } - -})(); - -var sphereAnimation = (function() { - - var sphereEl = document.querySelector('.sphere-animation'); - var spherePathEls = sphereEl.querySelectorAll('.sphere path'); - var pathLength = spherePathEls.length; - var hasStarted = false; - var aimations = []; - - fitElementToParent(sphereEl); - - var breathAnimation = anime({ - begin: function() { - for (var i = 0; i < pathLength; i++) { - aimations.push(anime({ - targets: spherePathEls[i], - stroke: {value: ['rgba(255,75,75,1)', 'rgba(80,80,80,.35)'], duration: 500}, - translateX: [2, -4], - translateY: [2, -4], - easing: 'easeOutQuad', - autoplay: false - })); - } - }, - update: function(ins) { - aimations.forEach(function(animation, i) { - var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2; - animation.seek(animation.duration * percent); - }); - }, - duration: Infinity, - autoplay: false - }); - - var introAnimation = anime.timeline({ - autoplay: false - }) - .add({ - targets: sphereEl, - opacity: [.001, 1], - translateY: [60, 0], - duration: 2000, - easing: 'easeOutSine', - }, 0) - .add({ - targets: spherePathEls, - strokeDashoffset: { - value: [anime.setDashoffset, 0], - duration: 3900, - easing: 'easeInOutCirc', - delay: anime.stagger(190, {direction: 'reverse'}) - }, - duration: 2000, - delay: anime.stagger(60, {direction: 'reverse'}), - easing: 'linear' - }, 0); - - var shadowAnimation = anime({ - targets: '#sphereGradient', - x1: '25%', - x2: '25%', - y1: '0%', - y2: '75%', - duration: 30000, - easing: 'easeOutQuint', - autoplay: false - }, 0); - - function play() { - introAnimation.play(); - breathAnimation.play(); - shadowAnimation.play(); - } - - function pause() { - breathAnimation.pause(); - shadowAnimation.pause(); - } - - isElementInViewport(sphereEl, play, pause); - -})(); - -var advancedStaggeringAnimation = (function() { - - var staggerVisualizerEl = document.querySelector('.stagger-visualizer'); - var dotsWrapperEl = staggerVisualizerEl.querySelector('.dots-wrapper'); - var dotsFragment = document.createDocumentFragment(); - var grid = [20, 10]; - var cell = 55; - var numberOfElements = grid[0] * grid[1]; - var animation; - var paused = true; - - fitElementToParent(staggerVisualizerEl); - - for (var i = 0; i < numberOfElements; i++) { - var dotEl = document.createElement('div'); - dotEl.classList.add('dot'); - dotsFragment.appendChild(dotEl); - } - - dotsWrapperEl.appendChild(dotsFragment); - - var index = anime.random(0, numberOfElements-1); - var nextIndex = 0; - - anime.set('.stagger-visualizer .cursor', { - translateX: anime.stagger(-cell, {grid: grid, from: index, axis: 'x'}), - translateY: anime.stagger(-cell, {grid: grid, from: index, axis: 'y'}), - translateZ: 0, - scale: 1.5, - }); - - function play() { - - paused = false; - if (animation) animation.pause(); - - nextIndex = anime.random(0, numberOfElements-1); - - animation = anime.timeline({ - easing: 'easeInOutQuad', - complete: play - }) - .add({ - targets: '.stagger-visualizer .cursor', - keyframes: [ - { scale: .75, duration: 120}, - { scale: 2.5, duration: 220}, - { scale: 1.5, duration: 450}, - ], - duration: 300 - }) - .add({ - targets: '.stagger-visualizer .dot', - keyframes: [ - { - translateX: anime.stagger('-2px', {grid: grid, from: index, axis: 'x'}), - translateY: anime.stagger('-2px', {grid: grid, from: index, axis: 'y'}), - duration: 100 - }, { - translateX: anime.stagger('4px', {grid: grid, from: index, axis: 'x'}), - translateY: anime.stagger('4px', {grid: grid, from: index, axis: 'y'}), - scale: anime.stagger([2.6, 1], {grid: grid, from: index}), - duration: 225 - }, { - translateX: 0, - translateY: 0, - scale: 1, - duration: 1200, - } - ], - delay: anime.stagger(80, {grid: grid, from: index}) - }, 30) - .add({ - targets: '.stagger-visualizer .cursor', - translateX: { value: anime.stagger(-cell, {grid: grid, from: nextIndex, axis: 'x'}) }, - translateY: { value: anime.stagger(-cell, {grid: grid, from: nextIndex, axis: 'y'}) }, - scale: 1.5, - easing: 'cubicBezier(.075, .2, .165, 1)' - }, '-=800') - - index = nextIndex; - - } - - function pause() { - - if (paused) return; - paused = true; - if (animation) animation.pause(); - - animation = anime.timeline({ - easing: 'easeInOutQuad', - duration: 100 - }) - .add({ - targets: '.cursor', - translateX: { value: anime.stagger(-cell, {grid: grid, from: index, axis: 'x'}) }, - translateY: { value: anime.stagger(-cell, {grid: grid, from: index, axis: 'y'}) }, - scale: 1, - }) - .add({ - targets: '.stagger-visualizer .dot', - translateX: 0, - translateY: 0, - scale: 1, - delay: anime.stagger(50, {grid: grid, from: index}) - }, 0) - - } - - isElementInViewport(staggerVisualizerEl, play, pause); - - return { - play: play, - pause: pause - } - -})(); - -var timeControlAnimation = (function() { - - var timeControlEl = document.querySelector('.time-control'); - var rullerEl = document.querySelector('.ruller'); - var timeCursorEl = document.querySelector('.time-cursor'); - var timeEl = document.querySelector('.time-cursor input'); - var infoEls = document.querySelectorAll('.info'); - var fragment = document.createDocumentFragment(); - var numberOfElements = 271; - var controlAnimationCanMove = false; - - for (let i = 0; i < numberOfElements; i++) { - var dotEl = document.createElement('div'); - dotEl.classList.add('line'); - fragment.appendChild(dotEl); - } - - rullerEl.appendChild(fragment); - - var animationPXOffset = (timeControlEl.offsetWidth - (timeControlEl.parentNode.offsetWidth - 20)) / 2; - if (animationPXOffset < 0) animationPXOffset = 0; - - function pxToTime(px) { - var width = window.innerWidth > rullerEl.offsetWidth ? rullerEl.offsetWidth + 180 : window.innerWidth; - var percent = px / (width); - return percent * (timelineAnimation.duration); - } - - var time = { - anim: null, - start: 0, - end: 0 - }; - - var drag = dragElement(timeCursorEl, { - begin: function(e) { - anime.remove(time); - time.start = timelineAnimation.currentTime; - controlAnimationCanMove = false; - }, - move: function(e) { - timelineAnimation.seek(time.start + pxToTime(-e.deltaX)); - }, - release: function(e) { - time.end = timelineAnimation.currentTime; - anime.remove(time); - time.anim = anime({ - targets: time, - end: time.start, - easing: 'spring(.3, 200, 5, 1)', - update: function() { timelineAnimation.seek(time.end); }, - complete: function() { - controlAnimationCanMove = true; - moveControlAnimation(); - } - }); - } - }); - - var timelineAnimation = anime.timeline({ - easing: 'linear', - autoplay: false - }) - .add({ - targets: timeControlEl, - translateX: [animationPXOffset, -animationPXOffset], - duration: 1500 - }, 0) - .add({ - targets: timeCursorEl, - translateZ: 0, - keyframes: [ - { translateY: [-24, 0], duration: 100, easing: 'easeInQuad' }, - { translateX: 1080, duration: 1500 }, - { translateY: -24, duration: 100, easing: 'easeOutQuad' } - ], - duration: 1500 - }, -100) - .add({ - targets: '.ruller .line', - translateY: [ {value: 24}, {value: 0} ], - duration: 160, - delay: anime.stagger([0, 1500]), - easing: 'easeInOutSine' - }, -80) - .add({ - targets: timeEl, - value: [ {value: [0, 100]}, {value: 0}, {value: 100} ], - duration: 1500, - round: 1, - easing: 'linear' - }, 0) - - for (var i = 0; i < infoEls.length; i++) { - var infoEl = infoEls[i]; - var delay = parseFloat(anime.get(infoEl, 'data-delay')); - var direction = infoEl.classList.contains('info-bottom') ? -1 : 1; - timelineAnimation - .add({ - targets: infoEl.querySelector('.info-bar'), - scaleY: [0, 1], - duration: 250, - easing: 'easeOutCirc' - }, delay) - .add({ - targets: infoEl.querySelectorAll('.info .feature-caption'), - opacity: [0, 1], - translateY: [direction * 10, 0], - duration: 50, - delay: anime.stagger(50, {start: 10, direction: direction > 0 ? 'reverse' : 'normal'}), - easing: 'easeOutSine' - }, delay) - } - - var windowHeight = window.innerHeight; - var scrollAnim; - - function moveControlAnimation() { - var rect = timeControlEl.getBoundingClientRect(); - var top = rect.top; - var height = rect.height; - var scrolled = (top - windowHeight + 100) * -1.5; - timelineAnimation.seek(scrolled * 2); - if (controlAnimationCanMove) scrollAnim = requestAnimationFrame(moveControlAnimation); - } - - isElementInViewport(timeControlEl, function(el, entry) { - windowHeight = window.innerHeight; - controlAnimationCanMove = true; - moveControlAnimation(); - }, function(el, entry) { - controlAnimationCanMove = false; - }, '50px'); - - onScroll(function() { - if (time.anim && !time.anim.paused) { - time.anim.pause(); - controlAnimationCanMove = true; - moveControlAnimation(); - } - }); - -})(); - -var layeredAnimation = (function() { - - var transformEls = document.querySelectorAll('.transform-progress'); - var layeredAnimationEl = document.querySelector('.layered-animations'); - var shapeEls = layeredAnimationEl.querySelectorAll('.shape'); - var triangleEl = layeredAnimationEl.querySelector('polygon'); - var trianglePoints = triangleEl.getAttribute('points').split(' '); - var easings = ['easeInOutQuad', 'easeInOutCirc', 'easeInOutSine', 'spring']; - - fitElementToParent(layeredAnimationEl); - - function createKeyframes(value) { - var keyframes = []; - for (var i = 0; i < 30; i++) keyframes.push({ value: value }); - return keyframes; - } - - function animateShape(el) { - - var circleEl = el.querySelector('circle'); - var rectEl = el.querySelector('rect'); - var polyEl = el.querySelector('polygon'); - - var animation = anime.timeline({ - targets: el, - duration: function() { return anime.random(600, 2200); }, - easing: function() { return easings[anime.random(0, easings.length - 1)]; }, - complete: function(anim) { animateShape(anim.animatables[0].target); }, - }) - .add({ - translateX: createKeyframes(function(el) { - return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520); - }), - translateY: createKeyframes(function(el) { - return el.classList.contains('large') ? anime.random(-110, 110) : anime.random(-280, 280); - }), - rotate: createKeyframes(function() { return anime.random(-180, 180); }), - }, 0); - if (circleEl) { - animation.add({ - targets: circleEl, - r: createKeyframes(function() { return anime.random(32, 72); }), - }, 0); - } - if (rectEl) { - animation.add({ - targets: rectEl, - width: createKeyframes(function() { return anime.random(64, 120); }), - height: createKeyframes(function() { return anime.random(64, 120); }), - }, 0); - } - if (polyEl) { - animation.add({ - targets: polyEl, - points: createKeyframes(function() { - var scale = anime.random(72, 180) / 100; - return trianglePoints.map(function(p) { return p * scale; }).join(' '); - }), - }, 0); - } - - isElementInViewport(layeredAnimationEl, animation.play, animation.pause); - - } - - for (var i = 0; i < shapeEls.length; i++) { - animateShape(shapeEls[i]); - } - - function animateProgress(el) { - var animation = anime.timeline({ - targets: el, - duration: function() { return anime.random(400, 1800); }, - easing: function() { return easings[anime.random(0, easings.length - 2)]; }, - complete: function(anim) { animateProgress(anim.animatables[0].target); }, - }) - .add({ - transformOrigin: createKeyframes(function(el) { - return anime.random(0, 100) + '%'; - }) - }, 0) - .add({ - scaleX: createKeyframes(function(el) { - return anime.random(10, 100) / 100; - }) - }, 0); - isElementInViewport(layeredAnimationEl, animation.play, animation.pause); - } - - for (var i = 0; i < transformEls.length; i++) { - animateProgress(transformEls[i]); - } - -})(); - -var scrollToGettingStartedLink = document.querySelector('.scroll-to-getting-started'); - -scrollToGettingStartedLink.addEventListener('click', function(e) { - e.preventDefault(); - scrollToElement(document.querySelector('#getting-started')); -}) - -window.onload = introEasingsAnimation.init; \ No newline at end of file diff --git a/js/anime-master/documentation/examples/DOM-stress-test.html b/js/anime-master/documentation/examples/DOM-stress-test.html deleted file mode 100644 index 1e7d2e8..0000000 --- a/js/anime-master/documentation/examples/DOM-stress-test.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - DOM stress test | anime.js - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/js/anime-master/documentation/examples/advanced-staggering-2.html b/js/anime-master/documentation/examples/advanced-staggering-2.html deleted file mode 100644 index ad0d4e1..0000000 --- a/js/anime-master/documentation/examples/advanced-staggering-2.html +++ /dev/null @@ -1,158 +0,0 @@ - - - - advanced staggering • anime.js - - - - - - - - - - - - - - - - - - - -
-
-
- - - - diff --git a/js/anime-master/documentation/examples/advanced-staggering.html b/js/anime-master/documentation/examples/advanced-staggering.html deleted file mode 100644 index 957ead4..0000000 --- a/js/anime-master/documentation/examples/advanced-staggering.html +++ /dev/null @@ -1,152 +0,0 @@ - - - - advanced staggering • anime.js - - - - - - - - - - - - - - - - - - - -
-
-
- - - - diff --git a/js/anime-master/documentation/examples/animejs-mgs-logo-animation.html b/js/anime-master/documentation/examples/animejs-mgs-logo-animation.html deleted file mode 100644 index 793c2d6..0000000 --- a/js/anime-master/documentation/examples/animejs-mgs-logo-animation.html +++ /dev/null @@ -1,243 +0,0 @@ - - - - Anime MGS logo animation | anime.js - - - - - - - - - - - - - - - - - - - - -
- -
- - - - diff --git a/js/anime-master/documentation/examples/animejs-v2-logo-animation.html b/js/anime-master/documentation/examples/animejs-v2-logo-animation.html deleted file mode 100644 index 40dfad7..0000000 --- a/js/anime-master/documentation/examples/animejs-v2-logo-animation.html +++ /dev/null @@ -1,337 +0,0 @@ - - - - Anime logo animation | anime.js - - - - - - - - - - - - - - - - - - - - -
-
-
- - - - - - - -
-
- - - - - - - - - - -
-
- - - - - - - -
-
- - - - - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
-
- - - - - - - -
-
- - - - - - - - - -
-
-
- - - - - -
-
- - - - - -
-
-
- - - - diff --git a/js/anime-master/documentation/examples/animejs-v3-logo-animation.html b/js/anime-master/documentation/examples/animejs-v3-logo-animation.html deleted file mode 100644 index 87c1903..0000000 --- a/js/anime-master/documentation/examples/animejs-v3-logo-animation.html +++ /dev/null @@ -1,391 +0,0 @@ - - - - Anime logo animation | anime.js - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/js/anime-master/documentation/examples/built-in-easings.html b/js/anime-master/documentation/examples/built-in-easings.html deleted file mode 100644 index 26adf81..0000000 --- a/js/anime-master/documentation/examples/built-in-easings.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - built-in easings • anime.js - - - - - - - - - - - - - - - - - - - -
-
-
-
- - - - diff --git a/js/anime-master/documentation/examples/callbacks.html b/js/anime-master/documentation/examples/callbacks.html deleted file mode 100644 index 0b1369c..0000000 --- a/js/anime-master/documentation/examples/callbacks.html +++ /dev/null @@ -1,354 +0,0 @@ - - - - Anime states system | anime.js - - - - - - - - - - - - - - - - - - - -
- -
- -
-
- -
-
- - - - diff --git a/js/anime-master/documentation/examples/colors-test.html b/js/anime-master/documentation/examples/colors-test.html deleted file mode 100644 index a216b88..0000000 --- a/js/anime-master/documentation/examples/colors-test.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - Colors test | anime.js - - - - - - - - - - - - - - - - - - - - -
-

HEX

-
-
#F47

#6AF
-
#FF4477

#66AAFF
-
#FF4477

rgb(102,170,255)
-
#FF4477

hsl(213,100%,70%)
-
#FF4477

rgba(102,170,255,.15)
-
#FF4477

hsla(213,100%,70%,.15)
-
-
-
-

RGB

-
-
rgb(255,68,119)

#6AF
-
rgb(255,68,119)

#66AAFF
-
rgb(255,68,119)

rgb(102,170,255)
-
rgb(255,68,119)

hsl(213,100%,70%)
-
rgb(255,68,119)

rgba(102,170,255,.15)
-
rgb(255,68,119)

hsla(213,100%,70%,.15)
-
rgba(255,68,119,.5)

rgba(102,170,255,.15)
-
rgba(255,68,119,.5)

hsla(213,100%,70%,.15)
-
-
-
-

HSL

-
-
hsl(344,100%,63%)

#6AF
-
hsl(344,100%,63%)

#66AAFF
-
hsl(344,100%,63%)

rgb(102,170,255)
-
hsl(344,100%,63%)

hsl(213,100%,70%)
-
hsl(344,100%,63%)

rgba(102,170,255,.15)
-
hsl(344,100%,63%)

hsla(213,100%,70%,.15)
-
hsla(344,100%,63%,.5)

rgba(102,170,255,.15)
-
hsla(344,100%,63%,.5)

hsla(213,100%,70%,.15)
-
-
- - - diff --git a/js/anime-master/documentation/examples/complex-properties.html b/js/anime-master/documentation/examples/complex-properties.html deleted file mode 100644 index 85821d3..0000000 --- a/js/anime-master/documentation/examples/complex-properties.html +++ /dev/null @@ -1,187 +0,0 @@ - - - - Complex properties | anime.js - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
- - - - - - - - -
-
- - - - diff --git a/js/anime-master/documentation/examples/directions-testing.html b/js/anime-master/documentation/examples/directions-testing.html deleted file mode 100644 index 47b56b4..0000000 --- a/js/anime-master/documentation/examples/directions-testing.html +++ /dev/null @@ -1,186 +0,0 @@ - - - - Diretions Testing | anime.js - - - - - - - - - - - - - - - - - - - - - - diff --git a/js/anime-master/documentation/examples/ease-visualizer.html b/js/anime-master/documentation/examples/ease-visualizer.html deleted file mode 100644 index ebad799..0000000 --- a/js/anime-master/documentation/examples/ease-visualizer.html +++ /dev/null @@ -1,419 +0,0 @@ - - - - Ease visualizer | anime.js - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - diff --git a/js/anime-master/documentation/examples/follow-scroll.html b/js/anime-master/documentation/examples/follow-scroll.html deleted file mode 100644 index d5c1d6a..0000000 --- a/js/anime-master/documentation/examples/follow-scroll.html +++ /dev/null @@ -1,238 +0,0 @@ - - - - Follow scroll | anime.js - - - - - - - - - - - - - - - - - - - - - -
- -
-
01
-
02
-
03
-
04
-
05
-
06
-
07
-
08
-
09
-
10
-
11
-
12
-
13
-
14
-
- - - - - diff --git a/js/anime-master/documentation/examples/keyframes.html b/js/anime-master/documentation/examples/keyframes.html deleted file mode 100644 index 58b3186..0000000 --- a/js/anime-master/documentation/examples/keyframes.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - stagger | anime.js - - - - - - - - - - - - - - - - - - - -
- - - - - diff --git a/js/anime-master/documentation/examples/layered-animations.html b/js/anime-master/documentation/examples/layered-animations.html deleted file mode 100644 index 5816f73..0000000 --- a/js/anime-master/documentation/examples/layered-animations.html +++ /dev/null @@ -1,155 +0,0 @@ - - - - layered animations • anime.js - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - -
- - - - diff --git a/js/anime-master/documentation/examples/speed-test.html b/js/anime-master/documentation/examples/speed-test.html deleted file mode 100644 index e1abcba..0000000 --- a/js/anime-master/documentation/examples/speed-test.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - domaku | anime.js - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/js/anime-master/documentation/examples/stagger-demo.html b/js/anime-master/documentation/examples/stagger-demo.html deleted file mode 100644 index ab2a029..0000000 --- a/js/anime-master/documentation/examples/stagger-demo.html +++ /dev/null @@ -1,153 +0,0 @@ - - - - stagger | anime.js - - - - - - - - - - - - - - - - - - - -
- - - - diff --git a/js/anime-master/documentation/examples/stagger-grid-demo.html b/js/anime-master/documentation/examples/stagger-grid-demo.html deleted file mode 100644 index 26e9d1e..0000000 --- a/js/anime-master/documentation/examples/stagger-grid-demo.html +++ /dev/null @@ -1,130 +0,0 @@ - - - - stagger | anime.js - - - - - - - - - - - - - - - - - - - -
- - - - diff --git a/js/anime-master/documentation/examples/stagger-tests.html b/js/anime-master/documentation/examples/stagger-tests.html deleted file mode 100644 index 6549ba0..0000000 --- a/js/anime-master/documentation/examples/stagger-tests.html +++ /dev/null @@ -1,440 +0,0 @@ - - - - stagger | anime.js - - - - - - - - - - - - - - - - - - - -
- -
- -
-

Normal

-
-
- -
-

Normal reversed

-
-
- -
-

From last

-
-
- -
-

From last reversed

-
-
- -
-

From center

-
-
- -
-

From center reversed

-
-
- -
-

From index

-
-
- -
-

From index reversed

-
-
- -
-

Range

-
-
- -
-

Range reversed

-
-
- -
-

Range from last

-
-
- -
-

Range from last reversed

-
-
- -
-

Range from center

-
-
- -
-

Range from center reversed

-
-
- -
-

Easing

-
-
- -
-

Easing reversed

-
-
- -
-

Coordinates

-
-
-
-
-
-
-
-
- -
-

Coordinates reversed

-
-
-
-
-
-
-
-
- -
-

Coordinates reversed

-
-
-
-
-
-
-
-
- -
-

Coordinates reversed

-
-
-
-
-
-
-
-
- -
- - - - diff --git a/js/anime-master/documentation/examples/staggered-animations.html b/js/anime-master/documentation/examples/staggered-animations.html deleted file mode 100644 index 85a1d65..0000000 --- a/js/anime-master/documentation/examples/staggered-animations.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - Staggered loops | anime.js - - - - - - - - - - - - - - - - - - - - -
- - - - diff --git a/js/anime-master/documentation/examples/staggered-easing-demo.html b/js/anime-master/documentation/examples/staggered-easing-demo.html deleted file mode 100644 index b3e77d6..0000000 --- a/js/anime-master/documentation/examples/staggered-easing-demo.html +++ /dev/null @@ -1,126 +0,0 @@ - - - - stagger | anime.js - - - - - - - - - - - - - - - - - - - -
- - - - diff --git a/js/anime-master/documentation/examples/svg-lines-animations.html b/js/anime-master/documentation/examples/svg-lines-animations.html deleted file mode 100644 index e8399ca..0000000 --- a/js/anime-master/documentation/examples/svg-lines-animations.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - SVG line drawing | anime.js - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - -
- - - - - diff --git a/js/anime-master/documentation/examples/svg-path-animation-responsive.html b/js/anime-master/documentation/examples/svg-path-animation-responsive.html deleted file mode 100644 index 8be3a09..0000000 --- a/js/anime-master/documentation/examples/svg-path-animation-responsive.html +++ /dev/null @@ -1,118 +0,0 @@ - - - - SVG responsive path animation | anime.js - - - - - - - - - - - - - - - - - - -

No specified width

-
- - - - -
-
-

Specified width

-
- - - - -
-
-

preserveAspectRatio with specified width

-
- - - - -
-
- - - - - diff --git a/js/anime-master/documentation/examples/svg-path-animation.html b/js/anime-master/documentation/examples/svg-path-animation.html deleted file mode 100644 index 6c7df51..0000000 --- a/js/anime-master/documentation/examples/svg-path-animation.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - SVG line drawing | anime.js - - - - - - - - - - - - - - - - - - -
- -
- - - - diff --git a/js/anime-master/documentation/examples/time-control.html b/js/anime-master/documentation/examples/time-control.html deleted file mode 100644 index 7de7999..0000000 --- a/js/anime-master/documentation/examples/time-control.html +++ /dev/null @@ -1,409 +0,0 @@ - - - - time control • anime.js - - - - - - - - - - - - - - - - - - -
- -

- Time control & callbacks -

- -

- Play, pause, control, reverse and trigger events in sync -

- -
-
-
- -
-
-
-
-
-
loop begin
-
animation begin
-
-
-
-
-
-
change begin
-
-
-
-
-
change complete
-
-
-
-
-
-
loop complete
-
-
-
-
loop begin
-
reverse
-
-
-
-
-
-
change begin
-
-
-
-
-
change complete
-
-
-
-
-
-
loop complete
-
-
-
-
loop begin
-
reverse
-
-
-
-
-
-
change begin
-
-
-
-
-
change complete
-
-
-
-
-
-
animation complete
-
loop complete
-
-
-
- -
- - - - diff --git a/js/anime-master/documentation/examples/timeline.html b/js/anime-master/documentation/examples/timeline.html deleted file mode 100644 index fd5d459..0000000 --- a/js/anime-master/documentation/examples/timeline.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - Anime timeline | anime.js - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
-
-
-
-
- -
- -
-
-
- - - - - -
-
- -
-
-
-
- - - - - diff --git a/js/anime-master/documentation/examples/transforms-demo.html b/js/anime-master/documentation/examples/transforms-demo.html deleted file mode 100644 index ab90a0a..0000000 --- a/js/anime-master/documentation/examples/transforms-demo.html +++ /dev/null @@ -1,110 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - -
- - - - diff --git a/js/anime-master/documentation/index.html b/js/anime-master/documentation/index.html deleted file mode 100644 index 99e5233..0000000 --- a/js/anime-master/documentation/index.html +++ /dev/null @@ -1,4182 +0,0 @@ - - - - Documentation | anime.js - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
- -
- - -
-
-

Targets

-
- -
-

CSS Selector

-
-

Can be any CSS selector.

-

Pseudo elements can't be targeted using JavaScript.

- - - - - - - - - - - -
TypeDefaultExample
Stringnulltargets: '.item'
-
-
-
-
-
-
-
- - -
- -
-

DOM Node / NodeList

-
-

- Can be any DOM Node or NodeList. -

- - - - - - - - - - - - - - - - -
TypeDefaultExample
DOM Nodenulltargets: el.querySelector('.item')
NodeListnulltargets: el.querySelectorAll('.item')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-

JavaScript Object

-
-

- A JavaScript Object with at least one property containing a numerical value. -

- - - - - - - - - - - -
TypeDefaultExample
Objectnulltargets: myObjectProp
-
-
-
{"charged":"0%","cycles":120}
-
- - -
- -
-

Array

-
-

- An array containing multiple targets. -

-

- Accepts mixed types. E.g. ['.el', domNode, jsObject] -

- - - - - - - - - - - -
TypeDefaultExample
Arraynulltargets: ['.item', el.getElementById('#thing')]
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
- - - -
-
-

Properties

-
- -
-

CSS Properties

-
-

- Any CSS properties can be animated. -

-

- Most CSS properties will cause layout changes or repaint, and will result in choppy animation. - Prioritize opacity and CSS transforms as much as possible. -

-

More details about accepted values in the values section.

- - - - - - - - - - - - - -
Examplevalue
opacity.5
left'100px'
-
-
-
-
-
- -
- -
-

CSS Transforms

-
-

- Animate CSS transforms properties individually. -

-

- It's possible to specify different timing for each transforms properties, more details in the specific property parameters section. -

-

More details about accepted values in the values section.

- - - - - - - - - - - - - - - - - - - - -
Valid propertiesDefault unit
'translateX''px'
'translateY''px'
'translateZ''px'
'rotate''deg'
'rotateX''deg'
'rotateY''deg'
'rotateZ''deg'
'scale'
'scaleX'
'scaleY'
'scaleZ'
'skew''deg'
'skewX''deg'
'skewY''deg'
'perspective''px'
-
-
-
-
-
- -
- -
-

Object properties

-
-

- Any Object property containing a numerical value can be animated.
- More details about accepted values in the values section. -

- - - - - - - - - - - - - -
Examplevalue
prop150
'prop2''100%'
-
-
-
{"prop1":0,"prop2":"0%"}
-
- -
- -
-

DOM Attributes

-
-

- Any DOM Attributes containing a numerical value can be animated.
- More details about accepted values in the values section. -

- - - - - - - - - - - - - - - - - -
Examplevalue
value1000
volume0
data-custom'3 dogs'
-
-
- -
- -
- -
-

SVG Attributes

-
-

- Like any other DOM attributes, all SVG attributes containing at least one numerical value can be animated.
- More details about accepted values in the values section and SVG animation in the SVG section. -

- - - - - - - - - - - - - - - - - -
Examplevalue
points'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'
scale1
baseFrequency0
-
-
- - - - - - - -
- - -
- -
- - - -
-
-

Property parameters

-
- -
-

Duration

-
-

- Defines the duration in milliseconds of the animation. -

- - - - - - - - - - - - - - - - - - - - - -
TypeDefaultExample
Number10003000
anime.staggerSee staggering sectionanime.stagger(150)
FunctionSee function based parameters section(el, i) => i * 150
-
-
-
3000 ms
-
-
-
- -
- -
-

Delay

-
-

- Defines the delay in milliseconds of the animation. -

- - - - - - - - - - - - - - - - - - - - - -
TypeDefaultExample
Number01000
anime.staggerSee staggering sectionanime.stagger(150)
FunctionSee function based parameters section(el, i) => i * 150
-
-
-
1000 ms
-
-
-
- -
- -
-

end delay

-
-

- Adds some extra time in milliseconds at the end of the animation. -

- - - - - - - - - - - - - - - - - - - - - -
TypeDefaultExample
Number01000
anime.staggerSee staggering sectionanime.stagger(150)
FunctionSee function based parameters section(el, i) => i * 150
-
-
-
1000 ms
-
-
-
- - -
- -
-

Easing

-
-

- Defines the timing function of the animation. -

-

- Check out the easings section for a complete list of available easing and parameters. -

- - - - - - - - - - - -
TypeDefaultExample
String'easeOutElastic(1, .5)'easing: 'easeInOutQuad'
-
-
-
easeInOutExpo
-
-
-
- - -
- -
-

Round

-
-

- Rounds up the value to x decimals. -

- - - - - - - - - - - -
TypeDefaultExample
Number0round: 10
-
-
-
0
-
- -
- -
-

Specific property parameters

-
-

- Defines specific parameters to each property of the animation using an Object as value.
- Other properties that aren't specified in the Object are inheritted from the main animation. -

- - - - - - - - - -
TypeExample
Objectrotate: { - value: 360, - duration: 1800, - easing: 'easeInOutSine' -}
-
-
-
-
-
- - -
- -
-

Function based parameters

-
-

- Get different values for every target and property of the animation. -

-

- The function accepts 3 arguments: -

- - - - - - - - - - - - - - - - - -
ArgumentsInfos
targetThe curent animated targeted element
indexThe index of the animated targeted element
targetsLengthThe total number of animated targets
-

- See staggering section for easier values manipulation. -

-
-
-
-
delay = 0 * 100
-
-
-
-
-
delay = 1 * 100
-
-
-
-
-
delay = 2 * 100
-
-
-
-
- - -
- -
- - - -
-
-

Animation parameters

-
- -
-

Direction

-
-

- Defines the direction of the animation. -

- - - - - - - - - - - - - - - - - -
AcceptsInfos
'normal'Animation progress goes from 0 to 100%
'reverse'Animation progress goes from 100% to 0%
'alternate'Animation progress goes from 0% to 100% then goes back to 0%
-
-
-
-
normal
-
-
-
-
-
reverse
-
-
-
-
-
alternate
-
-
-
-
- - -
- -
-

Loop

-
-

- Defines the number of iterations of your animation. -

- - - - - - - - - - - - - -
AcceptsInfos
NumberThe number of iterations
trueLoop indefinitely
-
-
-
-
normal 3 times
-
-
-
-
-
reverse 3 times
-
-
-
-
-
alternate 3 times
-
-
-
-
-
normal inifinite
-
-
-
-
-
inifinite reverse
-
-
-
-
-
inifinite alternate
-
-
-
-
- -
- -
-

Autoplay

-
-

- Defines if the animation should automatically starts or not. -

- - - - - - - - - - - - - -
AcceptsInfos
trueAutomatically starts the animation
falseAnimation is paused by default
-
-
-
-
autoplay: true
-
-
-
-
-
autoplay: false
-
-
-
-
- -
- -
- - - -
-
-

Values

-
- -
-

Unitless

-
-

- If the original value has a unit, it will be automatically added to the animated value. -

- - - - - - - - - -
TypeExample
NumbertranslateX: 250
-
-
-
-
-
- - -
- -
-

Specific unit

-
-

- Forces the animation to use a certain unit and will automatically convert the initial target value. -

-

- Conversion accuracy can vary depending of the unit used.
- You can also define the initial value of the animation directly using an array, see the from to values section. -

- - - - - - - - - -
TypeExample
Stringwidth: '100%'
-
-
-
-
-
- - -
- -
-

Relative

-
-

- Adds, substracts or multiplies the original value. -

- - - - - - - - - - - - - - - - - - - - - -
AcceptsEffectExample
'+='Add'+=100'
'-='Substract'-=2turn'
'*='Multiply'*=10'
-
-
-
-
-
- - -
- -
-

Colors

-
-

- anime.js accepts and converts Hexadecimal, RGB, RGBA, HSL, and HSLA color values. -

-

- CSS color codes ( e.g. : 'red', 'yellow', 'aqua' ) are not supported. -

- - - - - - - - - - - - - - - - - - - - - - - - - -
AcceptsExample
Hexadecimal'#FFF' or '#FFFFFF'
RGB'rgb(255, 255, 255)'
RGBA'rgba(255, 255, 255, .2)'
HSL'hsl(0, 100%, 100%)'
HSLA'hsla(0, 100%, 100%, .2)'
-
-
-
-
HEX
-
-
-
-
-
RGB
-
-
-
-
-
HSL
-
-
-
-
-
RGBA
-
-
-
-
-
HSLA
-
-
-
-
- - -
- -
-

From To

-
-

- Forces the animation to start at a specified value. -

- - - - - - - - - -
TypeExample
Array['50%', '100%']
-
-
-
-
-
- - -
- -
-

Function based values

-
-

- Get different values for every target and property of the animation. -

-

- The function accepts 3 arguments: -

- - - - - - - - - - - - - - - - - -
ArgumentsInfos
targetThe curently animated targeted element
indexThe index of the animated targeted element
targetsLengthThe total number of animated targets
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
- - - -
-
-

Keyframes

-
- -
-

Animation keyframes

-
-

- Animation keyframes are defined using an Array, within the keyframes property. -

-

- If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes. -

- - - - - - - - - -
TypeExample
Array[ - {value: 100, easing: 'easeOutExpo'}, - {value: 200, delay: 500}, - {value: 300, duration: 1000} -]
-
-
-
-
-
- -
- -
-

Property keyframes

-
-

- Similar to animation keyframes, property keyframes are defined using an Array of property Object. Property keyframes allow overlapping animations since each property have its own keyframes array. -

-

- If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes. -

- - - - - - - - - -
TypeExample
Array[ - {value: 100, easing: 'easeOutExpo'}, - {value: 200, delay: 500}, - {value: 300, duration: 1000} -]
-
-
-
-
-
- -
- -
- - - -
-
-

Staggering

-
- -
-

Staggering basics

-
-

- Staggering allows you to animate multiple elements with follow through and overlapping action. -

-
anime.stagger(value, options)
- - - - - - - - - - - - - - - - - - - -
ArgumentsTypeInfoRequired
ValueNumber, String, ArrayThe manipulated value(s)Yes
OptionsObjectStagger parametersNo
-
-
-
-
delay = (100 * 0) ms
-
-
-
-
-
delay = (100 * 1) ms
-
-
-
-
-
delay = (100 * 2) ms
-
-
-
-
-
delay = (100 * 3) ms
-
-
-
-
-
delay = (100 * 4) ms
-
-
-
-
-
delay = (100 * 5) ms
-
-
-
-
- -
- -
-

Start value

-
-

- Starts the staggering effect from a specific value. -

-
anime.stagger(value, {start: startValue})
- - - - - - - - -
TypesInfo
Number, String - Same as propety values, see values section
-
-
-
-
delay = 500 + (100 * 0) ms
-
-
-
-
-
delay = 500 + (100 * 1) ms
-
-
-
-
-
delay = 500 + (100 * 2) ms
-
-
-
-
-
delay = 500 + (100 * 3) ms
-
-
-
-
-
delay = 500 + (100 * 4) ms
-
-
-
-
-
delay = 500 + (100 * 5) ms
-
-
-
-
- -
- -
-

Range value

-
-

- Distributes evenly values between two numbers. -

-
anime.stagger([startValue, endValue])
- - - - - - - - - - - - - -
TypeInfo
'easingName'All valid easing names are accepted, see easings section
function(i)Custom easing function, see custom easings section
-
-
-
-
rotate = -360 + ((360 - (-360)) / 5) * 0
-
-
-
-
-
rotate = -360 + ((360 - (-360)) / 5) * 1
-
-
-
-
-
rotate = -360 + ((360 - (-360)) / 5) * 2
-
-
-
-
-
rotate = -360 + ((360 - (-360)) / 5) * 3
-
-
-
-
-
rotate = -360 + ((360 - (-360)) / 5) * 4
-
-
-
-
-
rotate = -360 + ((360 - (-360)) / 5) * 5
-
-
-
-
- -
- -
-

From value

-
-

- Starts the stagger effect from a specific position. -

-
anime.stagger(value, {from: startingPosition})
- - - - - - - - - - - - - - - - - - - - - - - - - - -
OptionsTypeInfo
'first' (default)'string'Start the effect from the first element
'last''string'Start the effect from the last element
'center''string'Start the effect from the center
indexnumberStart the effect from the specified index
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-

Direction

-
-

- Changes the order in which the stagger operates. -

-
anime.stagger(value, {direction: 'reverse'})
- - - - - - - - - - - - - -
OptionsInfo
'normal' (default)Normal staggering, from the first element to the last
'reverse'Reversed staggering, from the last element to the first
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-

Easing

-
-

- Stagger values using an easing function. -

-
anime.stagger(value, {easing: 'easingName'})
- - - - - - - - - - - - - -
TypeInfo
'string'All valid easing names are accepted
function(i)Use your own custom easings function
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-

Grid

-
-

- Staggering values based a 2D array that allow "ripple" effects. -

-
anime.stagger(value, {grid: [rows, columns]})
- - - - - - - - - -
TypeInfo
arrayA 2 items array, the first value is the number of rows, the second the number of columns
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-

Axis

-
-

- Forces the direction of a grid starrering effect. -

-
anime.stagger(value, {grid: [rows, columns], axis: 'x'})
- - - - - - - - - - - - - -
ParametersInfo
'x'Follows the x axis
'y'Follows the y axis
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
- - - -
-
-

Timeline

-
- -
-

Timeline basics

-
-

- Timelines let you synchronise multiple animations together.
- By default each animation added to the timeline starts after the previous animation ends. -

-

- Creating a timeline: -

-
var myTimeline = anime.timeline(parameters);
- - - - - - - - - - - - - -
ArgumentTypeInfoRequired
parametersObjectThe default parameters of the timeline inherited by childrenNo
-

- Adding animations to a timeline: -

-
myTimeline.add(parameters, offset);
- - - - - - - - - - - - - - - - - - - -
ArgumentTypesInfoRequired
parametersObjectThe child animation parameters, override the timeline default parametersYes
time offsetString or NumberCheck out the Timeline offsets sectionNo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
-

Time Offsets

-
-

- Time offsets can be specified with a second optional parameter using the timeline .add() function. It defines when a animation starts in the timeline, if no offset is specifed, the animation will starts after the previous animation ends.
- An offset can be relative to the last animation or absolute to the whole timeline. -

- - - - - - - - - - - - - - - - - - - - - - - - - -
TypeOffsetExampleInfos
String'+=''+=200'Starts 200ms after the previous animation ends
String'-=''-=200'Starts 200ms before the previous animation ends
NumberNumber100Starts at 100ms, reagardless of the animtion position in the timeline
-
-
-
-
no offset
-
-
-
-
-
relative offset ('-=600')
-
-
-
-
-
absolute offset (400)
-
-
-
-
- -
- -
-

Parameters inheritance

-
-

- Parameters set in the parent timeline instance will be inherited by all the children. -

- - - - - - - - - - - - - - - - - - - -
Parameters that can be inherited
targets
duration
delay
endDelay
round
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
- - - -
-
-

Controls

-
- -
-

Play / Pause

-
-

Plays a paused animation, or starts the animation if the autoplay parameters is set to false.

-
animation.play();
-

Pauses a running animation.

-
animation.pause();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- -
- -
-

Restart

-
-

Restarts an animation from its initial values.

-
animation.restart();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - -
- -
-

Reverse

-
-

Reverses the direction of an animation.

-
animation.reverse();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - -
- -
-

Seek

-
-

Jump to a specific time (in milliseconds).

-
animation.seek(timeStamp);
-

Can also be used to control an animation while scrolling.

-
animation.seek((scrollPercent / 100) * animation.duration);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - -
- -
-

Timeline controls

-
-

Timelines can be controled like any other anime.js instance.

-
timeline.play();
-timeline.pause();
-timeline.restart();
-timeline.seek(timeStamp);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
- - -
- -
- - - -
-
-

Callbacks & Promises

-
- -
-

Update

-
-

- Callback triggered on every frame as soon as the animation starts playing. -

- - - - - - - - - - - -
TypeParametersInfo
FunctionanimationReturn the current animation Object
-
-
-
- - -
-
-
-
- -
- -
-

Begin & Complete

-
-

begin() callback is triggered once, when the animation starts playing.

-

complete() callback is triggered once, when the animation is completed.

-

Both begin() and complete() callbacks are called if the animation's duration is 0.

- - - - - - - - - - - -
TypeParametersInfo
FunctionanimationReturn the current animation Object
-
-
-
- - - -
-
-
-
- -
- -
-

loopBegin & loopComplete

-
-

loopBegin() callback is triggered once everytime a loop begin.

-

loopComplete() callback is triggered once everytime a loop is completed.

- - - - - - - - - - - -
TypeParametersInfo
FunctionanimationReturn the current animation Object
-
-
-
- - -
-
-
-
- -
- -
-

Change

-
-

- Callback triggered on every frames in between the animation's delay and endDelay. -

- - - - - - - - - - - -
TypeParametersInfo
FunctionanimationReturn the current animation Object
-
-
-
- - -
-
-
-
- -
- -
-

changeBegin & changeComplete

-
-

changeBegin() callback is triggered everytime the animation starts changing.

-

changeComplete() callback is triggered everytime the animation stops changing.

-

Animation direction will affect the order in which changeBegin() and changeComplete() are triggerd.

- - - - - - - - - - - -
TypeParametersInfo
FunctionanimationReturn the current animation Object
-
-
-
- - - -
-
-
-
- -
- -
-

Finished promise

-
-

- Every animation instances return a finished promise when the animation finised. -

-
animation.finished.then(function() {
-  // Do things...
-});
-

- Promises are not suported in IE < 11. -

-
-
-
- - -
-
-
-
- - -
- -
- - - -
-
-

SVG

-
- -
-

Motion path

-
-

- Animates an element relative to the x, y and angle values of an SVG path element. -

-
var myPath = anime.path('svg path');
-

- The path function returns a new Function that returns the specified property. -

-

- Motion path animations are responsive since v3 -

- - - - - - - - - - - - - - - - - - - - - -
ParametersExampleInfo
'x'myPath('x')Return the current x value in 'px' of the SVG path
'y'myPath('y')Return the current y value in 'px' of the SVG path
'angle'myPath('angle')Return the current angle value in 'degrees' of the SVG path
-
-
-
- - - - - -
-
- - -
- -
-

Morphing

-
-

- Creates transition between two svg shapes. -

-

- Shapes must have the same number of points! -


-

- More info on SVG shape morphing here. -

-
-
- - - - - - - - - - - -
- - -
- -
-

Line drawing

-
-

- Creates path drawing animation using the 'stroke-dashoffset' property.
- Set the path 'dash-offset' value with anime.setDashoffset() in a from to formated value. -

-
strokeDashoffset: [anime.setDashoffset, 0]
-

- More info on line drawing animation here. -

-
-
- - - - - - - - - - - -
- - -
- -
- - - -
-
-

Easings

-
- -
-

Linear

-
-

- Does not apply any easing timing to your animation.
- Usefull for opacity and colors transitions. -

-
easing: 'linear'
-
-
-
-
-
-
-
- - -
- -
-

Penner's functions

-
-

- Built-in Robert Penner's easing functions. -

-

- See easings in action on easings.net. -

-
easing: 'easeInOutSine'
-

- Availabe easings : -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
inoutin-outout-in
'easeInQuad''easeOutQuad''easeInOutQuad''easeOutInQuad'
'easeInCubic''easeOutCubic''easeInOutCubic''easeOutInCubic'
'easeInQuart''easeOutQuart''easeInOutQuart''easeOutInQuart'
'easeInQuint''easeOutQuint''easeInOutQuint''easeOutInQuint'
'easeInSine''easeOutSine''easeInOutSine''easeOutInSine'
'easeInExpo''easeOutExpo''easeInOutExpo''easeOutInExpo'
'easeInCirc''easeOutCirc''easeInOutCirc''easeOutInCirc'
'easeInBack''easeOutBack''easeInOutBack''easeOutInBack'
'easeInBounce''easeOutBounce''easeInOutBounce''easeOutInBounce'
-
-
- -
- - -
- -
-

Cubic Bézier Curve

-
-

- Use your own custom cubic Bézier curves cubicBezier(x1, y1, x2, y2). -

-
easing: 'cubicBezier(.5, .05, .1, .3)'
-

- You can use Bézier curves generator like Ceaser to generate your curves coordinates. -

-
-
-
-
-
-
-
- - -
- -
-

Spring

-
-

- Spring physics based easing. -

-
easing: 'spring(mass, stiffness, damping, velocity)'
-

- The duration of a spring animation is defined by the spring parameters.
- The animation duration parameter will not be taken into account. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterDefaultMinMax
Mass10100
Stiffness1000100
Damping100100
Velocity00100
-
-
-
-
-
-
-
- - -
- -
-

Elastic

-
-

Elastic easing.

-
easing: 'easeOutElastic(amplitude, period)'
- - - - - - - - - - - - - -
inoutin-outout-in
'easeInElastic''easeOutElastic''easeInOutElastic''easeOutInElastic'
- - - - - - - - - - - - - - - - - - - - - - -
ParameterDefaultMinMaxInfo
Amplitude1110Controls the overshoot of the curve. The larger this number, the more overshoot there is.
Period.50.12Controls how many times the curve goes back and forth. The smaller this number, the more times the curtain goes back and forth.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
-

Steps

-
-

- Defines the number of jumps an animation takes to arrive at its end value. -

-
easing: 'steps(numberOfSteps)'
- - - - - - - - - - - - - -
ParameterDefaultMinMax
Number of steps101
-
-
-
-
-
-
-
- - -
- -
-

Custom easing function

-
-

- A custom easing function must be returned by function based value. -

-
easing: function() { return function(time) { return time * i} }
- - - - - - - - - -
ParameterInfo
TimeReturn the current time of the animation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
- - - -
-
-

Helpers

-
- -
-

remove

-
-

- Removes targets from a running animation or timeline.
- The targets parameters accepts the same values as the targets property. -

-

Removes targets from all active animations.

-
anime.remove(targets);
-

Removes targets from a single animation or timeline.

-
animation.remove(targets);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - -
- -
-

get

-
-

Returns the original value of an element.

-
anime.get(target, propertyName, unit);
-

- Since anime.js uses getComputedStyle to access original CSS, the values are almost always returned in 'px', the third (optional) argument converts the value in the desired unit. -

-
anime.get(domNode, 'width', 'rem');
- - - - - - - - - - - -
ParameterTypeInfo
target'string', varAny valid targets can be used
-

- CSS transforms : Only inlined values can be accessed. -

-
-
-
-
-
-
-
-
-
-
- - -
- -
-

set

-
-

- Immediately sets values to the specified targets. -

-
anime.set(targets, {property: value});
- - - - - - - - - - - - - - - - -
ParametersTypesInfo
target(s)'string', varAny valid targets can be used
valuesobjectAny valid properties can be used
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
-

random

-
-

- Returns a random integer within a specific range. -

-
anime.random(minValue, maxValue);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -
-

tick

-
-

- Plays an animation using an external requestAnimationFrame loop. -

-
animation.tick(time)
-

- Don't forget to set the autoplay parameter to false to prevent the anime.js built-in RAF loop to start. -

-
-
-
-
-
-
-
- - -
- -
-

running

-
-

- Returns an Array of all active anime.js instances currently running. -

-
anime.running
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-    
-
- -
- -
-

Suspend on visibility change

-
-
anime.suspendWhenDocumentHidden = false; // default true
-

- By default all animations are paused when switching tabs, useful if you want to make sure the user sees everything and doesn't miss an important part of your animation.
- But you can choose to let the animation runs normally without any pause, like a video or an audio track that can continuously plays in the background. -

-
-
-
-
-
-
-
-
- - -
-
- -
- -
- - -
-
-
-

-
-
-
-
- - - - - - - diff --git a/js/anime-master/lib/anime.es.js b/js/anime-master/lib/anime.es.js deleted file mode 100644 index eb59af6..0000000 --- a/js/anime-master/lib/anime.es.js +++ /dev/null @@ -1,1310 +0,0 @@ -/* - * anime.js v3.2.1 - * (c) 2020 Julian Garnier - * Released under the MIT license - * animejs.com - */ - -// Defaults - -var defaultInstanceSettings = { - update: null, - begin: null, - loopBegin: null, - changeBegin: null, - change: null, - changeComplete: null, - loopComplete: null, - complete: null, - loop: 1, - direction: 'normal', - autoplay: true, - timelineOffset: 0 -}; - -var defaultTweenSettings = { - duration: 1000, - delay: 0, - endDelay: 0, - easing: 'easeOutElastic(1, .5)', - round: 0 -}; - -var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d']; - -// Caching - -var cache = { - CSS: {}, - springs: {} -}; - -// Utils - -function minMax(val, min, max) { - return Math.min(Math.max(val, min), max); -} - -function stringContains(str, text) { - return str.indexOf(text) > -1; -} - -function applyArguments(func, args) { - return func.apply(null, args); -} - -var is = { - arr: function (a) { return Array.isArray(a); }, - obj: function (a) { return stringContains(Object.prototype.toString.call(a), 'Object'); }, - pth: function (a) { return is.obj(a) && a.hasOwnProperty('totalLength'); }, - svg: function (a) { return a instanceof SVGElement; }, - inp: function (a) { return a instanceof HTMLInputElement; }, - dom: function (a) { return a.nodeType || is.svg(a); }, - str: function (a) { return typeof a === 'string'; }, - fnc: function (a) { return typeof a === 'function'; }, - und: function (a) { return typeof a === 'undefined'; }, - nil: function (a) { return is.und(a) || a === null; }, - hex: function (a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a); }, - rgb: function (a) { return /^rgb/.test(a); }, - hsl: function (a) { return /^hsl/.test(a); }, - col: function (a) { return (is.hex(a) || is.rgb(a) || is.hsl(a)); }, - key: function (a) { return !defaultInstanceSettings.hasOwnProperty(a) && !defaultTweenSettings.hasOwnProperty(a) && a !== 'targets' && a !== 'keyframes'; }, -}; - -// Easings - -function parseEasingParameters(string) { - var match = /\(([^)]+)\)/.exec(string); - return match ? match[1].split(',').map(function (p) { return parseFloat(p); }) : []; -} - -// Spring solver inspired by Webkit Copyright © 2016 Apple Inc. All rights reserved. https://webkit.org/demos/spring/spring.js - -function spring(string, duration) { - - var params = parseEasingParameters(string); - var mass = minMax(is.und(params[0]) ? 1 : params[0], .1, 100); - var stiffness = minMax(is.und(params[1]) ? 100 : params[1], .1, 100); - var damping = minMax(is.und(params[2]) ? 10 : params[2], .1, 100); - var velocity = minMax(is.und(params[3]) ? 0 : params[3], .1, 100); - var w0 = Math.sqrt(stiffness / mass); - var zeta = damping / (2 * Math.sqrt(stiffness * mass)); - var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0; - var a = 1; - var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0; - - function solver(t) { - var progress = duration ? (duration * t) / 1000 : t; - if (zeta < 1) { - progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress)); - } else { - progress = (a + b * progress) * Math.exp(-progress * w0); - } - if (t === 0 || t === 1) { return t; } - return 1 - progress; - } - - function getDuration() { - var cached = cache.springs[string]; - if (cached) { return cached; } - var frame = 1/6; - var elapsed = 0; - var rest = 0; - while(true) { - elapsed += frame; - if (solver(elapsed) === 1) { - rest++; - if (rest >= 16) { break; } - } else { - rest = 0; - } - } - var duration = elapsed * frame * 1000; - cache.springs[string] = duration; - return duration; - } - - return duration ? solver : getDuration; - -} - -// Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function - -function steps(steps) { - if ( steps === void 0 ) steps = 10; - - return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); }; -} - -// BezierEasing https://github.com/gre/bezier-easing - -var bezier = (function () { - - var kSplineTableSize = 11; - var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 } - function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 } - function C(aA1) { return 3.0 * aA1 } - - function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT } - function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) } - - function binarySubdivide(aX, aA, aB, mX1, mX2) { - var currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT; } else { aA = currentT; } - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) { - for (var i = 0; i < 4; ++i) { - var currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) { return aGuessT; } - var currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { return; } - var sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (var i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - var intervalStart = 0; - var currentSample = 1; - var lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - var guessForT = intervalStart + dist * kSampleStepSize; - var initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return function (x) { - if (mX1 === mY1 && mX2 === mY2) { return x; } - if (x === 0 || x === 1) { return x; } - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - -})(); - -var penner = (function () { - - // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing) - - var eases = { linear: function () { return function (t) { return t; }; } }; - - var functionEasings = { - Sine: function () { return function (t) { return 1 - Math.cos(t * Math.PI / 2); }; }, - Circ: function () { return function (t) { return 1 - Math.sqrt(1 - t * t); }; }, - Back: function () { return function (t) { return t * t * (3 * t - 2); }; }, - Bounce: function () { return function (t) { - var pow2, b = 4; - while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {} - return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2) - }; }, - Elastic: function (amplitude, period) { - if ( amplitude === void 0 ) amplitude = 1; - if ( period === void 0 ) period = .5; - - var a = minMax(amplitude, 1, 10); - var p = minMax(period, .1, 2); - return function (t) { - return (t === 0 || t === 1) ? t : - -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p); - } - } - }; - - var baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo']; - - baseEasings.forEach(function (name, i) { - functionEasings[name] = function () { return function (t) { return Math.pow(t, i + 2); }; }; - }); - - Object.keys(functionEasings).forEach(function (name) { - var easeIn = functionEasings[name]; - eases['easeIn' + name] = easeIn; - eases['easeOut' + name] = function (a, b) { return function (t) { return 1 - easeIn(a, b)(1 - t); }; }; - eases['easeInOut' + name] = function (a, b) { return function (t) { return t < 0.5 ? easeIn(a, b)(t * 2) / 2 : - 1 - easeIn(a, b)(t * -2 + 2) / 2; }; }; - eases['easeOutIn' + name] = function (a, b) { return function (t) { return t < 0.5 ? (1 - easeIn(a, b)(1 - t * 2)) / 2 : - (easeIn(a, b)(t * 2 - 1) + 1) / 2; }; }; - }); - - return eases; - -})(); - -function parseEasings(easing, duration) { - if (is.fnc(easing)) { return easing; } - var name = easing.split('(')[0]; - var ease = penner[name]; - var args = parseEasingParameters(easing); - switch (name) { - case 'spring' : return spring(easing, duration); - case 'cubicBezier' : return applyArguments(bezier, args); - case 'steps' : return applyArguments(steps, args); - default : return applyArguments(ease, args); - } -} - -// Strings - -function selectString(str) { - try { - var nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } -} - -// Arrays - -function filterArray(arr, callback) { - var len = arr.length; - var thisArg = arguments.length >= 2 ? arguments[1] : void 0; - var result = []; - for (var i = 0; i < len; i++) { - if (i in arr) { - var val = arr[i]; - if (callback.call(thisArg, val, i, arr)) { - result.push(val); - } - } - } - return result; -} - -function flattenArray(arr) { - return arr.reduce(function (a, b) { return a.concat(is.arr(b) ? flattenArray(b) : b); }, []); -} - -function toArray(o) { - if (is.arr(o)) { return o; } - if (is.str(o)) { o = selectString(o) || o; } - if (o instanceof NodeList || o instanceof HTMLCollection) { return [].slice.call(o); } - return [o]; -} - -function arrayContains(arr, val) { - return arr.some(function (a) { return a === val; }); -} - -// Objects - -function cloneObject(o) { - var clone = {}; - for (var p in o) { clone[p] = o[p]; } - return clone; -} - -function replaceObjectProps(o1, o2) { - var o = cloneObject(o1); - for (var p in o1) { o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; } - return o; -} - -function mergeObjects(o1, o2) { - var o = cloneObject(o1); - for (var p in o2) { o[p] = is.und(o1[p]) ? o2[p] : o1[p]; } - return o; -} - -// Colors - -function rgbToRgba(rgbValue) { - var rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue); - return rgb ? ("rgba(" + (rgb[1]) + ",1)") : rgbValue; -} - -function hexToRgba(hexValue) { - var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - var hex = hexValue.replace(rgx, function (m, r, g, b) { return r + r + g + g + b + b; } ); - var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - var r = parseInt(rgb[1], 16); - var g = parseInt(rgb[2], 16); - var b = parseInt(rgb[3], 16); - return ("rgba(" + r + "," + g + "," + b + ",1)"); -} - -function hslToRgba(hslValue) { - var hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue); - var h = parseInt(hsl[1], 10) / 360; - var s = parseInt(hsl[2], 10) / 100; - var l = parseInt(hsl[3], 10) / 100; - var a = hsl[4] || 1; - function hue2rgb(p, q, t) { - if (t < 0) { t += 1; } - if (t > 1) { t -= 1; } - if (t < 1/6) { return p + (q - p) * 6 * t; } - if (t < 1/2) { return q; } - if (t < 2/3) { return p + (q - p) * (2/3 - t) * 6; } - return p; - } - var r, g, b; - if (s == 0) { - r = g = b = l; - } else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return ("rgba(" + (r * 255) + "," + (g * 255) + "," + (b * 255) + "," + a + ")"); -} - -function colorToRgb(val) { - if (is.rgb(val)) { return rgbToRgba(val); } - if (is.hex(val)) { return hexToRgba(val); } - if (is.hsl(val)) { return hslToRgba(val); } -} - -// Units - -function getUnit(val) { - var split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val); - if (split) { return split[1]; } -} - -function getTransformUnit(propName) { - if (stringContains(propName, 'translate') || propName === 'perspective') { return 'px'; } - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) { return 'deg'; } -} - -// Values - -function getFunctionValue(val, animatable) { - if (!is.fnc(val)) { return val; } - return val(animatable.target, animatable.id, animatable.total); -} - -function getAttribute(el, prop) { - return el.getAttribute(prop); -} - -function convertPxToUnit(el, value, unit) { - var valueUnit = getUnit(value); - if (arrayContains([unit, 'deg', 'rad', 'turn'], valueUnit)) { return value; } - var cached = cache.CSS[value + unit]; - if (!is.und(cached)) { return cached; } - var baseline = 100; - var tempEl = document.createElement(el.tagName); - var parentEl = (el.parentNode && (el.parentNode !== document)) ? el.parentNode : document.body; - parentEl.appendChild(tempEl); - tempEl.style.position = 'absolute'; - tempEl.style.width = baseline + unit; - var factor = baseline / tempEl.offsetWidth; - parentEl.removeChild(tempEl); - var convertedUnit = factor * parseFloat(value); - cache.CSS[value + unit] = convertedUnit; - return convertedUnit; -} - -function getCSSValue(el, prop, unit) { - if (prop in el.style) { - var uppercasePropName = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - var value = el.style[prop] || getComputedStyle(el).getPropertyValue(uppercasePropName) || '0'; - return unit ? convertPxToUnit(el, value, unit) : value; - } -} - -function getAnimationType(el, prop) { - if (is.dom(el) && !is.inp(el) && (!is.nil(getAttribute(el, prop)) || (is.svg(el) && el[prop]))) { return 'attribute'; } - if (is.dom(el) && arrayContains(validTransforms, prop)) { return 'transform'; } - if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) { return 'css'; } - if (el[prop] != null) { return 'object'; } -} - -function getElementTransforms(el) { - if (!is.dom(el)) { return; } - var str = el.style.transform || ''; - var reg = /(\w+)\(([^)]*)\)/g; - var transforms = new Map(); - var m; while (m = reg.exec(str)) { transforms.set(m[1], m[2]); } - return transforms; -} - -function getTransformValue(el, propName, animatable, unit) { - var defaultVal = stringContains(propName, 'scale') ? 1 : 0 + getTransformUnit(propName); - var value = getElementTransforms(el).get(propName) || defaultVal; - if (animatable) { - animatable.transforms.list.set(propName, value); - animatable.transforms['last'] = propName; - } - return unit ? convertPxToUnit(el, value, unit) : value; -} - -function getOriginalTargetValue(target, propName, unit, animatable) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName, animatable, unit); - case 'css': return getCSSValue(target, propName, unit); - case 'attribute': return getAttribute(target, propName); - default: return target[propName] || 0; - } -} - -function getRelativeValue(to, from) { - var operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) { return to; } - var u = getUnit(to) || 0; - var x = parseFloat(from); - var y = parseFloat(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y + u; - case '-': return x - y + u; - case '*': return x * y + u; - } -} - -function validateValue(val, unit) { - if (is.col(val)) { return colorToRgb(val); } - if (/\s/g.test(val)) { return val; } - var originalUnit = getUnit(val); - var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val; - if (unit) { return unitLess + unit; } - return unitLess; -} - -// getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes -// adapted from https://gist.github.com/SebLambla/3e0550c496c236709744 - -function getDistance(p1, p2) { - return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); -} - -function getCircleLength(el) { - return Math.PI * 2 * getAttribute(el, 'r'); -} - -function getRectLength(el) { - return (getAttribute(el, 'width') * 2) + (getAttribute(el, 'height') * 2); -} - -function getLineLength(el) { - return getDistance( - {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, - {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')} - ); -} - -function getPolylineLength(el) { - var points = el.points; - var totalLength = 0; - var previousPos; - for (var i = 0 ; i < points.numberOfItems; i++) { - var currentPos = points.getItem(i); - if (i > 0) { totalLength += getDistance(previousPos, currentPos); } - previousPos = currentPos; - } - return totalLength; -} - -function getPolygonLength(el) { - var points = el.points; - return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0)); -} - -// Path animation - -function getTotalLength(el) { - if (el.getTotalLength) { return el.getTotalLength(); } - switch(el.tagName.toLowerCase()) { - case 'circle': return getCircleLength(el); - case 'rect': return getRectLength(el); - case 'line': return getLineLength(el); - case 'polyline': return getPolylineLength(el); - case 'polygon': return getPolygonLength(el); - } -} - -function setDashoffset(el) { - var pathLength = getTotalLength(el); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; -} - -// Motion path - -function getParentSvgEl(el) { - var parentEl = el.parentNode; - while (is.svg(parentEl)) { - if (!is.svg(parentEl.parentNode)) { break; } - parentEl = parentEl.parentNode; - } - return parentEl; -} - -function getParentSvg(pathEl, svgData) { - var svg = svgData || {}; - var parentSvgEl = svg.el || getParentSvgEl(pathEl); - var rect = parentSvgEl.getBoundingClientRect(); - var viewBoxAttr = getAttribute(parentSvgEl, 'viewBox'); - var width = rect.width; - var height = rect.height; - var viewBox = svg.viewBox || (viewBoxAttr ? viewBoxAttr.split(' ') : [0, 0, width, height]); - return { - el: parentSvgEl, - viewBox: viewBox, - x: viewBox[0] / 1, - y: viewBox[1] / 1, - w: width, - h: height, - vW: viewBox[2], - vH: viewBox[3] - } -} - -function getPath(path, percent) { - var pathEl = is.str(path) ? selectString(path)[0] : path; - var p = percent || 100; - return function(property) { - return { - property: property, - el: pathEl, - svg: getParentSvg(pathEl), - totalLength: getTotalLength(pathEl) * (p / 100) - } - } -} - -function getPathProgress(path, progress, isPathTargetInsideSVG) { - function point(offset) { - if ( offset === void 0 ) offset = 0; - - var l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - var svg = getParentSvg(path.el, path.svg); - var p = point(); - var p0 = point(-1); - var p1 = point(+1); - var scaleX = isPathTargetInsideSVG ? 1 : svg.w / svg.vW; - var scaleY = isPathTargetInsideSVG ? 1 : svg.h / svg.vH; - switch (path.property) { - case 'x': return (p.x - svg.x) * scaleX; - case 'y': return (p.y - svg.y) * scaleY; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } -} - -// Decompose value - -function decomposeValue(val, unit) { - // const rgx = /-?\d*\.?\d+/g; // handles basic numbers - // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation - var rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation - var value = validateValue((is.pth(val) ? val.totalLength : val), unit) + ''; - return { - original: value, - numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: (is.str(val) || unit) ? value.split(rgx) : [] - } -} - -// Animatables - -function parseTargets(targets) { - var targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return filterArray(targetsArray, function (item, pos, self) { return self.indexOf(item) === pos; }); -} - -function getAnimatables(targets) { - var parsed = parseTargets(targets); - return parsed.map(function (t, i) { - return {target: t, id: i, total: parsed.length, transforms: { list: getElementTransforms(t) } }; - }); -} - -// Properties - -function normalizePropertyTweens(prop, tweenSettings) { - var settings = cloneObject(tweenSettings); - // Override duration if easing is a spring - if (/^spring/.test(settings.easing)) { settings.duration = spring(settings.easing); } - if (is.arr(prop)) { - var l = prop.length; - var isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) { settings.duration = tweenSettings.duration / l; } - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - var propArray = is.arr(prop) ? prop : [prop]; - return propArray.map(function (v, i) { - var obj = (is.obj(v) && !is.pth(v)) ? v : {value: v}; - // Default delay value should only be applied to the first tween - if (is.und(obj.delay)) { obj.delay = !i ? tweenSettings.delay : 0; } - // Default endDelay value should only be applied to the last tween - if (is.und(obj.endDelay)) { obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0; } - return obj; - }).map(function (k) { return mergeObjects(k, settings); }); -} - - -function flattenKeyframes(keyframes) { - var propertyNames = filterArray(flattenArray(keyframes.map(function (key) { return Object.keys(key); })), function (p) { return is.key(p); }) - .reduce(function (a,b) { if (a.indexOf(b) < 0) { a.push(b); } return a; }, []); - var properties = {}; - var loop = function ( i ) { - var propName = propertyNames[i]; - properties[propName] = keyframes.map(function (key) { - var newKey = {}; - for (var p in key) { - if (is.key(p)) { - if (p == propName) { newKey.value = key[p]; } - } else { - newKey[p] = key[p]; - } - } - return newKey; - }); - }; - - for (var i = 0; i < propertyNames.length; i++) loop( i ); - return properties; -} - -function getProperties(tweenSettings, params) { - var properties = []; - var keyframes = params.keyframes; - if (keyframes) { params = mergeObjects(flattenKeyframes(keyframes), params); } - for (var p in params) { - if (is.key(p)) { - properties.push({ - name: p, - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; -} - -// Tweens - -function normalizeTweenValues(tween, animatable) { - var t = {}; - for (var p in tween) { - var value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(function (v) { return getFunctionValue(v, animatable); }); - if (value.length === 1) { value = value[0]; } - } - t[p] = value; - } - t.duration = parseFloat(t.duration); - t.delay = parseFloat(t.delay); - return t; -} - -function normalizeTweens(prop, animatable) { - var previousTween; - return prop.tweens.map(function (t) { - var tween = normalizeTweenValues(t, animatable); - var tweenValue = tween.value; - var to = is.arr(tweenValue) ? tweenValue[1] : tweenValue; - var toUnit = getUnit(to); - var originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable); - var previousValue = previousTween ? previousTween.to.original : originalValue; - var from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - var fromUnit = getUnit(from) || getUnit(originalValue); - var unit = toUnit || fromUnit; - if (is.und(to)) { to = previousValue; } - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(getRelativeValue(to, from), unit); - tween.start = previousTween ? previousTween.end : 0; - tween.end = tween.start + tween.delay + tween.duration + tween.endDelay; - tween.easing = parseEasings(tween.easing, tween.duration); - tween.isPath = is.pth(tweenValue); - tween.isPathTargetInsideSVG = tween.isPath && is.svg(animatable.target); - tween.isColor = is.col(tween.from.original); - if (tween.isColor) { tween.round = 1; } - previousTween = tween; - return tween; - }); -} - -// Tween progress - -var setProgressValue = { - css: function (t, p, v) { return t.style[p] = v; }, - attribute: function (t, p, v) { return t.setAttribute(p, v); }, - object: function (t, p, v) { return t[p] = v; }, - transform: function (t, p, v, transforms, manual) { - transforms.list.set(p, v); - if (p === transforms.last || manual) { - var str = ''; - transforms.list.forEach(function (value, prop) { str += prop + "(" + value + ") "; }); - t.style.transform = str; - } - } -}; - -// Set Value helper - -function setTargetsValue(targets, properties) { - var animatables = getAnimatables(targets); - animatables.forEach(function (animatable) { - for (var property in properties) { - var value = getFunctionValue(properties[property], animatable); - var target = animatable.target; - var valueUnit = getUnit(value); - var originalValue = getOriginalTargetValue(target, property, valueUnit, animatable); - var unit = valueUnit || getUnit(originalValue); - var to = getRelativeValue(validateValue(value, unit), originalValue); - var animType = getAnimationType(target, property); - setProgressValue[animType](target, property, to, animatable.transforms, true); - } - }); -} - -// Animations - -function createAnimation(animatable, prop) { - var animType = getAnimationType(animatable.target, prop.name); - if (animType) { - var tweens = normalizeTweens(prop, animatable); - var lastTween = tweens[tweens.length - 1]; - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: lastTween.end, - delay: tweens[0].delay, - endDelay: lastTween.endDelay - } - } -} - -function getAnimations(animatables, properties) { - return filterArray(flattenArray(animatables.map(function (animatable) { - return properties.map(function (prop) { - return createAnimation(animatable, prop); - }); - })), function (a) { return !is.und(a); }); -} - -// Create Instance - -function getInstanceTimings(animations, tweenSettings) { - var animLength = animations.length; - var getTlOffset = function (anim) { return anim.timelineOffset ? anim.timelineOffset : 0; }; - var timings = {}; - timings.duration = animLength ? Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration; })) : tweenSettings.duration; - timings.delay = animLength ? Math.min.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.delay; })) : tweenSettings.delay; - timings.endDelay = animLength ? timings.duration - Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration - anim.endDelay; })) : tweenSettings.endDelay; - return timings; -} - -var instanceID = 0; - -function createNewInstance(params) { - var instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - var tweenSettings = replaceObjectProps(defaultTweenSettings, params); - var properties = getProperties(tweenSettings, params); - var animatables = getAnimatables(params.targets); - var animations = getAnimations(animatables, properties); - var timings = getInstanceTimings(animations, tweenSettings); - var id = instanceID; - instanceID++; - return mergeObjects(instanceSettings, { - id: id, - children: [], - animatables: animatables, - animations: animations, - duration: timings.duration, - delay: timings.delay, - endDelay: timings.endDelay - }); -} - -// Core - -var activeInstances = []; - -var engine = (function () { - var raf; - - function play() { - if (!raf && (!isDocumentHidden() || !anime.suspendWhenDocumentHidden) && activeInstances.length > 0) { - raf = requestAnimationFrame(step); - } - } - function step(t) { - // memo on algorithm issue: - // dangerous iteration over mutable `activeInstances` - // (that collection may be updated from within callbacks of `tick`-ed animation instances) - var activeInstancesLength = activeInstances.length; - var i = 0; - while (i < activeInstancesLength) { - var activeInstance = activeInstances[i]; - if (!activeInstance.paused) { - activeInstance.tick(t); - i++; - } else { - activeInstances.splice(i, 1); - activeInstancesLength--; - } - } - raf = i > 0 ? requestAnimationFrame(step) : undefined; - } - - function handleVisibilityChange() { - if (!anime.suspendWhenDocumentHidden) { return; } - - if (isDocumentHidden()) { - // suspend ticks - raf = cancelAnimationFrame(raf); - } else { // is back to active tab - // first adjust animations to consider the time that ticks were suspended - activeInstances.forEach( - function (instance) { return instance ._onDocumentVisibility(); } - ); - engine(); - } - } - if (typeof document !== 'undefined') { - document.addEventListener('visibilitychange', handleVisibilityChange); - } - - return play; -})(); - -function isDocumentHidden() { - return !!document && document.hidden; -} - -// Public Instance - -function anime(params) { - if ( params === void 0 ) params = {}; - - - var startTime = 0, lastTime = 0, now = 0; - var children, childrenLength = 0; - var resolve = null; - - function makePromise(instance) { - var promise = window.Promise && new Promise(function (_resolve) { return resolve = _resolve; }); - instance.finished = promise; - return promise; - } - - var instance = createNewInstance(params); - var promise = makePromise(instance); - - function toggleInstanceDirection() { - var direction = instance.direction; - if (direction !== 'alternate') { - instance.direction = direction !== 'normal' ? 'normal' : 'reverse'; - } - instance.reversed = !instance.reversed; - children.forEach(function (child) { return child.reversed = instance.reversed; }); - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function resetTime() { - startTime = 0; - lastTime = adjustTime(instance.currentTime) * (1 / anime.speed); - } - - function seekChild(time, child) { - if (child) { child.seek(time - child.timelineOffset); } - } - - function syncInstanceChildren(time) { - if (!instance.reversePlayback) { - for (var i = 0; i < childrenLength; i++) { seekChild(time, children[i]); } - } else { - for (var i$1 = childrenLength; i$1--;) { seekChild(time, children[i$1]); } - } - } - - function setAnimationsProgress(insTime) { - var i = 0; - var animations = instance.animations; - var animationsLength = animations.length; - while (i < animationsLength) { - var anim = animations[i]; - var animatable = anim.animatable; - var tweens = anim.tweens; - var tweenLength = tweens.length - 1; - var tween = tweens[tweenLength]; - // Only check for keyframes if there is more than one tween - if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; } - var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed); - var strings = tween.to.strings; - var round = tween.round; - var numbers = []; - var toNumbersLength = tween.to.numbers.length; - var progress = (void 0); - for (var n = 0; n < toNumbersLength; n++) { - var value = (void 0); - var toNumber = tween.to.numbers[n]; - var fromNumber = tween.from.numbers[n] || 0; - if (!tween.isPath) { - value = fromNumber + (eased * (toNumber - fromNumber)); - } else { - value = getPathProgress(tween.value, eased * toNumber, tween.isPathTargetInsideSVG); - } - if (round) { - if (!(tween.isColor && n > 2)) { - value = Math.round(value * round) / round; - } - } - numbers.push(value); - } - // Manual Array.reduce for better performances - var stringsLength = strings.length; - if (!stringsLength) { - progress = numbers[0]; - } else { - progress = strings[0]; - for (var s = 0; s < stringsLength; s++) { - var a = strings[s]; - var b = strings[s + 1]; - var n$1 = numbers[s]; - if (!isNaN(n$1)) { - if (!b) { - progress += n$1 + ' '; - } else { - progress += n$1 + b; - } - } - } - } - setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms); - anim.currentValue = progress; - i++; - } - } - - function setCallback(cb) { - if (instance[cb] && !instance.passThrough) { instance[cb](instance); } - } - - function countIteration() { - if (instance.remaining && instance.remaining !== true) { - instance.remaining--; - } - } - - function setInstanceProgress(engineTime) { - var insDuration = instance.duration; - var insDelay = instance.delay; - var insEndDelay = insDuration - instance.endDelay; - var insTime = adjustTime(engineTime); - instance.progress = minMax((insTime / insDuration) * 100, 0, 100); - instance.reversePlayback = insTime < instance.currentTime; - if (children) { syncInstanceChildren(insTime); } - if (!instance.began && instance.currentTime > 0) { - instance.began = true; - setCallback('begin'); - } - if (!instance.loopBegan && instance.currentTime > 0) { - instance.loopBegan = true; - setCallback('loopBegin'); - } - if (insTime <= insDelay && instance.currentTime !== 0) { - setAnimationsProgress(0); - } - if ((insTime >= insEndDelay && instance.currentTime !== insDuration) || !insDuration) { - setAnimationsProgress(insDuration); - } - if (insTime > insDelay && insTime < insEndDelay) { - if (!instance.changeBegan) { - instance.changeBegan = true; - instance.changeCompleted = false; - setCallback('changeBegin'); - } - setCallback('change'); - setAnimationsProgress(insTime); - } else { - if (instance.changeBegan) { - instance.changeCompleted = true; - instance.changeBegan = false; - setCallback('changeComplete'); - } - } - instance.currentTime = minMax(insTime, 0, insDuration); - if (instance.began) { setCallback('update'); } - if (engineTime >= insDuration) { - lastTime = 0; - countIteration(); - if (!instance.remaining) { - instance.paused = true; - if (!instance.completed) { - instance.completed = true; - setCallback('loopComplete'); - setCallback('complete'); - if (!instance.passThrough && 'Promise' in window) { - resolve(); - promise = makePromise(instance); - } - } - } else { - startTime = now; - setCallback('loopComplete'); - instance.loopBegan = false; - if (instance.direction === 'alternate') { - toggleInstanceDirection(); - } - } - } - } - - instance.reset = function() { - var direction = instance.direction; - instance.passThrough = false; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.loopBegan = false; - instance.changeBegan = false; - instance.completed = false; - instance.changeCompleted = false; - instance.reversePlayback = false; - instance.reversed = direction === 'reverse'; - instance.remaining = instance.loop; - children = instance.children; - childrenLength = children.length; - for (var i = childrenLength; i--;) { instance.children[i].reset(); } - if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) { instance.remaining++; } - setAnimationsProgress(instance.reversed ? instance.duration : 0); - }; - - // internal method (for engine) to adjust animation timings before restoring engine ticks (rAF) - instance._onDocumentVisibility = resetTime; - - // Set Value helper - - instance.set = function(targets, properties) { - setTargetsValue(targets, properties); - return instance; - }; - - instance.tick = function(t) { - now = t; - if (!startTime) { startTime = now; } - setInstanceProgress((now + (lastTime - startTime)) * anime.speed); - }; - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time)); - }; - - instance.pause = function() { - instance.paused = true; - resetTime(); - }; - - instance.play = function() { - if (!instance.paused) { return; } - if (instance.completed) { instance.reset(); } - instance.paused = false; - activeInstances.push(instance); - resetTime(); - engine(); - }; - - instance.reverse = function() { - toggleInstanceDirection(); - instance.completed = instance.reversed ? false : true; - resetTime(); - }; - - instance.restart = function() { - instance.reset(); - instance.play(); - }; - - instance.remove = function(targets) { - var targetsArray = parseTargets(targets); - removeTargetsFromInstance(targetsArray, instance); - }; - - instance.reset(); - - if (instance.autoplay) { instance.play(); } - - return instance; - -} - -// Remove targets from animation - -function removeTargetsFromAnimations(targetsArray, animations) { - for (var a = animations.length; a--;) { - if (arrayContains(targetsArray, animations[a].animatable.target)) { - animations.splice(a, 1); - } - } -} - -function removeTargetsFromInstance(targetsArray, instance) { - var animations = instance.animations; - var children = instance.children; - removeTargetsFromAnimations(targetsArray, animations); - for (var c = children.length; c--;) { - var child = children[c]; - var childAnimations = child.animations; - removeTargetsFromAnimations(targetsArray, childAnimations); - if (!childAnimations.length && !child.children.length) { children.splice(c, 1); } - } - if (!animations.length && !children.length) { instance.pause(); } -} - -function removeTargetsFromActiveInstances(targets) { - var targetsArray = parseTargets(targets); - for (var i = activeInstances.length; i--;) { - var instance = activeInstances[i]; - removeTargetsFromInstance(targetsArray, instance); - } -} - -// Stagger helpers - -function stagger(val, params) { - if ( params === void 0 ) params = {}; - - var direction = params.direction || 'normal'; - var easing = params.easing ? parseEasings(params.easing) : null; - var grid = params.grid; - var axis = params.axis; - var fromIndex = params.from || 0; - var fromFirst = fromIndex === 'first'; - var fromCenter = fromIndex === 'center'; - var fromLast = fromIndex === 'last'; - var isRange = is.arr(val); - var val1 = isRange ? parseFloat(val[0]) : parseFloat(val); - var val2 = isRange ? parseFloat(val[1]) : 0; - var unit = getUnit(isRange ? val[1] : val) || 0; - var start = params.start || 0 + (isRange ? val1 : 0); - var values = []; - var maxValue = 0; - return function (el, i, t) { - if (fromFirst) { fromIndex = 0; } - if (fromCenter) { fromIndex = (t - 1) / 2; } - if (fromLast) { fromIndex = t - 1; } - if (!values.length) { - for (var index = 0; index < t; index++) { - if (!grid) { - values.push(Math.abs(fromIndex - index)); - } else { - var fromX = !fromCenter ? fromIndex%grid[0] : (grid[0]-1)/2; - var fromY = !fromCenter ? Math.floor(fromIndex/grid[0]) : (grid[1]-1)/2; - var toX = index%grid[0]; - var toY = Math.floor(index/grid[0]); - var distanceX = fromX - toX; - var distanceY = fromY - toY; - var value = Math.sqrt(distanceX * distanceX + distanceY * distanceY); - if (axis === 'x') { value = -distanceX; } - if (axis === 'y') { value = -distanceY; } - values.push(value); - } - maxValue = Math.max.apply(Math, values); - } - if (easing) { values = values.map(function (val) { return easing(val / maxValue) * maxValue; }); } - if (direction === 'reverse') { values = values.map(function (val) { return axis ? (val < 0) ? val * -1 : -val : Math.abs(maxValue - val); }); } - } - var spacing = isRange ? (val2 - val1) / maxValue : val1; - return start + (spacing * (Math.round(values[i] * 100) / 100)) + unit; - } -} - -// Timeline - -function timeline(params) { - if ( params === void 0 ) params = {}; - - var tl = anime(params); - tl.duration = 0; - tl.add = function(instanceParams, timelineOffset) { - var tlIndex = activeInstances.indexOf(tl); - var children = tl.children; - if (tlIndex > -1) { activeInstances.splice(tlIndex, 1); } - function passThrough(ins) { ins.passThrough = true; } - for (var i = 0; i < children.length; i++) { passThrough(children[i]); } - var insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params)); - insParams.targets = insParams.targets || params.targets; - var tlDuration = tl.duration; - insParams.autoplay = false; - insParams.direction = tl.direction; - insParams.timelineOffset = is.und(timelineOffset) ? tlDuration : getRelativeValue(timelineOffset, tlDuration); - passThrough(tl); - tl.seek(insParams.timelineOffset); - var ins = anime(insParams); - passThrough(ins); - children.push(ins); - var timings = getInstanceTimings(children, params); - tl.delay = timings.delay; - tl.endDelay = timings.endDelay; - tl.duration = timings.duration; - tl.seek(0); - tl.reset(); - if (tl.autoplay) { tl.play(); } - return tl; - }; - return tl; -} - -anime.version = '3.2.1'; -anime.speed = 1; -// TODO:#review: naming, documentation -anime.suspendWhenDocumentHidden = true; -anime.running = activeInstances; -anime.remove = removeTargetsFromActiveInstances; -anime.get = getOriginalTargetValue; -anime.set = setTargetsValue; -anime.convertPx = convertPxToUnit; -anime.path = getPath; -anime.setDashoffset = setDashoffset; -anime.stagger = stagger; -anime.timeline = timeline; -anime.easing = parseEasings; -anime.penner = penner; -anime.random = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; - -export default anime; diff --git a/js/anime-master/lib/anime.js b/js/anime-master/lib/anime.js deleted file mode 100644 index a99421a..0000000 --- a/js/anime-master/lib/anime.js +++ /dev/null @@ -1,1312 +0,0 @@ -/* - * anime.js v3.2.1 - * (c) 2020 Julian Garnier - * Released under the MIT license - * animejs.com - */ - -'use strict'; - -// Defaults - -var defaultInstanceSettings = { - update: null, - begin: null, - loopBegin: null, - changeBegin: null, - change: null, - changeComplete: null, - loopComplete: null, - complete: null, - loop: 1, - direction: 'normal', - autoplay: true, - timelineOffset: 0 -}; - -var defaultTweenSettings = { - duration: 1000, - delay: 0, - endDelay: 0, - easing: 'easeOutElastic(1, .5)', - round: 0 -}; - -var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d']; - -// Caching - -var cache = { - CSS: {}, - springs: {} -}; - -// Utils - -function minMax(val, min, max) { - return Math.min(Math.max(val, min), max); -} - -function stringContains(str, text) { - return str.indexOf(text) > -1; -} - -function applyArguments(func, args) { - return func.apply(null, args); -} - -var is = { - arr: function (a) { return Array.isArray(a); }, - obj: function (a) { return stringContains(Object.prototype.toString.call(a), 'Object'); }, - pth: function (a) { return is.obj(a) && a.hasOwnProperty('totalLength'); }, - svg: function (a) { return a instanceof SVGElement; }, - inp: function (a) { return a instanceof HTMLInputElement; }, - dom: function (a) { return a.nodeType || is.svg(a); }, - str: function (a) { return typeof a === 'string'; }, - fnc: function (a) { return typeof a === 'function'; }, - und: function (a) { return typeof a === 'undefined'; }, - nil: function (a) { return is.und(a) || a === null; }, - hex: function (a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a); }, - rgb: function (a) { return /^rgb/.test(a); }, - hsl: function (a) { return /^hsl/.test(a); }, - col: function (a) { return (is.hex(a) || is.rgb(a) || is.hsl(a)); }, - key: function (a) { return !defaultInstanceSettings.hasOwnProperty(a) && !defaultTweenSettings.hasOwnProperty(a) && a !== 'targets' && a !== 'keyframes'; }, -}; - -// Easings - -function parseEasingParameters(string) { - var match = /\(([^)]+)\)/.exec(string); - return match ? match[1].split(',').map(function (p) { return parseFloat(p); }) : []; -} - -// Spring solver inspired by Webkit Copyright © 2016 Apple Inc. All rights reserved. https://webkit.org/demos/spring/spring.js - -function spring(string, duration) { - - var params = parseEasingParameters(string); - var mass = minMax(is.und(params[0]) ? 1 : params[0], .1, 100); - var stiffness = minMax(is.und(params[1]) ? 100 : params[1], .1, 100); - var damping = minMax(is.und(params[2]) ? 10 : params[2], .1, 100); - var velocity = minMax(is.und(params[3]) ? 0 : params[3], .1, 100); - var w0 = Math.sqrt(stiffness / mass); - var zeta = damping / (2 * Math.sqrt(stiffness * mass)); - var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0; - var a = 1; - var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0; - - function solver(t) { - var progress = duration ? (duration * t) / 1000 : t; - if (zeta < 1) { - progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress)); - } else { - progress = (a + b * progress) * Math.exp(-progress * w0); - } - if (t === 0 || t === 1) { return t; } - return 1 - progress; - } - - function getDuration() { - var cached = cache.springs[string]; - if (cached) { return cached; } - var frame = 1/6; - var elapsed = 0; - var rest = 0; - while(true) { - elapsed += frame; - if (solver(elapsed) === 1) { - rest++; - if (rest >= 16) { break; } - } else { - rest = 0; - } - } - var duration = elapsed * frame * 1000; - cache.springs[string] = duration; - return duration; - } - - return duration ? solver : getDuration; - -} - -// Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function - -function steps(steps) { - if ( steps === void 0 ) steps = 10; - - return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); }; -} - -// BezierEasing https://github.com/gre/bezier-easing - -var bezier = (function () { - - var kSplineTableSize = 11; - var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 } - function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 } - function C(aA1) { return 3.0 * aA1 } - - function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT } - function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) } - - function binarySubdivide(aX, aA, aB, mX1, mX2) { - var currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT; } else { aA = currentT; } - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) { - for (var i = 0; i < 4; ++i) { - var currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) { return aGuessT; } - var currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { return; } - var sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (var i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - var intervalStart = 0; - var currentSample = 1; - var lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - var guessForT = intervalStart + dist * kSampleStepSize; - var initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return function (x) { - if (mX1 === mY1 && mX2 === mY2) { return x; } - if (x === 0 || x === 1) { return x; } - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - -})(); - -var penner = (function () { - - // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing) - - var eases = { linear: function () { return function (t) { return t; }; } }; - - var functionEasings = { - Sine: function () { return function (t) { return 1 - Math.cos(t * Math.PI / 2); }; }, - Circ: function () { return function (t) { return 1 - Math.sqrt(1 - t * t); }; }, - Back: function () { return function (t) { return t * t * (3 * t - 2); }; }, - Bounce: function () { return function (t) { - var pow2, b = 4; - while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {} - return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2) - }; }, - Elastic: function (amplitude, period) { - if ( amplitude === void 0 ) amplitude = 1; - if ( period === void 0 ) period = .5; - - var a = minMax(amplitude, 1, 10); - var p = minMax(period, .1, 2); - return function (t) { - return (t === 0 || t === 1) ? t : - -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p); - } - } - }; - - var baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo']; - - baseEasings.forEach(function (name, i) { - functionEasings[name] = function () { return function (t) { return Math.pow(t, i + 2); }; }; - }); - - Object.keys(functionEasings).forEach(function (name) { - var easeIn = functionEasings[name]; - eases['easeIn' + name] = easeIn; - eases['easeOut' + name] = function (a, b) { return function (t) { return 1 - easeIn(a, b)(1 - t); }; }; - eases['easeInOut' + name] = function (a, b) { return function (t) { return t < 0.5 ? easeIn(a, b)(t * 2) / 2 : - 1 - easeIn(a, b)(t * -2 + 2) / 2; }; }; - eases['easeOutIn' + name] = function (a, b) { return function (t) { return t < 0.5 ? (1 - easeIn(a, b)(1 - t * 2)) / 2 : - (easeIn(a, b)(t * 2 - 1) + 1) / 2; }; }; - }); - - return eases; - -})(); - -function parseEasings(easing, duration) { - if (is.fnc(easing)) { return easing; } - var name = easing.split('(')[0]; - var ease = penner[name]; - var args = parseEasingParameters(easing); - switch (name) { - case 'spring' : return spring(easing, duration); - case 'cubicBezier' : return applyArguments(bezier, args); - case 'steps' : return applyArguments(steps, args); - default : return applyArguments(ease, args); - } -} - -// Strings - -function selectString(str) { - try { - var nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } -} - -// Arrays - -function filterArray(arr, callback) { - var len = arr.length; - var thisArg = arguments.length >= 2 ? arguments[1] : void 0; - var result = []; - for (var i = 0; i < len; i++) { - if (i in arr) { - var val = arr[i]; - if (callback.call(thisArg, val, i, arr)) { - result.push(val); - } - } - } - return result; -} - -function flattenArray(arr) { - return arr.reduce(function (a, b) { return a.concat(is.arr(b) ? flattenArray(b) : b); }, []); -} - -function toArray(o) { - if (is.arr(o)) { return o; } - if (is.str(o)) { o = selectString(o) || o; } - if (o instanceof NodeList || o instanceof HTMLCollection) { return [].slice.call(o); } - return [o]; -} - -function arrayContains(arr, val) { - return arr.some(function (a) { return a === val; }); -} - -// Objects - -function cloneObject(o) { - var clone = {}; - for (var p in o) { clone[p] = o[p]; } - return clone; -} - -function replaceObjectProps(o1, o2) { - var o = cloneObject(o1); - for (var p in o1) { o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; } - return o; -} - -function mergeObjects(o1, o2) { - var o = cloneObject(o1); - for (var p in o2) { o[p] = is.und(o1[p]) ? o2[p] : o1[p]; } - return o; -} - -// Colors - -function rgbToRgba(rgbValue) { - var rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue); - return rgb ? ("rgba(" + (rgb[1]) + ",1)") : rgbValue; -} - -function hexToRgba(hexValue) { - var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - var hex = hexValue.replace(rgx, function (m, r, g, b) { return r + r + g + g + b + b; } ); - var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - var r = parseInt(rgb[1], 16); - var g = parseInt(rgb[2], 16); - var b = parseInt(rgb[3], 16); - return ("rgba(" + r + "," + g + "," + b + ",1)"); -} - -function hslToRgba(hslValue) { - var hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue); - var h = parseInt(hsl[1], 10) / 360; - var s = parseInt(hsl[2], 10) / 100; - var l = parseInt(hsl[3], 10) / 100; - var a = hsl[4] || 1; - function hue2rgb(p, q, t) { - if (t < 0) { t += 1; } - if (t > 1) { t -= 1; } - if (t < 1/6) { return p + (q - p) * 6 * t; } - if (t < 1/2) { return q; } - if (t < 2/3) { return p + (q - p) * (2/3 - t) * 6; } - return p; - } - var r, g, b; - if (s == 0) { - r = g = b = l; - } else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return ("rgba(" + (r * 255) + "," + (g * 255) + "," + (b * 255) + "," + a + ")"); -} - -function colorToRgb(val) { - if (is.rgb(val)) { return rgbToRgba(val); } - if (is.hex(val)) { return hexToRgba(val); } - if (is.hsl(val)) { return hslToRgba(val); } -} - -// Units - -function getUnit(val) { - var split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val); - if (split) { return split[1]; } -} - -function getTransformUnit(propName) { - if (stringContains(propName, 'translate') || propName === 'perspective') { return 'px'; } - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) { return 'deg'; } -} - -// Values - -function getFunctionValue(val, animatable) { - if (!is.fnc(val)) { return val; } - return val(animatable.target, animatable.id, animatable.total); -} - -function getAttribute(el, prop) { - return el.getAttribute(prop); -} - -function convertPxToUnit(el, value, unit) { - var valueUnit = getUnit(value); - if (arrayContains([unit, 'deg', 'rad', 'turn'], valueUnit)) { return value; } - var cached = cache.CSS[value + unit]; - if (!is.und(cached)) { return cached; } - var baseline = 100; - var tempEl = document.createElement(el.tagName); - var parentEl = (el.parentNode && (el.parentNode !== document)) ? el.parentNode : document.body; - parentEl.appendChild(tempEl); - tempEl.style.position = 'absolute'; - tempEl.style.width = baseline + unit; - var factor = baseline / tempEl.offsetWidth; - parentEl.removeChild(tempEl); - var convertedUnit = factor * parseFloat(value); - cache.CSS[value + unit] = convertedUnit; - return convertedUnit; -} - -function getCSSValue(el, prop, unit) { - if (prop in el.style) { - var uppercasePropName = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - var value = el.style[prop] || getComputedStyle(el).getPropertyValue(uppercasePropName) || '0'; - return unit ? convertPxToUnit(el, value, unit) : value; - } -} - -function getAnimationType(el, prop) { - if (is.dom(el) && !is.inp(el) && (!is.nil(getAttribute(el, prop)) || (is.svg(el) && el[prop]))) { return 'attribute'; } - if (is.dom(el) && arrayContains(validTransforms, prop)) { return 'transform'; } - if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) { return 'css'; } - if (el[prop] != null) { return 'object'; } -} - -function getElementTransforms(el) { - if (!is.dom(el)) { return; } - var str = el.style.transform || ''; - var reg = /(\w+)\(([^)]*)\)/g; - var transforms = new Map(); - var m; while (m = reg.exec(str)) { transforms.set(m[1], m[2]); } - return transforms; -} - -function getTransformValue(el, propName, animatable, unit) { - var defaultVal = stringContains(propName, 'scale') ? 1 : 0 + getTransformUnit(propName); - var value = getElementTransforms(el).get(propName) || defaultVal; - if (animatable) { - animatable.transforms.list.set(propName, value); - animatable.transforms['last'] = propName; - } - return unit ? convertPxToUnit(el, value, unit) : value; -} - -function getOriginalTargetValue(target, propName, unit, animatable) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName, animatable, unit); - case 'css': return getCSSValue(target, propName, unit); - case 'attribute': return getAttribute(target, propName); - default: return target[propName] || 0; - } -} - -function getRelativeValue(to, from) { - var operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) { return to; } - var u = getUnit(to) || 0; - var x = parseFloat(from); - var y = parseFloat(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y + u; - case '-': return x - y + u; - case '*': return x * y + u; - } -} - -function validateValue(val, unit) { - if (is.col(val)) { return colorToRgb(val); } - if (/\s/g.test(val)) { return val; } - var originalUnit = getUnit(val); - var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val; - if (unit) { return unitLess + unit; } - return unitLess; -} - -// getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes -// adapted from https://gist.github.com/SebLambla/3e0550c496c236709744 - -function getDistance(p1, p2) { - return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); -} - -function getCircleLength(el) { - return Math.PI * 2 * getAttribute(el, 'r'); -} - -function getRectLength(el) { - return (getAttribute(el, 'width') * 2) + (getAttribute(el, 'height') * 2); -} - -function getLineLength(el) { - return getDistance( - {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, - {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')} - ); -} - -function getPolylineLength(el) { - var points = el.points; - var totalLength = 0; - var previousPos; - for (var i = 0 ; i < points.numberOfItems; i++) { - var currentPos = points.getItem(i); - if (i > 0) { totalLength += getDistance(previousPos, currentPos); } - previousPos = currentPos; - } - return totalLength; -} - -function getPolygonLength(el) { - var points = el.points; - return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0)); -} - -// Path animation - -function getTotalLength(el) { - if (el.getTotalLength) { return el.getTotalLength(); } - switch(el.tagName.toLowerCase()) { - case 'circle': return getCircleLength(el); - case 'rect': return getRectLength(el); - case 'line': return getLineLength(el); - case 'polyline': return getPolylineLength(el); - case 'polygon': return getPolygonLength(el); - } -} - -function setDashoffset(el) { - var pathLength = getTotalLength(el); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; -} - -// Motion path - -function getParentSvgEl(el) { - var parentEl = el.parentNode; - while (is.svg(parentEl)) { - if (!is.svg(parentEl.parentNode)) { break; } - parentEl = parentEl.parentNode; - } - return parentEl; -} - -function getParentSvg(pathEl, svgData) { - var svg = svgData || {}; - var parentSvgEl = svg.el || getParentSvgEl(pathEl); - var rect = parentSvgEl.getBoundingClientRect(); - var viewBoxAttr = getAttribute(parentSvgEl, 'viewBox'); - var width = rect.width; - var height = rect.height; - var viewBox = svg.viewBox || (viewBoxAttr ? viewBoxAttr.split(' ') : [0, 0, width, height]); - return { - el: parentSvgEl, - viewBox: viewBox, - x: viewBox[0] / 1, - y: viewBox[1] / 1, - w: width, - h: height, - vW: viewBox[2], - vH: viewBox[3] - } -} - -function getPath(path, percent) { - var pathEl = is.str(path) ? selectString(path)[0] : path; - var p = percent || 100; - return function(property) { - return { - property: property, - el: pathEl, - svg: getParentSvg(pathEl), - totalLength: getTotalLength(pathEl) * (p / 100) - } - } -} - -function getPathProgress(path, progress, isPathTargetInsideSVG) { - function point(offset) { - if ( offset === void 0 ) offset = 0; - - var l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - var svg = getParentSvg(path.el, path.svg); - var p = point(); - var p0 = point(-1); - var p1 = point(+1); - var scaleX = isPathTargetInsideSVG ? 1 : svg.w / svg.vW; - var scaleY = isPathTargetInsideSVG ? 1 : svg.h / svg.vH; - switch (path.property) { - case 'x': return (p.x - svg.x) * scaleX; - case 'y': return (p.y - svg.y) * scaleY; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } -} - -// Decompose value - -function decomposeValue(val, unit) { - // const rgx = /-?\d*\.?\d+/g; // handles basic numbers - // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation - var rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation - var value = validateValue((is.pth(val) ? val.totalLength : val), unit) + ''; - return { - original: value, - numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: (is.str(val) || unit) ? value.split(rgx) : [] - } -} - -// Animatables - -function parseTargets(targets) { - var targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return filterArray(targetsArray, function (item, pos, self) { return self.indexOf(item) === pos; }); -} - -function getAnimatables(targets) { - var parsed = parseTargets(targets); - return parsed.map(function (t, i) { - return {target: t, id: i, total: parsed.length, transforms: { list: getElementTransforms(t) } }; - }); -} - -// Properties - -function normalizePropertyTweens(prop, tweenSettings) { - var settings = cloneObject(tweenSettings); - // Override duration if easing is a spring - if (/^spring/.test(settings.easing)) { settings.duration = spring(settings.easing); } - if (is.arr(prop)) { - var l = prop.length; - var isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) { settings.duration = tweenSettings.duration / l; } - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - var propArray = is.arr(prop) ? prop : [prop]; - return propArray.map(function (v, i) { - var obj = (is.obj(v) && !is.pth(v)) ? v : {value: v}; - // Default delay value should only be applied to the first tween - if (is.und(obj.delay)) { obj.delay = !i ? tweenSettings.delay : 0; } - // Default endDelay value should only be applied to the last tween - if (is.und(obj.endDelay)) { obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0; } - return obj; - }).map(function (k) { return mergeObjects(k, settings); }); -} - - -function flattenKeyframes(keyframes) { - var propertyNames = filterArray(flattenArray(keyframes.map(function (key) { return Object.keys(key); })), function (p) { return is.key(p); }) - .reduce(function (a,b) { if (a.indexOf(b) < 0) { a.push(b); } return a; }, []); - var properties = {}; - var loop = function ( i ) { - var propName = propertyNames[i]; - properties[propName] = keyframes.map(function (key) { - var newKey = {}; - for (var p in key) { - if (is.key(p)) { - if (p == propName) { newKey.value = key[p]; } - } else { - newKey[p] = key[p]; - } - } - return newKey; - }); - }; - - for (var i = 0; i < propertyNames.length; i++) loop( i ); - return properties; -} - -function getProperties(tweenSettings, params) { - var properties = []; - var keyframes = params.keyframes; - if (keyframes) { params = mergeObjects(flattenKeyframes(keyframes), params); } - for (var p in params) { - if (is.key(p)) { - properties.push({ - name: p, - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; -} - -// Tweens - -function normalizeTweenValues(tween, animatable) { - var t = {}; - for (var p in tween) { - var value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(function (v) { return getFunctionValue(v, animatable); }); - if (value.length === 1) { value = value[0]; } - } - t[p] = value; - } - t.duration = parseFloat(t.duration); - t.delay = parseFloat(t.delay); - return t; -} - -function normalizeTweens(prop, animatable) { - var previousTween; - return prop.tweens.map(function (t) { - var tween = normalizeTweenValues(t, animatable); - var tweenValue = tween.value; - var to = is.arr(tweenValue) ? tweenValue[1] : tweenValue; - var toUnit = getUnit(to); - var originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable); - var previousValue = previousTween ? previousTween.to.original : originalValue; - var from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - var fromUnit = getUnit(from) || getUnit(originalValue); - var unit = toUnit || fromUnit; - if (is.und(to)) { to = previousValue; } - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(getRelativeValue(to, from), unit); - tween.start = previousTween ? previousTween.end : 0; - tween.end = tween.start + tween.delay + tween.duration + tween.endDelay; - tween.easing = parseEasings(tween.easing, tween.duration); - tween.isPath = is.pth(tweenValue); - tween.isPathTargetInsideSVG = tween.isPath && is.svg(animatable.target); - tween.isColor = is.col(tween.from.original); - if (tween.isColor) { tween.round = 1; } - previousTween = tween; - return tween; - }); -} - -// Tween progress - -var setProgressValue = { - css: function (t, p, v) { return t.style[p] = v; }, - attribute: function (t, p, v) { return t.setAttribute(p, v); }, - object: function (t, p, v) { return t[p] = v; }, - transform: function (t, p, v, transforms, manual) { - transforms.list.set(p, v); - if (p === transforms.last || manual) { - var str = ''; - transforms.list.forEach(function (value, prop) { str += prop + "(" + value + ") "; }); - t.style.transform = str; - } - } -}; - -// Set Value helper - -function setTargetsValue(targets, properties) { - var animatables = getAnimatables(targets); - animatables.forEach(function (animatable) { - for (var property in properties) { - var value = getFunctionValue(properties[property], animatable); - var target = animatable.target; - var valueUnit = getUnit(value); - var originalValue = getOriginalTargetValue(target, property, valueUnit, animatable); - var unit = valueUnit || getUnit(originalValue); - var to = getRelativeValue(validateValue(value, unit), originalValue); - var animType = getAnimationType(target, property); - setProgressValue[animType](target, property, to, animatable.transforms, true); - } - }); -} - -// Animations - -function createAnimation(animatable, prop) { - var animType = getAnimationType(animatable.target, prop.name); - if (animType) { - var tweens = normalizeTweens(prop, animatable); - var lastTween = tweens[tweens.length - 1]; - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: lastTween.end, - delay: tweens[0].delay, - endDelay: lastTween.endDelay - } - } -} - -function getAnimations(animatables, properties) { - return filterArray(flattenArray(animatables.map(function (animatable) { - return properties.map(function (prop) { - return createAnimation(animatable, prop); - }); - })), function (a) { return !is.und(a); }); -} - -// Create Instance - -function getInstanceTimings(animations, tweenSettings) { - var animLength = animations.length; - var getTlOffset = function (anim) { return anim.timelineOffset ? anim.timelineOffset : 0; }; - var timings = {}; - timings.duration = animLength ? Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration; })) : tweenSettings.duration; - timings.delay = animLength ? Math.min.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.delay; })) : tweenSettings.delay; - timings.endDelay = animLength ? timings.duration - Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration - anim.endDelay; })) : tweenSettings.endDelay; - return timings; -} - -var instanceID = 0; - -function createNewInstance(params) { - var instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - var tweenSettings = replaceObjectProps(defaultTweenSettings, params); - var properties = getProperties(tweenSettings, params); - var animatables = getAnimatables(params.targets); - var animations = getAnimations(animatables, properties); - var timings = getInstanceTimings(animations, tweenSettings); - var id = instanceID; - instanceID++; - return mergeObjects(instanceSettings, { - id: id, - children: [], - animatables: animatables, - animations: animations, - duration: timings.duration, - delay: timings.delay, - endDelay: timings.endDelay - }); -} - -// Core - -var activeInstances = []; - -var engine = (function () { - var raf; - - function play() { - if (!raf && (!isDocumentHidden() || !anime.suspendWhenDocumentHidden) && activeInstances.length > 0) { - raf = requestAnimationFrame(step); - } - } - function step(t) { - // memo on algorithm issue: - // dangerous iteration over mutable `activeInstances` - // (that collection may be updated from within callbacks of `tick`-ed animation instances) - var activeInstancesLength = activeInstances.length; - var i = 0; - while (i < activeInstancesLength) { - var activeInstance = activeInstances[i]; - if (!activeInstance.paused) { - activeInstance.tick(t); - i++; - } else { - activeInstances.splice(i, 1); - activeInstancesLength--; - } - } - raf = i > 0 ? requestAnimationFrame(step) : undefined; - } - - function handleVisibilityChange() { - if (!anime.suspendWhenDocumentHidden) { return; } - - if (isDocumentHidden()) { - // suspend ticks - raf = cancelAnimationFrame(raf); - } else { // is back to active tab - // first adjust animations to consider the time that ticks were suspended - activeInstances.forEach( - function (instance) { return instance ._onDocumentVisibility(); } - ); - engine(); - } - } - if (typeof document !== 'undefined') { - document.addEventListener('visibilitychange', handleVisibilityChange); - } - - return play; -})(); - -function isDocumentHidden() { - return !!document && document.hidden; -} - -// Public Instance - -function anime(params) { - if ( params === void 0 ) params = {}; - - - var startTime = 0, lastTime = 0, now = 0; - var children, childrenLength = 0; - var resolve = null; - - function makePromise(instance) { - var promise = window.Promise && new Promise(function (_resolve) { return resolve = _resolve; }); - instance.finished = promise; - return promise; - } - - var instance = createNewInstance(params); - var promise = makePromise(instance); - - function toggleInstanceDirection() { - var direction = instance.direction; - if (direction !== 'alternate') { - instance.direction = direction !== 'normal' ? 'normal' : 'reverse'; - } - instance.reversed = !instance.reversed; - children.forEach(function (child) { return child.reversed = instance.reversed; }); - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function resetTime() { - startTime = 0; - lastTime = adjustTime(instance.currentTime) * (1 / anime.speed); - } - - function seekChild(time, child) { - if (child) { child.seek(time - child.timelineOffset); } - } - - function syncInstanceChildren(time) { - if (!instance.reversePlayback) { - for (var i = 0; i < childrenLength; i++) { seekChild(time, children[i]); } - } else { - for (var i$1 = childrenLength; i$1--;) { seekChild(time, children[i$1]); } - } - } - - function setAnimationsProgress(insTime) { - var i = 0; - var animations = instance.animations; - var animationsLength = animations.length; - while (i < animationsLength) { - var anim = animations[i]; - var animatable = anim.animatable; - var tweens = anim.tweens; - var tweenLength = tweens.length - 1; - var tween = tweens[tweenLength]; - // Only check for keyframes if there is more than one tween - if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; } - var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed); - var strings = tween.to.strings; - var round = tween.round; - var numbers = []; - var toNumbersLength = tween.to.numbers.length; - var progress = (void 0); - for (var n = 0; n < toNumbersLength; n++) { - var value = (void 0); - var toNumber = tween.to.numbers[n]; - var fromNumber = tween.from.numbers[n] || 0; - if (!tween.isPath) { - value = fromNumber + (eased * (toNumber - fromNumber)); - } else { - value = getPathProgress(tween.value, eased * toNumber, tween.isPathTargetInsideSVG); - } - if (round) { - if (!(tween.isColor && n > 2)) { - value = Math.round(value * round) / round; - } - } - numbers.push(value); - } - // Manual Array.reduce for better performances - var stringsLength = strings.length; - if (!stringsLength) { - progress = numbers[0]; - } else { - progress = strings[0]; - for (var s = 0; s < stringsLength; s++) { - var a = strings[s]; - var b = strings[s + 1]; - var n$1 = numbers[s]; - if (!isNaN(n$1)) { - if (!b) { - progress += n$1 + ' '; - } else { - progress += n$1 + b; - } - } - } - } - setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms); - anim.currentValue = progress; - i++; - } - } - - function setCallback(cb) { - if (instance[cb] && !instance.passThrough) { instance[cb](instance); } - } - - function countIteration() { - if (instance.remaining && instance.remaining !== true) { - instance.remaining--; - } - } - - function setInstanceProgress(engineTime) { - var insDuration = instance.duration; - var insDelay = instance.delay; - var insEndDelay = insDuration - instance.endDelay; - var insTime = adjustTime(engineTime); - instance.progress = minMax((insTime / insDuration) * 100, 0, 100); - instance.reversePlayback = insTime < instance.currentTime; - if (children) { syncInstanceChildren(insTime); } - if (!instance.began && instance.currentTime > 0) { - instance.began = true; - setCallback('begin'); - } - if (!instance.loopBegan && instance.currentTime > 0) { - instance.loopBegan = true; - setCallback('loopBegin'); - } - if (insTime <= insDelay && instance.currentTime !== 0) { - setAnimationsProgress(0); - } - if ((insTime >= insEndDelay && instance.currentTime !== insDuration) || !insDuration) { - setAnimationsProgress(insDuration); - } - if (insTime > insDelay && insTime < insEndDelay) { - if (!instance.changeBegan) { - instance.changeBegan = true; - instance.changeCompleted = false; - setCallback('changeBegin'); - } - setCallback('change'); - setAnimationsProgress(insTime); - } else { - if (instance.changeBegan) { - instance.changeCompleted = true; - instance.changeBegan = false; - setCallback('changeComplete'); - } - } - instance.currentTime = minMax(insTime, 0, insDuration); - if (instance.began) { setCallback('update'); } - if (engineTime >= insDuration) { - lastTime = 0; - countIteration(); - if (!instance.remaining) { - instance.paused = true; - if (!instance.completed) { - instance.completed = true; - setCallback('loopComplete'); - setCallback('complete'); - if (!instance.passThrough && 'Promise' in window) { - resolve(); - promise = makePromise(instance); - } - } - } else { - startTime = now; - setCallback('loopComplete'); - instance.loopBegan = false; - if (instance.direction === 'alternate') { - toggleInstanceDirection(); - } - } - } - } - - instance.reset = function() { - var direction = instance.direction; - instance.passThrough = false; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.loopBegan = false; - instance.changeBegan = false; - instance.completed = false; - instance.changeCompleted = false; - instance.reversePlayback = false; - instance.reversed = direction === 'reverse'; - instance.remaining = instance.loop; - children = instance.children; - childrenLength = children.length; - for (var i = childrenLength; i--;) { instance.children[i].reset(); } - if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) { instance.remaining++; } - setAnimationsProgress(instance.reversed ? instance.duration : 0); - }; - - // internal method (for engine) to adjust animation timings before restoring engine ticks (rAF) - instance._onDocumentVisibility = resetTime; - - // Set Value helper - - instance.set = function(targets, properties) { - setTargetsValue(targets, properties); - return instance; - }; - - instance.tick = function(t) { - now = t; - if (!startTime) { startTime = now; } - setInstanceProgress((now + (lastTime - startTime)) * anime.speed); - }; - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time)); - }; - - instance.pause = function() { - instance.paused = true; - resetTime(); - }; - - instance.play = function() { - if (!instance.paused) { return; } - if (instance.completed) { instance.reset(); } - instance.paused = false; - activeInstances.push(instance); - resetTime(); - engine(); - }; - - instance.reverse = function() { - toggleInstanceDirection(); - instance.completed = instance.reversed ? false : true; - resetTime(); - }; - - instance.restart = function() { - instance.reset(); - instance.play(); - }; - - instance.remove = function(targets) { - var targetsArray = parseTargets(targets); - removeTargetsFromInstance(targetsArray, instance); - }; - - instance.reset(); - - if (instance.autoplay) { instance.play(); } - - return instance; - -} - -// Remove targets from animation - -function removeTargetsFromAnimations(targetsArray, animations) { - for (var a = animations.length; a--;) { - if (arrayContains(targetsArray, animations[a].animatable.target)) { - animations.splice(a, 1); - } - } -} - -function removeTargetsFromInstance(targetsArray, instance) { - var animations = instance.animations; - var children = instance.children; - removeTargetsFromAnimations(targetsArray, animations); - for (var c = children.length; c--;) { - var child = children[c]; - var childAnimations = child.animations; - removeTargetsFromAnimations(targetsArray, childAnimations); - if (!childAnimations.length && !child.children.length) { children.splice(c, 1); } - } - if (!animations.length && !children.length) { instance.pause(); } -} - -function removeTargetsFromActiveInstances(targets) { - var targetsArray = parseTargets(targets); - for (var i = activeInstances.length; i--;) { - var instance = activeInstances[i]; - removeTargetsFromInstance(targetsArray, instance); - } -} - -// Stagger helpers - -function stagger(val, params) { - if ( params === void 0 ) params = {}; - - var direction = params.direction || 'normal'; - var easing = params.easing ? parseEasings(params.easing) : null; - var grid = params.grid; - var axis = params.axis; - var fromIndex = params.from || 0; - var fromFirst = fromIndex === 'first'; - var fromCenter = fromIndex === 'center'; - var fromLast = fromIndex === 'last'; - var isRange = is.arr(val); - var val1 = isRange ? parseFloat(val[0]) : parseFloat(val); - var val2 = isRange ? parseFloat(val[1]) : 0; - var unit = getUnit(isRange ? val[1] : val) || 0; - var start = params.start || 0 + (isRange ? val1 : 0); - var values = []; - var maxValue = 0; - return function (el, i, t) { - if (fromFirst) { fromIndex = 0; } - if (fromCenter) { fromIndex = (t - 1) / 2; } - if (fromLast) { fromIndex = t - 1; } - if (!values.length) { - for (var index = 0; index < t; index++) { - if (!grid) { - values.push(Math.abs(fromIndex - index)); - } else { - var fromX = !fromCenter ? fromIndex%grid[0] : (grid[0]-1)/2; - var fromY = !fromCenter ? Math.floor(fromIndex/grid[0]) : (grid[1]-1)/2; - var toX = index%grid[0]; - var toY = Math.floor(index/grid[0]); - var distanceX = fromX - toX; - var distanceY = fromY - toY; - var value = Math.sqrt(distanceX * distanceX + distanceY * distanceY); - if (axis === 'x') { value = -distanceX; } - if (axis === 'y') { value = -distanceY; } - values.push(value); - } - maxValue = Math.max.apply(Math, values); - } - if (easing) { values = values.map(function (val) { return easing(val / maxValue) * maxValue; }); } - if (direction === 'reverse') { values = values.map(function (val) { return axis ? (val < 0) ? val * -1 : -val : Math.abs(maxValue - val); }); } - } - var spacing = isRange ? (val2 - val1) / maxValue : val1; - return start + (spacing * (Math.round(values[i] * 100) / 100)) + unit; - } -} - -// Timeline - -function timeline(params) { - if ( params === void 0 ) params = {}; - - var tl = anime(params); - tl.duration = 0; - tl.add = function(instanceParams, timelineOffset) { - var tlIndex = activeInstances.indexOf(tl); - var children = tl.children; - if (tlIndex > -1) { activeInstances.splice(tlIndex, 1); } - function passThrough(ins) { ins.passThrough = true; } - for (var i = 0; i < children.length; i++) { passThrough(children[i]); } - var insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params)); - insParams.targets = insParams.targets || params.targets; - var tlDuration = tl.duration; - insParams.autoplay = false; - insParams.direction = tl.direction; - insParams.timelineOffset = is.und(timelineOffset) ? tlDuration : getRelativeValue(timelineOffset, tlDuration); - passThrough(tl); - tl.seek(insParams.timelineOffset); - var ins = anime(insParams); - passThrough(ins); - children.push(ins); - var timings = getInstanceTimings(children, params); - tl.delay = timings.delay; - tl.endDelay = timings.endDelay; - tl.duration = timings.duration; - tl.seek(0); - tl.reset(); - if (tl.autoplay) { tl.play(); } - return tl; - }; - return tl; -} - -anime.version = '3.2.1'; -anime.speed = 1; -// TODO:#review: naming, documentation -anime.suspendWhenDocumentHidden = true; -anime.running = activeInstances; -anime.remove = removeTargetsFromActiveInstances; -anime.get = getOriginalTargetValue; -anime.set = setTargetsValue; -anime.convertPx = convertPxToUnit; -anime.path = getPath; -anime.setDashoffset = setDashoffset; -anime.stagger = stagger; -anime.timeline = timeline; -anime.easing = parseEasings; -anime.penner = penner; -anime.random = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; - -module.exports = anime; diff --git a/js/anime-master/lib/anime.min.js b/js/anime-master/lib/anime.min.js deleted file mode 100644 index 7696a5b..0000000 --- a/js/anime-master/lib/anime.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * anime.js v3.2.1 - * (c) 2020 Julian Garnier - * Released under the MIT license - * animejs.com - */ - -!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return i.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),o=a(i.und(t[0])?1:t[0],.1,100),u=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,v=1,h=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(v*Math.cos(p*t)+h*Math.sin(p*t)):(v+h*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var o=t*(1/6)*1e3;return r.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.ceil(a(e,1e-6,1)*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((t(e,o)*n+r(e,o))*n+a(e))*n}function u(n,e,o){return 3*t(e,o)*n*n+2*r(e,o)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=u(e,t,r);if(0===i)return e;e-=(o(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var u,i,c=0;(u=o(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),v=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}},l["easeOutIn"+n]=function(n,t){return function(r){return r<.5?(1-e(n,t)(1-2*r))/2:(e(n,t)(2*r-1)+1)/2}}}),l);function h(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=v[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==u)e=t=r=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),t=s(l,f,o),r=s(l,f,o-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function D(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+t;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function B(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?D(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(!i.nil(I(n,e))||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&B(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?D(n,i,r):i}function A(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return B(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function N(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function S(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e?r+e:r}function L(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function j(n){for(var e,t=n.points,r=0,a=0;a0&&(r+=L(e,o)),e=o}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*I(o,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return L({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return j(n);case"polygon":return t=(e=n).points,j(e)+L(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,o}function H(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=r.getBoundingClientRect(),o=I(r,"viewBox"),u=a.width,c=a.height,s=t.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:u,h:c,vW:s[2],vH:s[3]}}function V(n,e,t){function r(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var a=H(n.el,n.svg),o=r(),u=r(-1),i=r(1),c=t?1:a.w/a.vW,s=t?1:a.h/a.vH;switch(n.property){case"x":return(o.x-a.x)*c;case"y":return(o.y-a.y)*s;case"angle":return 180*Math.atan2(i.y-u.y,i.x-u.x)/Math.PI}}function $(n,e){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=S(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function W(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function X(n){var e=W(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function Y(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function Z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a0?requestAnimationFrame(e):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){en.suspendWhenDocumentHidden&&(nn()?n=cancelAnimationFrame(n):(K.forEach(function(n){return n._onDocumentVisibility()}),U()))}),function(){n||nn()&&en.suspendWhenDocumentHidden||!(K.length>0)||(n=requestAnimationFrame(e))}}();function nn(){return!!document&&document.hidden}function en(t){void 0===t&&(t={});var r,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,v,h,g,y,b,M=(d=w(n,l=t),p=w(e,l),v=Z(p,l),h=X(l.targets),g=_(h,v),y=R(g,p),b=J,J++,k(d,{id:b,children:[],animatables:h,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/en.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e2||(b=Math.round(b*p)/p)),v.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O0&&(M.began=!0,D("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,D("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,D("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,D("loopComplete"),D("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(M.reversed?M.duration:0)},M._onDocumentVisibility=C,M.set=function(n,e){return z(n,e),M},M.tick=function(n){i=n,o||(o=i),B((i+(u-o))*en.speed)},M.seek=function(n){B(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,K.push(M),C(),U())},M.reverse=function(){x(),M.completed=!M.reversed,C()},M.restart=function(){M.reset(),M.play()},M.remove=function(n){rn(W(n),M)},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}function rn(n,e){var t=e.animations,r=e.children;tn(n,t);for(var a=r.length;a--;){var o=r[a],u=o.animations;tn(n,u),u.length||o.children.length||r.splice(a,1)}t.length||r.length||e.pause()}return en.version="3.2.1",en.speed=1,en.suspendWhenDocumentHidden=!0,en.running=K,en.remove=function(n){for(var e=W(n),t=K.length;t--;)rn(e,K[t])},en.get=A,en.set=z,en.convertPx=D,en.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:H(t),totalLength:q(t)*(r/100)}}},en.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},en.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?h(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,v=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var h=0;h-1&&K.splice(o,1);for(var s=0;s", - "files": [ - "lib" - ], - "scripts": { - "build": "node build" - }, - "bugs": { - "url": "https://github.com/juliangarnier/anime/issues" - }, - "keywords": [ - "anime", - "animation", - "javascript", - "CSS", - "transforms", - "SVG", - "canvas" - ], - "devDependencies": { - "gzip-size": "^4.1.0", - "pretty-bytes": "^4.0.2", - "rollup": "^0.53.2", - "rollup-plugin-buble": "^0.18.0", - "uglify-js": "^3.3.4" - } -} diff --git a/js/anime-master/src/index.js b/js/anime-master/src/index.js deleted file mode 100644 index af520bb..0000000 --- a/js/anime-master/src/index.js +++ /dev/null @@ -1,1289 +0,0 @@ -// Defaults - -const defaultInstanceSettings = { - update: null, - begin: null, - loopBegin: null, - changeBegin: null, - change: null, - changeComplete: null, - loopComplete: null, - complete: null, - loop: 1, - direction: 'normal', - autoplay: true, - timelineOffset: 0 -} - -const defaultTweenSettings = { - duration: 1000, - delay: 0, - endDelay: 0, - easing: 'easeOutElastic(1, .5)', - round: 0 -} - -const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d']; - -// Caching - -const cache = { - CSS: {}, - springs: {} -} - -// Utils - -function minMax(val, min, max) { - return Math.min(Math.max(val, min), max); -} - -function stringContains(str, text) { - return str.indexOf(text) > -1; -} - -function applyArguments(func, args) { - return func.apply(null, args); -} - -const is = { - arr: a => Array.isArray(a), - obj: a => stringContains(Object.prototype.toString.call(a), 'Object'), - pth: a => is.obj(a) && a.hasOwnProperty('totalLength'), - svg: a => a instanceof SVGElement, - inp: a => a instanceof HTMLInputElement, - dom: a => a.nodeType || is.svg(a), - str: a => typeof a === 'string', - fnc: a => typeof a === 'function', - und: a => typeof a === 'undefined', - nil: a => is.und(a) || a === null, - hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a), - rgb: a => /^rgb/.test(a), - hsl: a => /^hsl/.test(a), - col: a => (is.hex(a) || is.rgb(a) || is.hsl(a)), - key: a => !defaultInstanceSettings.hasOwnProperty(a) && !defaultTweenSettings.hasOwnProperty(a) && a !== 'targets' && a !== 'keyframes', -} - -// Easings - -function parseEasingParameters(string) { - const match = /\(([^)]+)\)/.exec(string); - return match ? match[1].split(',').map(p => parseFloat(p)) : []; -} - -// Spring solver inspired by Webkit Copyright © 2016 Apple Inc. All rights reserved. https://webkit.org/demos/spring/spring.js - -function spring(string, duration) { - - const params = parseEasingParameters(string); - const mass = minMax(is.und(params[0]) ? 1 : params[0], .1, 100); - const stiffness = minMax(is.und(params[1]) ? 100 : params[1], .1, 100); - const damping = minMax(is.und(params[2]) ? 10 : params[2], .1, 100); - const velocity = minMax(is.und(params[3]) ? 0 : params[3], .1, 100); - const w0 = Math.sqrt(stiffness / mass); - const zeta = damping / (2 * Math.sqrt(stiffness * mass)); - const wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0; - const a = 1; - const b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0; - - function solver(t) { - let progress = duration ? (duration * t) / 1000 : t; - if (zeta < 1) { - progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress)); - } else { - progress = (a + b * progress) * Math.exp(-progress * w0); - } - if (t === 0 || t === 1) return t; - return 1 - progress; - } - - function getDuration() { - const cached = cache.springs[string]; - if (cached) return cached; - const frame = 1/6; - let elapsed = 0; - let rest = 0; - while(true) { - elapsed += frame; - if (solver(elapsed) === 1) { - rest++; - if (rest >= 16) break; - } else { - rest = 0; - } - } - const duration = elapsed * frame * 1000; - cache.springs[string] = duration; - return duration; - } - - return duration ? solver : getDuration; - -} - -// Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function - -function steps(steps = 10) { - return t => Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); -} - -// BezierEasing https://github.com/gre/bezier-easing - -const bezier = (() => { - - const kSplineTableSize = 11; - const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }; - function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }; - function C(aA1) { return 3.0 * aA1 }; - - function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }; - function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }; - - function binarySubdivide(aX, aA, aB, mX1, mX2) { - let currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { aB = currentT } else { aA = currentT }; - } while (Math.abs(currentX) > 0.0000001 && ++i < 10); - return currentT; - } - - function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) { - for (let i = 0; i < 4; ++i) { - const currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) return aGuessT; - const currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - function bezier(mX1, mY1, mX2, mY2) { - - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) return; - let sampleValues = new Float32Array(kSplineTableSize); - - if (mX1 !== mY1 || mX2 !== mY2) { - for (let i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX(aX) { - - let intervalStart = 0; - let currentSample = 1; - const lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - const guessForT = intervalStart + dist * kSampleStepSize; - const initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= 0.001) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - - } - - return x => { - if (mX1 === mY1 && mX2 === mY2) return x; - if (x === 0 || x === 1) return x; - return calcBezier(getTForX(x), mY1, mY2); - } - - } - - return bezier; - -})(); - -const penner = (() => { - - // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing) - - const eases = { linear: () => t => t }; - - const functionEasings = { - Sine: () => t => 1 - Math.cos(t * Math.PI / 2), - Circ: () => t => 1 - Math.sqrt(1 - t * t), - Back: () => t => t * t * (3 * t - 2), - Bounce: () => t => { - let pow2, b = 4; - while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {}; - return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2) - }, - Elastic: (amplitude = 1, period = .5) => { - const a = minMax(amplitude, 1, 10); - const p = minMax(period, .1, 2); - return t => { - return (t === 0 || t === 1) ? t : - -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p); - } - } - } - - const baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo']; - - baseEasings.forEach((name, i) => { - functionEasings[name] = () => t => Math.pow(t, i + 2); - }); - - Object.keys(functionEasings).forEach(name => { - const easeIn = functionEasings[name]; - eases['easeIn' + name] = easeIn; - eases['easeOut' + name] = (a, b) => t => 1 - easeIn(a, b)(1 - t); - eases['easeInOut' + name] = (a, b) => t => t < 0.5 ? easeIn(a, b)(t * 2) / 2 : - 1 - easeIn(a, b)(t * -2 + 2) / 2; - eases['easeOutIn' + name] = (a, b) => t => t < 0.5 ? (1 - easeIn(a, b)(1 - t * 2)) / 2 : - (easeIn(a, b)(t * 2 - 1) + 1) / 2; - }); - - return eases; - -})(); - -function parseEasings(easing, duration) { - if (is.fnc(easing)) return easing; - const name = easing.split('(')[0]; - const ease = penner[name]; - const args = parseEasingParameters(easing); - switch (name) { - case 'spring' : return spring(easing, duration); - case 'cubicBezier' : return applyArguments(bezier, args); - case 'steps' : return applyArguments(steps, args); - default : return applyArguments(ease, args); - } -} - -// Strings - -function selectString(str) { - try { - let nodes = document.querySelectorAll(str); - return nodes; - } catch(e) { - return; - } -} - -// Arrays - -function filterArray(arr, callback) { - const len = arr.length; - const thisArg = arguments.length >= 2 ? arguments[1] : void 0; - const result = []; - for (let i = 0; i < len; i++) { - if (i in arr) { - const val = arr[i]; - if (callback.call(thisArg, val, i, arr)) { - result.push(val); - } - } - } - return result; -} - -function flattenArray(arr) { - return arr.reduce((a, b) => a.concat(is.arr(b) ? flattenArray(b) : b), []); -} - -function toArray(o) { - if (is.arr(o)) return o; - if (is.str(o)) o = selectString(o) || o; - if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o); - return [o]; -} - -function arrayContains(arr, val) { - return arr.some(a => a === val); -} - -// Objects - -function cloneObject(o) { - const clone = {}; - for (let p in o) clone[p] = o[p]; - return clone; -} - -function replaceObjectProps(o1, o2) { - const o = cloneObject(o1); - for (let p in o1) o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; - return o; -} - -function mergeObjects(o1, o2) { - const o = cloneObject(o1); - for (let p in o2) o[p] = is.und(o1[p]) ? o2[p] : o1[p]; - return o; -} - -// Colors - -function rgbToRgba(rgbValue) { - const rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue); - return rgb ? `rgba(${rgb[1]},1)` : rgbValue; -} - -function hexToRgba(hexValue) { - const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b ); - const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - const r = parseInt(rgb[1], 16); - const g = parseInt(rgb[2], 16); - const b = parseInt(rgb[3], 16); - return `rgba(${r},${g},${b},1)`; -} - -function hslToRgba(hslValue) { - const hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue); - const h = parseInt(hsl[1], 10) / 360; - const s = parseInt(hsl[2], 10) / 100; - const l = parseInt(hsl[3], 10) / 100; - const a = hsl[4] || 1; - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - let r, g, b; - if (s == 0) { - r = g = b = l; - } else { - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - return `rgba(${r * 255},${g * 255},${b * 255},${a})`; -} - -function colorToRgb(val) { - if (is.rgb(val)) return rgbToRgba(val); - if (is.hex(val)) return hexToRgba(val); - if (is.hsl(val)) return hslToRgba(val); -} - -// Units - -function getUnit(val) { - const split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val); - if (split) return split[1]; -} - -function getTransformUnit(propName) { - if (stringContains(propName, 'translate') || propName === 'perspective') return 'px'; - if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) return 'deg'; -} - -// Values - -function getFunctionValue(val, animatable) { - if (!is.fnc(val)) return val; - return val(animatable.target, animatable.id, animatable.total); -} - -function getAttribute(el, prop) { - return el.getAttribute(prop); -} - -function convertPxToUnit(el, value, unit) { - const valueUnit = getUnit(value); - if (arrayContains([unit, 'deg', 'rad', 'turn'], valueUnit)) return value; - const cached = cache.CSS[value + unit]; - if (!is.und(cached)) return cached; - const baseline = 100; - const tempEl = document.createElement(el.tagName); - const parentEl = (el.parentNode && (el.parentNode !== document)) ? el.parentNode : document.body; - parentEl.appendChild(tempEl); - tempEl.style.position = 'absolute'; - tempEl.style.width = baseline + unit; - const factor = baseline / tempEl.offsetWidth; - parentEl.removeChild(tempEl); - const convertedUnit = factor * parseFloat(value); - cache.CSS[value + unit] = convertedUnit; - return convertedUnit; -} - -function getCSSValue(el, prop, unit) { - if (prop in el.style) { - const uppercasePropName = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - const value = el.style[prop] || getComputedStyle(el).getPropertyValue(uppercasePropName) || '0'; - return unit ? convertPxToUnit(el, value, unit) : value; - } -} - -function getAnimationType(el, prop) { - if (is.dom(el) && !is.inp(el) && (!is.nil(getAttribute(el, prop)) || (is.svg(el) && el[prop]))) return 'attribute'; - if (is.dom(el) && arrayContains(validTransforms, prop)) return 'transform'; - if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) return 'css'; - if (el[prop] != null) return 'object'; -} - -function getElementTransforms(el) { - if (!is.dom(el)) return; - const str = el.style.transform || ''; - const reg = /(\w+)\(([^)]*)\)/g; - const transforms = new Map(); - let m; while (m = reg.exec(str)) transforms.set(m[1], m[2]); - return transforms; -} - -function getTransformValue(el, propName, animatable, unit) { - const defaultVal = stringContains(propName, 'scale') ? 1 : 0 + getTransformUnit(propName); - const value = getElementTransforms(el).get(propName) || defaultVal; - if (animatable) { - animatable.transforms.list.set(propName, value); - animatable.transforms['last'] = propName; - } - return unit ? convertPxToUnit(el, value, unit) : value; -} - -function getOriginalTargetValue(target, propName, unit, animatable) { - switch (getAnimationType(target, propName)) { - case 'transform': return getTransformValue(target, propName, animatable, unit); - case 'css': return getCSSValue(target, propName, unit); - case 'attribute': return getAttribute(target, propName); - default: return target[propName] || 0; - } -} - -function getRelativeValue(to, from) { - const operator = /^(\*=|\+=|-=)/.exec(to); - if (!operator) return to; - const u = getUnit(to) || 0; - const x = parseFloat(from); - const y = parseFloat(to.replace(operator[0], '')); - switch (operator[0][0]) { - case '+': return x + y + u; - case '-': return x - y + u; - case '*': return x * y + u; - } -} - -function validateValue(val, unit) { - if (is.col(val)) return colorToRgb(val); - if (/\s/g.test(val)) return val; - const originalUnit = getUnit(val); - const unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val; - if (unit) return unitLess + unit; - return unitLess; -} - -// getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes -// adapted from https://gist.github.com/SebLambla/3e0550c496c236709744 - -function getDistance(p1, p2) { - return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); -} - -function getCircleLength(el) { - return Math.PI * 2 * getAttribute(el, 'r'); -} - -function getRectLength(el) { - return (getAttribute(el, 'width') * 2) + (getAttribute(el, 'height') * 2); -} - -function getLineLength(el) { - return getDistance( - {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, - {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')} - ); -} - -function getPolylineLength(el) { - const points = el.points; - let totalLength = 0; - let previousPos; - for (let i = 0 ; i < points.numberOfItems; i++) { - const currentPos = points.getItem(i); - if (i > 0) totalLength += getDistance(previousPos, currentPos); - previousPos = currentPos; - } - return totalLength; -} - -function getPolygonLength(el) { - const points = el.points; - return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0)); -} - -// Path animation - -function getTotalLength(el) { - if (el.getTotalLength) return el.getTotalLength(); - switch(el.tagName.toLowerCase()) { - case 'circle': return getCircleLength(el); - case 'rect': return getRectLength(el); - case 'line': return getLineLength(el); - case 'polyline': return getPolylineLength(el); - case 'polygon': return getPolygonLength(el); - } -} - -function setDashoffset(el) { - const pathLength = getTotalLength(el); - el.setAttribute('stroke-dasharray', pathLength); - return pathLength; -} - -// Motion path - -function getParentSvgEl(el) { - let parentEl = el.parentNode; - while (is.svg(parentEl)) { - if (!is.svg(parentEl.parentNode)) break; - parentEl = parentEl.parentNode; - } - return parentEl; -} - -function getParentSvg(pathEl, svgData) { - const svg = svgData || {}; - const parentSvgEl = svg.el || getParentSvgEl(pathEl); - const rect = parentSvgEl.getBoundingClientRect(); - const viewBoxAttr = getAttribute(parentSvgEl, 'viewBox'); - const width = rect.width; - const height = rect.height; - const viewBox = svg.viewBox || (viewBoxAttr ? viewBoxAttr.split(' ') : [0, 0, width, height]); - return { - el: parentSvgEl, - viewBox: viewBox, - x: viewBox[0] / 1, - y: viewBox[1] / 1, - w: width, - h: height, - vW: viewBox[2], - vH: viewBox[3] - } -} - -function getPath(path, percent) { - const pathEl = is.str(path) ? selectString(path)[0] : path; - const p = percent || 100; - return function(property) { - return { - property, - el: pathEl, - svg: getParentSvg(pathEl), - totalLength: getTotalLength(pathEl) * (p / 100) - } - } -} - -function getPathProgress(path, progress, isPathTargetInsideSVG) { - function point(offset = 0) { - const l = progress + offset >= 1 ? progress + offset : 0; - return path.el.getPointAtLength(l); - } - const svg = getParentSvg(path.el, path.svg) - const p = point(); - const p0 = point(-1); - const p1 = point(+1); - const scaleX = isPathTargetInsideSVG ? 1 : svg.w / svg.vW; - const scaleY = isPathTargetInsideSVG ? 1 : svg.h / svg.vH; - switch (path.property) { - case 'x': return (p.x - svg.x) * scaleX; - case 'y': return (p.y - svg.y) * scaleY; - case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI; - } -} - -// Decompose value - -function decomposeValue(val, unit) { - // const rgx = /-?\d*\.?\d+/g; // handles basic numbers - // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation - const rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation - const value = validateValue((is.pth(val) ? val.totalLength : val), unit) + ''; - return { - original: value, - numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0], - strings: (is.str(val) || unit) ? value.split(rgx) : [] - } -} - -// Animatables - -function parseTargets(targets) { - const targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : []; - return filterArray(targetsArray, (item, pos, self) => self.indexOf(item) === pos); -} - -function getAnimatables(targets) { - const parsed = parseTargets(targets); - return parsed.map((t, i) => { - return {target: t, id: i, total: parsed.length, transforms: { list: getElementTransforms(t) } }; - }); -} - -// Properties - -function normalizePropertyTweens(prop, tweenSettings) { - let settings = cloneObject(tweenSettings); - // Override duration if easing is a spring - if (/^spring/.test(settings.easing)) settings.duration = spring(settings.easing); - if (is.arr(prop)) { - const l = prop.length; - const isFromTo = (l === 2 && !is.obj(prop[0])); - if (!isFromTo) { - // Duration divided by the number of tweens - if (!is.fnc(tweenSettings.duration)) settings.duration = tweenSettings.duration / l; - } else { - // Transform [from, to] values shorthand to a valid tween value - prop = {value: prop}; - } - } - const propArray = is.arr(prop) ? prop : [prop]; - return propArray.map((v, i) => { - const obj = (is.obj(v) && !is.pth(v)) ? v : {value: v}; - // Default delay value should only be applied to the first tween - if (is.und(obj.delay)) obj.delay = !i ? tweenSettings.delay : 0; - // Default endDelay value should only be applied to the last tween - if (is.und(obj.endDelay)) obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0; - return obj; - }).map(k => mergeObjects(k, settings)); -} - - -function flattenKeyframes(keyframes) { - const propertyNames = filterArray(flattenArray(keyframes.map(key => Object.keys(key))), p => is.key(p)) - .reduce((a,b) => { if (a.indexOf(b) < 0) a.push(b); return a; }, []); - const properties = {}; - for (let i = 0; i < propertyNames.length; i++) { - const propName = propertyNames[i]; - properties[propName] = keyframes.map(key => { - const newKey = {}; - for (let p in key) { - if (is.key(p)) { - if (p == propName) newKey.value = key[p]; - } else { - newKey[p] = key[p]; - } - } - return newKey; - }); - } - return properties; -} - -function getProperties(tweenSettings, params) { - const properties = []; - const keyframes = params.keyframes; - if (keyframes) params = mergeObjects(flattenKeyframes(keyframes), params);; - for (let p in params) { - if (is.key(p)) { - properties.push({ - name: p, - tweens: normalizePropertyTweens(params[p], tweenSettings) - }); - } - } - return properties; -} - -// Tweens - -function normalizeTweenValues(tween, animatable) { - const t = {}; - for (let p in tween) { - let value = getFunctionValue(tween[p], animatable); - if (is.arr(value)) { - value = value.map(v => getFunctionValue(v, animatable)); - if (value.length === 1) value = value[0]; - } - t[p] = value; - } - t.duration = parseFloat(t.duration); - t.delay = parseFloat(t.delay); - return t; -} - -function normalizeTweens(prop, animatable) { - let previousTween; - return prop.tweens.map(t => { - const tween = normalizeTweenValues(t, animatable); - const tweenValue = tween.value; - let to = is.arr(tweenValue) ? tweenValue[1] : tweenValue; - const toUnit = getUnit(to); - const originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable); - const previousValue = previousTween ? previousTween.to.original : originalValue; - const from = is.arr(tweenValue) ? tweenValue[0] : previousValue; - const fromUnit = getUnit(from) || getUnit(originalValue); - const unit = toUnit || fromUnit; - if (is.und(to)) to = previousValue; - tween.from = decomposeValue(from, unit); - tween.to = decomposeValue(getRelativeValue(to, from), unit); - tween.start = previousTween ? previousTween.end : 0; - tween.end = tween.start + tween.delay + tween.duration + tween.endDelay; - tween.easing = parseEasings(tween.easing, tween.duration); - tween.isPath = is.pth(tweenValue); - tween.isPathTargetInsideSVG = tween.isPath && is.svg(animatable.target); - tween.isColor = is.col(tween.from.original); - if (tween.isColor) tween.round = 1; - previousTween = tween; - return tween; - }); -} - -// Tween progress - -const setProgressValue = { - css: (t, p, v) => t.style[p] = v, - attribute: (t, p, v) => t.setAttribute(p, v), - object: (t, p, v) => t[p] = v, - transform: (t, p, v, transforms, manual) => { - transforms.list.set(p, v); - if (p === transforms.last || manual) { - let str = ''; - transforms.list.forEach((value, prop) => { str += `${prop}(${value}) `; }); - t.style.transform = str; - } - } -} - -// Set Value helper - -function setTargetsValue(targets, properties) { - const animatables = getAnimatables(targets); - animatables.forEach(animatable => { - for (let property in properties) { - const value = getFunctionValue(properties[property], animatable); - const target = animatable.target; - const valueUnit = getUnit(value); - const originalValue = getOriginalTargetValue(target, property, valueUnit, animatable); - const unit = valueUnit || getUnit(originalValue); - const to = getRelativeValue(validateValue(value, unit), originalValue); - const animType = getAnimationType(target, property); - setProgressValue[animType](target, property, to, animatable.transforms, true); - } - }); -} - -// Animations - -function createAnimation(animatable, prop) { - const animType = getAnimationType(animatable.target, prop.name); - if (animType) { - const tweens = normalizeTweens(prop, animatable); - const lastTween = tweens[tweens.length - 1]; - return { - type: animType, - property: prop.name, - animatable: animatable, - tweens: tweens, - duration: lastTween.end, - delay: tweens[0].delay, - endDelay: lastTween.endDelay - } - } -} - -function getAnimations(animatables, properties) { - return filterArray(flattenArray(animatables.map(animatable => { - return properties.map(prop => { - return createAnimation(animatable, prop); - }); - })), a => !is.und(a)); -} - -// Create Instance - -function getInstanceTimings(animations, tweenSettings) { - const animLength = animations.length; - const getTlOffset = anim => anim.timelineOffset ? anim.timelineOffset : 0; - const timings = {}; - timings.duration = animLength ? Math.max.apply(Math, animations.map(anim => getTlOffset(anim) + anim.duration)) : tweenSettings.duration; - timings.delay = animLength ? Math.min.apply(Math, animations.map(anim => getTlOffset(anim) + anim.delay)) : tweenSettings.delay; - timings.endDelay = animLength ? timings.duration - Math.max.apply(Math, animations.map(anim => getTlOffset(anim) + anim.duration - anim.endDelay)) : tweenSettings.endDelay; - return timings; -} - -let instanceID = 0; - -function createNewInstance(params) { - const instanceSettings = replaceObjectProps(defaultInstanceSettings, params); - const tweenSettings = replaceObjectProps(defaultTweenSettings, params); - const properties = getProperties(tweenSettings, params); - const animatables = getAnimatables(params.targets); - const animations = getAnimations(animatables, properties); - const timings = getInstanceTimings(animations, tweenSettings); - const id = instanceID; - instanceID++; - return mergeObjects(instanceSettings, { - id: id, - children: [], - animatables: animatables, - animations: animations, - duration: timings.duration, - delay: timings.delay, - endDelay: timings.endDelay - }); -} - -// Core - -let activeInstances = []; - -const engine = (() => { - let raf; - - function play() { - if (!raf && (!isDocumentHidden() || !anime.suspendWhenDocumentHidden) && activeInstances.length > 0) { - raf = requestAnimationFrame(step); - } - } - function step(t) { - // memo on algorithm issue: - // dangerous iteration over mutable `activeInstances` - // (that collection may be updated from within callbacks of `tick`-ed animation instances) - let activeInstancesLength = activeInstances.length; - let i = 0; - while (i < activeInstancesLength) { - const activeInstance = activeInstances[i]; - if (!activeInstance.paused) { - activeInstance.tick(t); - i++; - } else { - activeInstances.splice(i, 1); - activeInstancesLength--; - } - } - raf = i > 0 ? requestAnimationFrame(step) : undefined; - } - - function handleVisibilityChange() { - if (!anime.suspendWhenDocumentHidden) return; - - if (isDocumentHidden()) { - // suspend ticks - raf = cancelAnimationFrame(raf); - } else { // is back to active tab - // first adjust animations to consider the time that ticks were suspended - activeInstances.forEach( - instance => instance ._onDocumentVisibility() - ); - engine(); - } - } - if (typeof document !== 'undefined') { - document.addEventListener('visibilitychange', handleVisibilityChange); - } - - return play; -})(); - -function isDocumentHidden() { - return !!document && document.hidden; -} - -// Public Instance - -function anime(params = {}) { - - let startTime = 0, lastTime = 0, now = 0; - let children, childrenLength = 0; - let resolve = null; - - function makePromise(instance) { - const promise = window.Promise && new Promise(_resolve => resolve = _resolve); - instance.finished = promise; - return promise; - } - - let instance = createNewInstance(params); - let promise = makePromise(instance); - - function toggleInstanceDirection() { - const direction = instance.direction; - if (direction !== 'alternate') { - instance.direction = direction !== 'normal' ? 'normal' : 'reverse'; - } - instance.reversed = !instance.reversed; - children.forEach(child => child.reversed = instance.reversed); - } - - function adjustTime(time) { - return instance.reversed ? instance.duration - time : time; - } - - function resetTime() { - startTime = 0; - lastTime = adjustTime(instance.currentTime) * (1 / anime.speed); - } - - function seekChild(time, child) { - if (child) child.seek(time - child.timelineOffset); - } - - function syncInstanceChildren(time) { - if (!instance.reversePlayback) { - for (let i = 0; i < childrenLength; i++) seekChild(time, children[i]); - } else { - for (let i = childrenLength; i--;) seekChild(time, children[i]); - } - } - - function setAnimationsProgress(insTime) { - let i = 0; - const animations = instance.animations; - const animationsLength = animations.length; - while (i < animationsLength) { - const anim = animations[i]; - const animatable = anim.animatable; - const tweens = anim.tweens; - const tweenLength = tweens.length - 1; - let tween = tweens[tweenLength]; - // Only check for keyframes if there is more than one tween - if (tweenLength) tween = filterArray(tweens, t => (insTime < t.end))[0] || tween; - const elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; - const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed); - const strings = tween.to.strings; - const round = tween.round; - const numbers = []; - const toNumbersLength = tween.to.numbers.length; - let progress; - for (let n = 0; n < toNumbersLength; n++) { - let value; - const toNumber = tween.to.numbers[n]; - const fromNumber = tween.from.numbers[n] || 0; - if (!tween.isPath) { - value = fromNumber + (eased * (toNumber - fromNumber)); - } else { - value = getPathProgress(tween.value, eased * toNumber, tween.isPathTargetInsideSVG); - } - if (round) { - if (!(tween.isColor && n > 2)) { - value = Math.round(value * round) / round; - } - } - numbers.push(value); - } - // Manual Array.reduce for better performances - const stringsLength = strings.length; - if (!stringsLength) { - progress = numbers[0]; - } else { - progress = strings[0]; - for (let s = 0; s < stringsLength; s++) { - const a = strings[s]; - const b = strings[s + 1]; - const n = numbers[s]; - if (!isNaN(n)) { - if (!b) { - progress += n + ' '; - } else { - progress += n + b; - } - } - } - } - setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms); - anim.currentValue = progress; - i++; - } - } - - function setCallback(cb) { - if (instance[cb] && !instance.passThrough) instance[cb](instance); - } - - function countIteration() { - if (instance.remaining && instance.remaining !== true) { - instance.remaining--; - } - } - - function setInstanceProgress(engineTime) { - const insDuration = instance.duration; - const insDelay = instance.delay; - const insEndDelay = insDuration - instance.endDelay; - const insTime = adjustTime(engineTime); - instance.progress = minMax((insTime / insDuration) * 100, 0, 100); - instance.reversePlayback = insTime < instance.currentTime; - if (children) { syncInstanceChildren(insTime); } - if (!instance.began && instance.currentTime > 0) { - instance.began = true; - setCallback('begin'); - } - if (!instance.loopBegan && instance.currentTime > 0) { - instance.loopBegan = true; - setCallback('loopBegin'); - } - if (insTime <= insDelay && instance.currentTime !== 0) { - setAnimationsProgress(0); - } - if ((insTime >= insEndDelay && instance.currentTime !== insDuration) || !insDuration) { - setAnimationsProgress(insDuration); - } - if (insTime > insDelay && insTime < insEndDelay) { - if (!instance.changeBegan) { - instance.changeBegan = true; - instance.changeCompleted = false; - setCallback('changeBegin'); - } - setCallback('change'); - setAnimationsProgress(insTime); - } else { - if (instance.changeBegan) { - instance.changeCompleted = true; - instance.changeBegan = false; - setCallback('changeComplete'); - } - } - instance.currentTime = minMax(insTime, 0, insDuration); - if (instance.began) setCallback('update'); - if (engineTime >= insDuration) { - lastTime = 0; - countIteration(); - if (!instance.remaining) { - instance.paused = true; - if (!instance.completed) { - instance.completed = true; - setCallback('loopComplete'); - setCallback('complete'); - if (!instance.passThrough && 'Promise' in window) { - resolve(); - promise = makePromise(instance); - } - } - } else { - startTime = now; - setCallback('loopComplete'); - instance.loopBegan = false; - if (instance.direction === 'alternate') { - toggleInstanceDirection(); - } - } - } - } - - instance.reset = function() { - const direction = instance.direction; - instance.passThrough = false; - instance.currentTime = 0; - instance.progress = 0; - instance.paused = true; - instance.began = false; - instance.loopBegan = false; - instance.changeBegan = false; - instance.completed = false; - instance.changeCompleted = false; - instance.reversePlayback = false; - instance.reversed = direction === 'reverse'; - instance.remaining = instance.loop; - children = instance.children; - childrenLength = children.length; - for (let i = childrenLength; i--;) instance.children[i].reset(); - if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) instance.remaining++; - setAnimationsProgress(instance.reversed ? instance.duration : 0); - } - - // internal method (for engine) to adjust animation timings before restoring engine ticks (rAF) - instance._onDocumentVisibility = resetTime; - - // Set Value helper - - instance.set = function(targets, properties) { - setTargetsValue(targets, properties); - return instance; - } - - instance.tick = function(t) { - now = t; - if (!startTime) startTime = now; - setInstanceProgress((now + (lastTime - startTime)) * anime.speed); - } - - instance.seek = function(time) { - setInstanceProgress(adjustTime(time)); - } - - instance.pause = function() { - instance.paused = true; - resetTime(); - } - - instance.play = function() { - if (!instance.paused) return; - if (instance.completed) instance.reset(); - instance.paused = false; - activeInstances.push(instance); - resetTime(); - engine(); - } - - instance.reverse = function() { - toggleInstanceDirection(); - instance.completed = instance.reversed ? false : true; - resetTime(); - } - - instance.restart = function() { - instance.reset(); - instance.play(); - } - - instance.remove = function(targets) { - const targetsArray = parseTargets(targets); - removeTargetsFromInstance(targetsArray, instance); - } - - instance.reset(); - - if (instance.autoplay) instance.play(); - - return instance; - -} - -// Remove targets from animation - -function removeTargetsFromAnimations(targetsArray, animations) { - for (let a = animations.length; a--;) { - if (arrayContains(targetsArray, animations[a].animatable.target)) { - animations.splice(a, 1); - } - } -} - -function removeTargetsFromInstance(targetsArray, instance) { - const animations = instance.animations; - const children = instance.children; - removeTargetsFromAnimations(targetsArray, animations); - for (let c = children.length; c--;) { - const child = children[c]; - const childAnimations = child.animations; - removeTargetsFromAnimations(targetsArray, childAnimations); - if (!childAnimations.length && !child.children.length) children.splice(c, 1); - } - if (!animations.length && !children.length) instance.pause(); -} - -function removeTargetsFromActiveInstances(targets) { - const targetsArray = parseTargets(targets); - for (let i = activeInstances.length; i--;) { - const instance = activeInstances[i]; - removeTargetsFromInstance(targetsArray, instance); - } -} - -// Stagger helpers - -function stagger(val, params = {}) { - const direction = params.direction || 'normal'; - const easing = params.easing ? parseEasings(params.easing) : null; - const grid = params.grid; - const axis = params.axis; - let fromIndex = params.from || 0; - const fromFirst = fromIndex === 'first'; - const fromCenter = fromIndex === 'center'; - const fromLast = fromIndex === 'last'; - const isRange = is.arr(val); - const val1 = isRange ? parseFloat(val[0]) : parseFloat(val); - const val2 = isRange ? parseFloat(val[1]) : 0; - const unit = getUnit(isRange ? val[1] : val) || 0; - const start = params.start || 0 + (isRange ? val1 : 0); - let values = []; - let maxValue = 0; - return (el, i, t) => { - if (fromFirst) fromIndex = 0; - if (fromCenter) fromIndex = (t - 1) / 2; - if (fromLast) fromIndex = t - 1; - if (!values.length) { - for (let index = 0; index < t; index++) { - if (!grid) { - values.push(Math.abs(fromIndex - index)); - } else { - const fromX = !fromCenter ? fromIndex%grid[0] : (grid[0]-1)/2; - const fromY = !fromCenter ? Math.floor(fromIndex/grid[0]) : (grid[1]-1)/2; - const toX = index%grid[0]; - const toY = Math.floor(index/grid[0]); - const distanceX = fromX - toX; - const distanceY = fromY - toY; - let value = Math.sqrt(distanceX * distanceX + distanceY * distanceY); - if (axis === 'x') value = -distanceX; - if (axis === 'y') value = -distanceY; - values.push(value); - } - maxValue = Math.max(...values); - } - if (easing) values = values.map(val => easing(val / maxValue) * maxValue); - if (direction === 'reverse') values = values.map(val => axis ? (val < 0) ? val * -1 : -val : Math.abs(maxValue - val)); - } - const spacing = isRange ? (val2 - val1) / maxValue : val1; - return start + (spacing * (Math.round(values[i] * 100) / 100)) + unit; - } -} - -// Timeline - -function timeline(params = {}) { - let tl = anime(params); - tl.duration = 0; - tl.add = function(instanceParams, timelineOffset) { - const tlIndex = activeInstances.indexOf(tl); - const children = tl.children; - if (tlIndex > -1) activeInstances.splice(tlIndex, 1); - function passThrough(ins) { ins.passThrough = true; }; - for (let i = 0; i < children.length; i++) passThrough(children[i]); - let insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params)); - insParams.targets = insParams.targets || params.targets; - const tlDuration = tl.duration; - insParams.autoplay = false; - insParams.direction = tl.direction; - insParams.timelineOffset = is.und(timelineOffset) ? tlDuration : getRelativeValue(timelineOffset, tlDuration); - passThrough(tl); - tl.seek(insParams.timelineOffset); - const ins = anime(insParams); - passThrough(ins); - const totalDuration = ins.duration + insParams.timelineOffset; - children.push(ins); - const timings = getInstanceTimings(children, params); - tl.delay = timings.delay; - tl.endDelay = timings.endDelay; - tl.duration = timings.duration; - tl.seek(0); - tl.reset(); - if (tl.autoplay) tl.play(); - return tl; - } - return tl; -} - -anime.version = '3.2.1'; -anime.speed = 1; -// TODO:#review: naming, documentation -anime.suspendWhenDocumentHidden = true; -anime.running = activeInstances; -anime.remove = removeTargetsFromActiveInstances; -anime.get = getOriginalTargetValue; -anime.set = setTargetsValue; -anime.convertPx = convertPxToUnit; -anime.path = getPath; -anime.setDashoffset = setDashoffset; -anime.stagger = stagger; -anime.timeline = timeline; -anime.easing = parseEasings; -anime.penner = penner; -anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - -export default anime; diff --git a/js/main.js b/js/main.js index 048f91f..30a53f1 100644 --- a/js/main.js +++ b/js/main.js @@ -1,92 +1,23 @@ -// anime({ -// targets: '#main_title', -// top: ['240px', '100px'], -// opacity: ['0', '1'], -// easing: 'easeInOutQuad' -// }); -// -// anime({ -// targets: '#hand', -// top: ['0px', '100px'], -// easing: 'easeInOut' -// }); -// -// anime({ -// targets: '#cover h2', -// opacity: ['0.5', '1'], -// easing: 'easeInOut' -// }); -// anime({ -// targets: '#phone-watches-1', -// left: ['-5vw', '0vw'], -// top: ['50vh', '45vh'], -// easing: 'easeInOut' -// }); - -// Add timeline -let tl1 = anime.timeline({autoplay: false}); - -let s1a2 = { - targets: '#hand', - top: ['0px', '100px'], - easing: 'easeInOut' -}; - -// Add children -tl1.add(s1a2); - -let controller = new ScrollMagic.Controller(); - -//Add first scrollmagic scene -let scene1 = new ScrollMagic.Scene({ - triggerElement: "#cover", - triggerHook: 0.5, - reverse: false +/** + * gsap lib https://greensock.com/get-started-2#controllingYourAnimations + */ +let development_debug = true; +gsap.fromTo("#main_title", { + opacity: 0, + top: 200 +},{ + opacity:1, + top: 100, + duration: 1.5, + ease: "sine" }) - // Add debug indicators - .addIndicators({ - colorTrigger: "black", - colorStart: "blue", - colorEnd: "red", - indent: 10 - }) - - // Trigger animation timeline - .on("progress", function (event) { - tl1.seek(tl2.duration * event.progress); - }) - .addTo(controller); - - - - -//Add second scrollmagic scene -let scene2 = new ScrollMagic.Scene({ - triggerElement: "#two", - duration: 4500, - triggerHook: 0, -}) - - // Add debug indicators - .addIndicators({ - colorTrigger: "black", - colorStart: "blue", - colorEnd: "red", - indent: 10 - }) - - // Trigger animation timeline - //Use scroll position to play animation - .on("progress", function (event) { - console.log('tl2.duration', tl2.duration) - console.log('event.progress', event.progress) - tl2.seek(tl2.duration * event.progress); - }) - - .setPin('#two') - .addTo(controller); - - -let twoHeight = document.getElementById("two").clientHeight; -console.log('section two Height: ' + twoHeight); +gsap.to("#hand", { + top: 400, + duration: 1, + scrollTrigger: { + trigger: '#cover', + scrub: 1, + markers: development_debug, + } +}); diff --git a/js/vendor/ScrollMagic.min.js b/js/vendor/ScrollMagic.min.js deleted file mode 100644 index 003f0f9..0000000 --- a/js/vendor/ScrollMagic.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! ScrollMagic v2.0.8 | (c) 2020 Jan Paepke (@janpaepke) | license & info: http://scrollmagic.io */ -!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.ScrollMagic=t()}(this,function(){"use strict";function _(){}_.version="2.0.8","undefined"!=typeof window&&window.addEventListener("mousewheel",void 0);var P="data-scrollmagic-pin-spacer";_.Controller=function(e){function t(){var e,t,n;v&&u&&(e=R.type.Array(u)?u:f.slice(0),u=!1,t=d,0!=(n=(d=l.scrollPos())-t)&&(h=0t.scrollOffset()?1:-1}),t}return this.addScene=function(e){if(R.type.Array(e))e.forEach(function(e,t){l.addScene(e)});else if(e instanceof _.Scene)if(e.controller()!==l)e.addTo(l);else if(!~f.indexOf(e))for(var t in f.push(e),f=x(f),e.on("shift.controller_sort",function(){f=x(f)}),c.globalSceneOptions)e[t]&&e[t].call(e,c.globalSceneOptions[t]);return l},this.removeScene=function(e){var t;return R.type.Array(e)?e.forEach(function(e,t){l.removeScene(e)}):-1<(t=f.indexOf(e))&&(e.off("shift.controller_sort"),f.splice(t,1),e.remove()),l},this.updateScene=function(e,n){return R.type.Array(e)?e.forEach(function(e,t){l.updateScene(e,n)}):n?e.update(!0):!0!==u&&e instanceof _.Scene&&(~(u=u||[]).indexOf(e)||u.push(e),u=x(u),r()),l},this.update=function(e){return b({type:"resize"}),e&&t(),l},this.scrollTo=function(e,t){if(R.type.Number(e))S.call(c.container,e,t);else if(e instanceof _.Scene)e.controller()===l&&l.scrollTo(e.scrollOffset(),t);else if(R.type.Function(e))S=e;else{var n=R.get.elements(e)[0];if(n){for(;n.parentNode.hasAttribute(P);)n=n.parentNode;var r=c.vertical?"top":"left",o=R.get.offset(c.container),i=R.get.offset(n);p||(o[r]-=l.scrollPos()),l.scrollTo(i[r]-o[r],t)}}return l},this.scrollPos=function(e){return arguments.length?(R.type.Function(e)&&(w=e),l):w.call(l)},this.info=function(e){var t={size:g,vertical:c.vertical,scrollPos:d,scrollDirection:h,container:c.container,isDocument:p};return arguments.length?void 0!==t[e]?t[e]:void 0:t},this.loglevel=function(e){return l},this.enabled=function(e){return arguments.length?(v!=e&&(v=!!e,l.updateScene(f,!0)),l):v},this.destroy=function(e){window.clearTimeout(o);for(var t=f.length;t--;)f[t].destroy(e);return c.container.removeEventListener("resize",b),c.container.removeEventListener("scroll",b),R.cAF(n),null},function(){for(var e in c)a.hasOwnProperty(e)||delete c[e];if(c.container=R.get.elements(c.container)[0],!c.container)throw"ScrollMagic.Controller init failed.";(p=c.container===window||c.container===document.body||!document.body.contains(c.container))&&(c.container=window),g=y(),c.container.addEventListener("resize",b),c.container.addEventListener("scroll",b);var t=parseInt(c.refreshInterval,10);c.refreshInterval=R.type.Number(t)?t:a.refreshInterval,m()}(),l};var z={defaults:{container:window,vertical:!0,globalSceneOptions:{},loglevel:2,refreshInterval:100}};_.Controller.addOption=function(e,t){z.defaults[e]=t},_.Controller.extend=function(e){var t=this;_.Controller=function(){return t.apply(this,arguments),this.$super=R.extend({},this),e.apply(this,arguments)||this},R.extend(_.Controller,t),_.Controller.prototype=t.prototype,_.Controller.prototype.constructor=_.Controller},_.Scene=function(e){var n,l,c="BEFORE",f="DURING",u="AFTER",r=D.defaults,d=this,h=R.extend({},r,e),p=c,g=0,a={start:0,end:0},v=0,o=!0,s={};this.on=function(e,o){return R.type.Function(o)&&(e=e.trim().split(" ")).forEach(function(e){var t=e.split("."),n=t[0],r=t[1];"*"!=n&&(s[n]||(s[n]=[]),s[n].push({namespace:r||"",callback:o}))}),d},this.off=function(e,i){return e&&(e=e.trim().split(" ")).forEach(function(e,t){var n=e.split("."),r=n[0],o=n[1]||"";("*"===r?Object.keys(s):[r]).forEach(function(e){for(var t=s[e]||[],n=t.length;n--;){var r=t[n];!r||o!==r.namespace&&"*"!==o||i&&i!=r.callback||t.splice(n,1)}t.length||delete s[e]})}),d},this.trigger=function(e,n){var t,r,o,i;return e&&(t=e.trim().split("."),r=t[0],o=t[1],(i=s[r])&&i.forEach(function(e,t){o&&o!==e.namespace||e.callback.call(d,new _.Event(r,e.namespace,d,n))})),d},d.on("change.internal",function(e){"loglevel"!==e.what&&"tweenChanges"!==e.what&&("triggerElement"===e.what?y():"reverse"===e.what&&d.update())}).on("shift.internal",function(e){t(),d.update()}),this.addTo=function(e){return e instanceof _.Controller&&l!=e&&(l&&l.removeScene(d),l=e,E(),i(!0),y(!0),t(),l.info("container").addEventListener("resize",S),e.addScene(d),d.trigger("add",{controller:l}),d.update()),d},this.enabled=function(e){return arguments.length?(o!=e&&(o=!!e,d.update(!0)),d):o},this.remove=function(){var e;return l&&(l.info("container").removeEventListener("resize",S),e=l,l=void 0,e.removeScene(d),d.trigger("remove")),d},this.destroy=function(e){return d.trigger("destroy",{reset:e}),d.remove(),d.off("*.*"),null},this.update=function(e){var t,n;return l&&(e?l.enabled()&&o?(t=l.info("scrollPos"),n=0=a.start?1:0,d.trigger("update",{startPos:a.start,endPos:a.end,scrollPos:t}),d.progress(n)):m&&p===f&&T(!0):l.updateScene(d,!1)),d},this.refresh=function(){return i(),y(),d},this.progress=function(e){if(arguments.length){var t,n,r,o=!1,i=p,s=l?l.info("scrollDirection"):"PAUSED",a=h.reverse||g<=e;return 0===h.duration?(o=g!=e,p=0===(g=e<1&&a?0:1)?c:f):e<0&&p!==c&&a?(p=c,o=!(g=0)):0<=e&&e<1&&a?(g=e,p=f,o=!0):1<=e&&p!==u?(g=1,p=u,o=!0):p!==f||a||T(),o&&(t={progress:g,state:p,scrollDirection:s},r=function(e){d.trigger(e,t)},(n=p!=i)&&i!==f&&(r("enter"),r(i===c?"start":"end")),r("progress"),n&&p!==f&&(r(p===c?"start":"end"),r("leave"))),d}return g};var m,w,t=function(){a={start:v+h.offset},l&&h.triggerElement&&(a.start-=l.info("size")*h.triggerHook),a.end=a.start+h.duration},i=function(e){var t;!n||x(t="duration",n.call(d))&&!e&&(d.trigger("change",{what:t,newval:h[t]}),d.trigger("shift",{reason:t}))},y=function(e){var t=0,n=h.triggerElement;if(l&&(n||0-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return i.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),o=a(i.und(t[0])?1:t[0],.1,100),u=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,v=1,h=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(v*Math.cos(p*t)+h*Math.sin(p*t)):(v+h*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var o=t*(1/6)*1e3;return r.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.ceil(a(e,1e-6,1)*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((t(e,o)*n+r(e,o))*n+a(e))*n}function u(n,e,o){return 3*t(e,o)*n*n+2*r(e,o)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=u(e,t,r);if(0===i)return e;e-=(o(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var u,i,c=0;(u=o(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),v=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}},l["easeOutIn"+n]=function(n,t){return function(r){return r<.5?(1-e(n,t)(1-2*r))/2:(e(n,t)(2*r-1)+1)/2}}}),l);function h(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=v[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==u)e=t=r=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),t=s(l,f,o),r=s(l,f,o-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function D(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+t;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function B(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?D(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(!i.nil(I(n,e))||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&B(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?D(n,i,r):i}function A(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return B(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function N(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function S(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e?r+e:r}function L(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function j(n){for(var e,t=n.points,r=0,a=0;a0&&(r+=L(e,o)),e=o}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*I(o,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return L({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return j(n);case"polygon":return t=(e=n).points,j(e)+L(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,o}function H(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=r.getBoundingClientRect(),o=I(r,"viewBox"),u=a.width,c=a.height,s=t.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:u,h:c,vW:s[2],vH:s[3]}}function V(n,e,t){function r(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var a=H(n.el,n.svg),o=r(),u=r(-1),i=r(1),c=t?1:a.w/a.vW,s=t?1:a.h/a.vH;switch(n.property){case"x":return(o.x-a.x)*c;case"y":return(o.y-a.y)*s;case"angle":return 180*Math.atan2(i.y-u.y,i.x-u.x)/Math.PI}}function $(n,e){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=S(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function W(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function X(n){var e=W(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function Y(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function Z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a0?requestAnimationFrame(e):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){en.suspendWhenDocumentHidden&&(nn()?n=cancelAnimationFrame(n):(K.forEach(function(n){return n._onDocumentVisibility()}),U()))}),function(){n||nn()&&en.suspendWhenDocumentHidden||!(K.length>0)||(n=requestAnimationFrame(e))}}();function nn(){return!!document&&document.hidden}function en(t){void 0===t&&(t={});var r,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,v,h,g,y,b,M=(d=w(n,l=t),p=w(e,l),v=Z(p,l),h=X(l.targets),g=_(h,v),y=R(g,p),b=J,J++,k(d,{id:b,children:[],animatables:h,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/en.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e2||(b=Math.round(b*p)/p)),v.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O0&&(M.began=!0,D("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,D("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,D("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,D("loopComplete"),D("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(M.reversed?M.duration:0)},M._onDocumentVisibility=C,M.set=function(n,e){return z(n,e),M},M.tick=function(n){i=n,o||(o=i),B((i+(u-o))*en.speed)},M.seek=function(n){B(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,K.push(M),C(),U())},M.reverse=function(){x(),M.completed=!M.reversed,C()},M.restart=function(){M.reset(),M.play()},M.remove=function(n){rn(W(n),M)},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}function rn(n,e){var t=e.animations,r=e.children;tn(n,t);for(var a=r.length;a--;){var o=r[a],u=o.animations;tn(n,u),u.length||o.children.length||r.splice(a,1)}t.length||r.length||e.pause()}return en.version="3.2.1",en.speed=1,en.suspendWhenDocumentHidden=!0,en.running=K,en.remove=function(n){for(var e=W(n),t=K.length;t--;)rn(e,K[t])},en.get=A,en.set=z,en.convertPx=D,en.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:H(t),totalLength:q(t)*(r/100)}}},en.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},en.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?h(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,v=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var h=0;h-1&&K.splice(o,1);for(var s=0;s