+ 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
new file mode 100644
index 0000000..f5c34e8
--- /dev/null
+++ b/js/anime-master/documentation/assets/js/vendors/highlight.pack.js
@@ -0,0 +1,2 @@
+/*! 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?"/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
new file mode 100644
index 0000000..1407aba
--- /dev/null
+++ b/js/anime-master/documentation/assets/js/vendors/stats.min.js
@@ -0,0 +1,17 @@
+// 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
new file mode 100644
index 0000000..35c28f9
--- /dev/null
+++ b/js/anime-master/documentation/assets/js/website.js
@@ -0,0 +1,886 @@
+// 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
new file mode 100644
index 0000000..1e7d2e8
--- /dev/null
+++ b/js/anime-master/documentation/examples/DOM-stress-test.html
@@ -0,0 +1,72 @@
+
+
+
+ DOM stress test | anime.js
+ advanced staggering • anime.js
+ advanced staggering • anime.js
+ 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
new file mode 100644
index 0000000..40dfad7
--- /dev/null
+++ b/js/anime-master/documentation/examples/animejs-v2-logo-animation.html
@@ -0,0 +1,337 @@
+
+
+
+ Anime logo animation | anime.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Anime logo animation | anime.js
+ built-in easings • anime.js
+ 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
new file mode 100644
index 0000000..a216b88
--- /dev/null
+++ b/js/anime-master/documentation/examples/colors-test.html
@@ -0,0 +1,119 @@
+
+
+
+ Colors test | anime.js
+
+ HEX
+
+
#F47
+
#FF4477
+
#FF4477
+
#FF4477
+
#FF4477
+
#FF4477
+
+
+ RGB
+
+
rgb(255,68,119)
+
rgb(255,68,119)
+
rgb(255,68,119)
+
rgb(255,68,119)
+
rgb(255,68,119)
+
rgb(255,68,119)
+
rgba(255,68,119,.5)
+
rgba(255,68,119,.5)
+
+
+ HSL
+
+
hsl(344,100%,63%)
+
hsl(344,100%,63%)
+
hsl(344,100%,63%)
+
hsl(344,100%,63%)
+
hsl(344,100%,63%)
+
hsl(344,100%,63%)
+
hsla(344,100%,63%,.5)
+
hsla(344,100%,63%,.5)
+
+
+
+
diff --git a/js/anime-master/documentation/examples/complex-properties.html b/js/anime-master/documentation/examples/complex-properties.html
new file mode 100644
index 0000000..85821d3
--- /dev/null
+++ b/js/anime-master/documentation/examples/complex-properties.html
@@ -0,0 +1,187 @@
+
+
+
+ Complex properties | anime.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Diretions Testing | anime.js
+ Ease visualizer | anime.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ease In
+ Quad
+ Cubic
+ Quart
+ Quint
+ Sine
+ Expo
+ Circ
+ Back
+ Bounce
+ Elastic
+ Ease Out
+ Quad
+ Cubic
+ Quart
+ Quint
+ Sine
+ Expo
+ Circ
+ Back
+ Bounce
+ Elastic
+ Ease In Out
+ Quad
+ Cubic
+ Quart
+ Quint
+ Sine
+ Expo
+ Circ
+ Back
+ Bounce
+ Elastic
+ Steps
+ steps(2)
+ steps(5)
+ steps(10)
+ steps(20)
+
+
Follow scroll | anime.js
+
+
+
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
09
+
10
+
11
+
12
+
13
+
14
+
stagger | anime.js
+
+
+
+
+
+
diff --git a/js/anime-master/documentation/examples/layered-animations.html b/js/anime-master/documentation/examples/layered-animations.html
new file mode 100644
index 0000000..5816f73
--- /dev/null
+++ b/js/anime-master/documentation/examples/layered-animations.html
@@ -0,0 +1,155 @@
+
+
+
+ layered animations • anime.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
domaku | anime.js
+ 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
new file mode 100644
index 0000000..26e9d1e
--- /dev/null
+++ b/js/anime-master/documentation/examples/stagger-grid-demo.html
@@ -0,0 +1,130 @@
+
+
+
+ stagger | anime.js
+
+
+
+
+
diff --git a/js/anime-master/documentation/examples/stagger-tests.html b/js/anime-master/documentation/examples/stagger-tests.html
new file mode 100644
index 0000000..6549ba0
--- /dev/null
+++ b/js/anime-master/documentation/examples/stagger-tests.html
@@ -0,0 +1,440 @@
+
+
+
+ stagger | anime.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ From center reversed
+
+
+
+
+
+
+ From index reversed
+
+
+
+
+
+
+
+
+
+
+ Range from last reversed
+
+
+
+
+
+
+ Range from center reversed
+
+
+
+
+
+
+
+
+
+
+ Coordinates reversed
+
+
+
+
+ Coordinates reversed
+
+
+
+
+ Coordinates reversed
+
+
+
+
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
new file mode 100644
index 0000000..b3e77d6
--- /dev/null
+++ b/js/anime-master/documentation/examples/staggered-easing-demo.html
@@ -0,0 +1,126 @@
+
+
+
+ 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
new file mode 100644
index 0000000..e8399ca
--- /dev/null
+++ b/js/anime-master/documentation/examples/svg-lines-animations.html
@@ -0,0 +1,93 @@
+
+
+
+ SVG line drawing | anime.js
+
+
+
+
+
+
+
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
new file mode 100644
index 0000000..6c7df51
--- /dev/null
+++ b/js/anime-master/documentation/examples/svg-path-animation.html
@@ -0,0 +1,65 @@
+
+
+
+ SVG line drawing | anime.js
+ time control • anime.js
+
+
+
+ Time control & callbacks
+
+
+
+ Play, pause, control, reverse and trigger events in sync
+
+
+
+
+
+
+
+
loop begin
+
animation begin
+
+
+
+
+
+
loop begin
+
reverse
+
+
+
+
+
+
loop begin
+
reverse
+
+
+
+
+
animation complete
+
loop complete
+
+
+
+
+
+
+
diff --git a/js/anime-master/documentation/examples/timeline.html b/js/anime-master/documentation/examples/timeline.html
new file mode 100644
index 0000000..fd5d459
--- /dev/null
+++ b/js/anime-master/documentation/examples/timeline.html
@@ -0,0 +1,200 @@
+
+
+
+ Anime timeline | anime.js
+
+
+
+
+
+
diff --git a/js/anime-master/documentation/index.html b/js/anime-master/documentation/index.html
new file mode 100644
index 0000000..99e5233
--- /dev/null
+++ b/js/anime-master/documentation/index.html
@@ -0,0 +1,4182 @@
+
+
+
+ Documentation | anime.js
+
+
+
+
+
+
+
+
+
+
+
CSS Selector
+
+
Can be any CSS selector.
+
Pseudo elements can't be targeted using JavaScript.
+
+
+ Type
+ Default
+ Example
+
+
+ String
+ nulltargets: '.item'
+
+
+
+
+
+
+
DOM Node / NodeList
+
+
+ Can be any DOM Node or NodeList.
+
+
+
+ Type
+ Default
+ Example
+
+
+ DOM Node
+ nulltargets: el.querySelector('.item')
+
+ NodeList
+ nulltargets: el.querySelectorAll('.item')
+
+
+
+
+
+
JavaScript Object
+
+
+ A JavaScript Object with at least one property containing a numerical value.
+
+
+
+ Type
+ Default
+ Example
+
+
+ Object
+ nulltargets: myObjectProp
+
+
+
+
{"charged":"0%","cycles":120}
+
+
+
+
+
Array
+
+
+ An array containing multiple targets.
+
+
+ Accepts mixed types. E.g. ['.el', domNode, jsObject]
+
+
+
+ Type
+ Default
+ Example
+
+
+ Array
+ nulltargets: ['.item', el.getElementById('#thing')]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+ Example
+ value
+
+
+ opacity.5
+
+ left'100px'
+
+
+
+
+
+
Object properties
+
+
+ Any Object property containing a numerical value can be animated.values section.
+
+
+
+ Example
+ value
+
+
+ prop150
+
+ 'prop2''100%'
+
+
+
+
{"prop1":0,"prop2":"0%"}
+
+
+
+
DOM Attributes
+
+
+ Any DOM Attributes containing a numerical value can be animated.values section.
+
+
+
+ Example
+ value
+
+
+ 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.values section and SVG animation in the SVG section.
+
+
+
+ Example
+ value
+
+
+ points'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'
+
+ scale1
+
+ baseFrequency0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Duration
+
+
+ Defines the duration in milliseconds of the animation.
+
+
+
+ Type
+ Default
+ Example
+
+
+ Number
+ 10003000
+
+ anime.stagger
+ See staggering section
+ anime.stagger(150)
+
+ Function
+ See function based parameters section
+ (el, i) => i * 150
+
+
+
+
+
+
Delay
+
+
+ Defines the delay in milliseconds of the animation.
+
+
+
+ Type
+ Default
+ Example
+
+
+ Number
+ 01000
+
+ anime.stagger
+ See staggering section
+ anime.stagger(150)
+
+ Function
+ See function based parameters section
+ (el, i) => i * 150
+
+
+
+
+
+
end delay
+
+
+ Adds some extra time in milliseconds at the end of the animation.
+
+
+
+ Type
+ Default
+ Example
+
+
+ Number
+ 01000
+
+ anime.stagger
+ See staggering section
+ anime.stagger(150)
+
+ Function
+ See function based parameters section
+ (el, i) => i * 150
+
+
+
+
+
+
+
Easing
+
+
+ Defines the timing function of the animation.
+
+
+ Check out the easings section for a complete list of available easing and parameters.
+
+
+
+ Type
+ Default
+ Example
+
+
+ String
+ 'easeOutElastic(1, .5)'easing: 'easeInOutQuad'
+
+
+
+
+
+
+
Round
+
+
+ Rounds up the value to x decimals.
+
+
+
+ Type
+ Default
+ Example
+
+
+ Number
+ 0round: 10
+
+
+
+
+
+
Specific property parameters
+
+
+ Defines specific parameters to each property of the animation using an Object as value.
+
+
+ Type
+ Example
+
+
+ Object
+rotate: {
+ 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:
+
+
+
+ Arguments
+ Infos
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Direction
+
+
+ Defines the direction of the animation.
+
+
+
+ Accepts
+ Infos
+
+
+ '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%
+
+
+
+
+
+
+
+
Loop
+
+
+ Defines the number of iterations of your animation.
+
+
+
+ Accepts
+ Infos
+
+
+ NumberThe number of iterations
+
+
+ trueLoop indefinitely
+
+
+
+
+
+
+
+
alternate 3 times
+
+
+
+
+
+
inifinite reverse
+
+
+
+
+
inifinite alternate
+
+
+
+
+
+
+
Autoplay
+
+
+ Defines if the animation should automatically starts or not.
+
+
+
+ Accepts
+ Infos
+
+
+ trueAutomatically starts the animation
+
+
+ falseAnimation is paused by default
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Unitless
+
+
+ If the original value has a unit, it will be automatically added to the animated value.
+
+
+
+ Type
+ Example
+
+
+ Number
+ translateX: 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.from to values section.
+
+
+
+ Type
+ Example
+
+
+ String
+ width: '100%'
+
+
+
+
+
+
+
Relative
+
+
+ Adds, substracts or multiplies the original value.
+
+
+
+ Accepts
+ Effect
+ Example
+
+
+ '+='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.
+
+
+
+ Accepts
+ Example
+
+
+ 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)'
+
+
+
+
+
+
+
From To
+
+
+ Forces the animation to start at a specified value.
+
+
+
+ Type
+ Example
+
+
+ Array['50%', '100%']
+
+
+
+
+
+
+
Function based values
+
+
+ Get different values for every target and property of the animation.
+
+
+ The function accepts 3 arguments:
+
+
+
+ Arguments
+ Infos
+
+
+ targetThe curently animated targeted element
+
+
+ indexThe index of the animated targeted element
+
+
+ targetsLengthThe total number of animated targets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
+ Type
+ Example
+
+
+ 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.
+
+
+
+ Type
+ Example
+
+
+ Array[
+ {value: 100, easing: 'easeOutExpo'},
+ {value: 200, delay: 500},
+ {value: 300, duration: 1000}
+]
+
+
+
+
+
+
+
+
+
+
+
+
+
Staggering basics
+
+
+ Staggering allows you to animate multiple elements with follow through and overlapping action .
+
+
anime.stagger(value, options)
+
+
+ Arguments
+ Type
+ Info
+ Required
+
+
+ Value
+ Number, String, ArrayThe manipulated value(s)
+ Yes
+
+
+ Options
+ ObjectStagger parameters
+ No
+
+
+
+
+
+
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})
+
+
+ Types
+ Info
+
+
+ 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])
+
+
+
+
+
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})
+
+
+ Options
+ Type
+ Info
+
+
+ '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'})
+
+
+ Options
+ Info
+
+
+ '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'})
+
+
+
+
+
+
Grid
+
+
+ Staggering values based a 2D array that allow "ripple" effects.
+
+
anime.stagger(value, {grid: [rows, columns]})
+
+
+ Type
+ Info
+
+
+ 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'})
+
+
+ Parameters
+ Info
+
+
+ 'x'Follows the x axis
+
+
+ 'y'Follows the y axis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Timeline basics
+
+
+ Timelines let you synchronise multiple animations together.
+
+ Creating a timeline:
+
+
var myTimeline = anime.timeline(parameters);
+
+
+ Argument
+ Type
+ Info
+ Required
+
+
+ parametersObjectThe default parameters of the timeline inherited by children
+ No
+
+
+
+ Adding animations to a timeline:
+
+
myTimeline.add(parameters, offset);
+
+
+ Argument
+ Types
+ Info
+ Required
+
+
+ parametersObjectThe child animation parameters, override the timeline default parameters
+ Yes
+
+
+ time offsetString or NumberCheck out the Timeline offsets section
+ No
+
+
+
+
+
+
+
+
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.
+
+
+ Type
+ Offset
+ Example
+ Infos
+
+
+ String
+ '+=''+=200'Starts 200ms after the previous animation ends
+
+
+ String
+ '-=''-=200'Starts 200ms before the previous animation ends
+
+
+ Number
+ Number100Starts at 100ms, reagardless of the animtion position in the timeline
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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();
+
+
+
+
+
+
+ Play
+ 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);
+
+
+
+
+
+
+
+ Play
+ Pause
+ Restart
+
+
+
+
+
+
+
+
+
+
+
+
+
Update
+
+
+ Callback triggered on every frame as soon as the animation starts playing.
+
+
+
+ Type
+ Parameters
+ Info
+
+
+ Function
+ animation
+ Return 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.
+
+
+ Type
+ Parameters
+ Info
+
+
+ Function
+ animation
+ Return 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.
+
+
+ Type
+ Parameters
+ Info
+
+
+ Function
+ animation
+ Return the current animation Object
+
+
+
+
+
+
+
Change
+
+
+ Callback triggered on every frames in between the animation's delay and endDelay .
+
+
+
+ Type
+ Parameters
+ Info
+
+
+ Function
+ animation
+ Return 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.
+
+
+ Type
+ Parameters
+ Info
+
+
+ Function
+ animation
+ Return 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+ Parameters
+ Example
+ Info
+
+
+ '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.'dash-offset' value with anime.setDashoffset() in a from to formated value.
+
+
strokeDashoffset: [anime.setDashoffset, 0]
+
+ More info on line drawing animation here .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Linear
+
+
+ Does not apply any easing timing to your animation.
+
easing: 'linear'
+
+
+
+
+
+
Penner's functions
+
+
+ Built-in Robert Penner's easing functions .
+
+
+ See easings in action on easings.net .
+
+
easing: 'easeInOutSine'
+
+ Availabe easings :
+
+
+
+ in
+ out
+ in-out
+ out-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
+
+
+
+
+
+
Spring
+
+
+ Spring physics based easing.
+
+
easing: 'spring(mass, stiffness, damping, velocity)'
+
+ The duration of a spring animation is defined by the spring parameters.duration parameter will not be taken into account.
+
+
+
+ Parameter
+ Default
+ Min
+ Max
+
+
+ Mass
+ 10100
+
+ Stiffness
+ 1000100
+
+ Damping
+ 100100
+
+ Velocity
+ 00100
+
+
+
+
+
+
+
Elastic
+
+
Elastic easing.
+
easing: 'easeOutElastic(amplitude, period)'
+
+
+ in
+ out
+ in-out
+ out-in
+
+
+ 'easeInElastic''easeOutElastic''easeInOutElastic''easeOutInElastic'
+
+
+
+ Parameter
+ Default
+ Min
+ Max
+ Info
+
+
+ Amplitude
+ 1110Controls 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)'
+
+
+ Parameter
+ Default
+ Min
+ Max
+
+
+ Number of steps
+ 101∞
+
+
+
+
+
+
+
Custom easing function
+
+
+ A custom easing function must be returned by function based value .
+
+
easing: function() { return function(time) { return time * i} }
+
+
+ Parameter
+ Info
+
+
+ Time
+ Return the current time of the animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
remove
+
+
+ Removes targets from a running animation or timeline.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);
+
+
+
+
+
+
+ Remove second target
+
+
+
+
+
+
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');
+
+
+ Parameter
+ Type
+ Info
+
+
+ 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});
+
+
+ Parameters
+ Types
+ Info
+
+
+ target(s)
+ 'string', varAny valid targets can be used
+
+
+ values
+ objectAny 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.
+
+
+
+
+
+
+
+
+
=.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
new file mode 100644
index 0000000..af520bb
--- /dev/null
+++ b/js/anime-master/src/index.js
@@ -0,0 +1,1289 @@
+// 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 77e21c7..c487caa 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,13 +1,19 @@
-//Add first scrollmagic scene
-// init controller
-var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 100}});
-// build scenes
-var scene = new ScrollMagic.Scene({
- triggerElement: "#cover"
-})
- .setTween("#main_title", 0.5, {scale: 2.5}) // trigger a TweenMax.to tween
- .addIndicators({name: "1"}) // add indicators (requires plugin)
- .addTo(controller);
+anime({
+ targets: '#main_title',
+ top: ['240px','100px'],
+ opacity: ['0','1'],
+ easing: 'easeInOutQuad'
+});
-console.log('scene', scene)
+anime({
+ targets: '#hand',
+ backgroundPosition: ['50px','0px'],
+ opacity: ['0.5','1'],
+ easing: 'easeInOut'
+});
+anime({
+ targets: '#cover h2',
+ opacity: ['0.5','1'],
+ easing: 'easeInOut'
+});
diff --git a/js/vendor/anime.min.js b/js/vendor/anime.min.js
new file mode 100644
index 0000000..7696a5b
--- /dev/null
+++ b/js/vendor/anime.min.js
@@ -0,0 +1,8 @@
+/*
+ * 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 
+ 
+ 
+ 
+ 
+
+