├── .editorconfig ├── .gitignore ├── .jscsrc ├── .jshintrc ├── .nvmrc ├── LICENSE ├── README.md ├── bowe.json ├── dist └── animatelo.min.js ├── gulpfile.js ├── notes.md ├── package-lock.json ├── package.json ├── src ├── animatelo.js ├── attentionSeekers │ ├── bounce.js │ ├── done │ │ ├── bounce.json │ │ ├── flash.json │ │ ├── headShake.json │ │ ├── jello.json │ │ ├── pulse.json │ │ ├── rubberBand.json │ │ ├── shake.json │ │ ├── swing.json │ │ ├── tada.json │ │ └── wobble.json │ ├── flash.js │ ├── headShake.js │ ├── jello.js │ ├── pulse.js │ ├── rubberBand.js │ ├── shake.js │ ├── swing.js │ ├── tada.js │ └── wobble.js ├── bouncingEntrances │ ├── bounceIn.js │ ├── bounceInDown.js │ ├── bounceInLeft.js │ ├── bounceInRight.js │ ├── bounceInUp.js │ └── done │ │ ├── bounceIn.json │ │ ├── bounceInDown.json │ │ ├── bounceInLeft.json │ │ ├── bounceInRight.json │ │ └── bounceInUp.json ├── bouncingExits │ ├── bounceOut.js │ ├── bounceOutDown.js │ ├── bounceOutLeft.js │ ├── bounceOutRight.js │ ├── bounceOutUp.js │ └── done │ │ ├── bounceOut.json │ │ ├── bounceOutDown.json │ │ ├── bounceOutLeft.json │ │ ├── bounceOutRight.json │ │ └── bounceOutUp.json ├── fadingEntrances │ ├── done │ │ ├── fadeIn.json │ │ ├── fadeInDown.json │ │ ├── fadeInDownBig.json │ │ ├── fadeInLeft.json │ │ ├── fadeInLeftBig.json │ │ ├── fadeInRight.json │ │ ├── fadeInRightBig.json │ │ ├── fadeInUp.json │ │ └── fadeInUpBig.json │ ├── fadeIn.js │ ├── fadeInDown.js │ ├── fadeInDownBig.js │ ├── fadeInLeft.js │ ├── fadeInLeftBig.js │ ├── fadeInRight.js │ ├── fadeInRightBig.js │ ├── fadeInUp.js │ └── fadeInUpBig.js ├── fadingExits │ ├── done │ │ ├── fadeOut.json │ │ ├── fadeOutDown.json │ │ ├── fadeOutDownBig.json │ │ ├── fadeOutLeft.json │ │ ├── fadeOutLeftBig.json │ │ ├── fadeOutRight.json │ │ ├── fadeOutRightBig.json │ │ ├── fadeOutUp.json │ │ └── fadeOutUpBig.json │ ├── fadeOut.js │ ├── fadeOutDown.js │ ├── fadeOutDownBig.js │ ├── fadeOutLeft.js │ ├── fadeOutLeftBig.js │ ├── fadeOutRight.js │ ├── fadeOutRightBig.js │ ├── fadeOutUp.js │ └── fadeOutUpBig.js ├── flippers │ ├── done │ │ ├── flip.json │ │ ├── flipInX.json │ │ ├── flipInY.json │ │ ├── flipOutX.json │ │ └── flipOutY.json │ ├── flip.js │ ├── flipInX.js │ ├── flipInY.js │ ├── flipOutX.js │ └── flipOutY.js ├── lightspeed │ ├── done │ │ ├── lightSpeedIn.json │ │ └── lightSpeedOut.json │ ├── lightSpeedIn.js │ └── lightSpeedOut.js ├── rotatingEntrances │ ├── done │ │ ├── rotateIn.json │ │ ├── rotateInDownLeft.json │ │ ├── rotateInDownRight.json │ │ ├── rotateInUpLeft.json │ │ └── rotateInUpRight.json │ ├── rotateIn.js │ ├── rotateInDownLeft.js │ ├── rotateInDownRight.js │ ├── rotateInUpLeft.js │ └── rotateInUpRight.js ├── rotatingExits │ ├── done │ │ ├── rotateOut.json │ │ ├── rotateOutDownLeft.json │ │ ├── rotateOutDownRight.json │ │ ├── rotateOutUpLeft.json │ │ └── rotateOutUpRight.json │ ├── rotateOut.js │ ├── rotateOutDownLeft.js │ ├── rotateOutDownRight.js │ ├── rotateOutUpLeft.js │ └── rotateOutUpRight.js ├── slidingEntrances │ ├── done │ │ ├── slideInDown.json │ │ ├── slideInLeft.json │ │ ├── slideInRight.json │ │ └── slideInUp.json │ ├── slideInDown.js │ ├── slideInLeft.js │ ├── slideInRight.js │ └── slideInUp.js ├── slidingExits │ ├── done │ │ ├── slideOutDown.json │ │ ├── slideOutLeft.json │ │ ├── slideOutRight.json │ │ └── slideOutUp.json │ ├── slideOutDown.js │ ├── slideOutLeft.js │ ├── slideOutRight.js │ └── slideOutUp.js ├── specials │ ├── done │ │ ├── hinge.json │ │ ├── rollIn.json │ │ └── rollOut.json │ ├── hinge.js │ ├── jackInTheBox.js │ ├── jackInTheBox.json │ ├── rollIn.js │ └── rollOut.js ├── zoomingEntrances │ ├── done │ │ ├── zoomIn.json │ │ ├── zoomInDown.json │ │ ├── zoomInLeft.json │ │ ├── zoomInRight.json │ │ └── zoomInUp.json │ ├── zoomIn.js │ ├── zoomInDown.js │ ├── zoomInLeft.js │ ├── zoomInRight.js │ └── zoomInUp.js └── zoomingExits │ ├── done │ ├── zoomOut.json │ ├── zoomOutDown.json │ ├── zoomOutLeft.json │ ├── zoomOutRight.json │ └── zoomOutUp.json │ ├── zoomOut.js │ ├── zoomOutDown.js │ ├── zoomOutLeft.js │ ├── zoomOutRight.js │ └── zoomOutUp.js ├── test ├── comparison.css ├── comparison.html ├── comparison.js ├── test.css ├── test.html └── test.js └── usage.md /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | [*] 4 | 5 | indent_style = space 6 | indent_size = 4 7 | 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node 3 | 4 | ### VisualStudioCode ### 5 | .vscode/* 6 | !.vscode/settings.json 7 | !.vscode/tasks.json 8 | !.vscode/launch.json 9 | !.vscode/extensions.json 10 | 11 | ### Node ### 12 | # Logs 13 | logs 14 | *.log 15 | npm-debug.log* 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | 29 | # nyc test coverage 30 | .nyc_output 31 | 32 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 33 | .grunt 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (http://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules 43 | jspm_packages 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "requireCurlyBraces": [ 3 | "if", 4 | "else", 5 | "for", 6 | "while", 7 | "do", 8 | "try", 9 | "catch" 10 | ], 11 | "requireSpaceAfterKeywords": [ 12 | "if", 13 | "else", 14 | "for", 15 | "while", 16 | "do", 17 | "switch", 18 | "return", 19 | "try", 20 | "catch" 21 | ], 22 | "disallowTrailingComma": true, 23 | "requireOperatorBeforeLineBreak": true, 24 | "requireParenthesesAroundIIFE": true, 25 | "requireMultipleVarDecl": true, 26 | "requireCommaBeforeLineBreak": true, 27 | "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties", 28 | "requireDotNotation": true, 29 | "maximumLineLength": 120, 30 | "validateQuoteMarks": true, 31 | "disallowMixedSpacesAndTabs": true, 32 | "disallowTrailingWhitespace": true, 33 | "disallowMultipleLineStrings": true, 34 | "requireSpaceBeforeBlockStatements": true, 35 | "requireSpacesInFunctionExpression": { 36 | "beforeOpeningCurlyBrace": true 37 | }, 38 | "requireSpacesInsideObjectBrackets": "allButNested", 39 | "requireSpacesInConditionalExpression": true, 40 | "requireSpaceAfterBinaryOperators": true, 41 | "requireLineFeedAtFileEnd": true, 42 | "requireSpaceBeforeBinaryOperators": true, 43 | "requireSpacesInAnonymousFunctionExpression": { 44 | "beforeOpeningCurlyBrace": true 45 | }, 46 | "disallowKeywords": [ "with" ], 47 | "disallowKeywordsOnNewLine": [ "else" ], 48 | "disallowSpaceAfterObjectKeys": true, 49 | "disallowSpaceAfterPrefixUnaryOperators": true, 50 | "disallowSpaceBeforePostfixUnaryOperators": true, 51 | "disallowMultipleLineBreaks": true 52 | } 53 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | // JSHint Default Configuration File (as on JSHint website) 3 | // See http://jshint.com/docs/ for more details 4 | 5 | "maxerr": 500, // {int} Maximum error before stopping 6 | 7 | // Enforcing 8 | "bitwise": true, // true: Prohibit bitwise operators (&, |, ^, etc.) 9 | "camelcase": false, // true: Identifiers must be in camelCase 10 | "curly": false, // true: Require {} for every new block or scope 11 | "eqeqeq": true, // true: Require triple equals (===) for comparison 12 | "forin": true, // true: Require filtering for..in loops with obj.hasOwnProperty() 13 | "immed": false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` 14 | "indent": 4, // {int} Number of spaces to use for indentation. 15 | // It no longer provides warnings about indentation levels. 16 | // You can still use it to set your tab-width but it will be used only for character locations in other warnings. 17 | "latedef": false, // true: Require variables/functions to be defined before being used 18 | "newcap": false, // true: Require capitalization of all constructor functions e.g. `new F()` 19 | "noarg": true, // true: Prohibit use of `arguments.caller` and `arguments.callee` 20 | "noempty": true, // true: Prohibit use of empty blocks 21 | "nonew": false, // true: Prohibit use of constructors for side-effects (without assignment) 22 | "plusplus": false, // true: Prohibit use of `++` & `--` 23 | "quotmark": false, // Quotation mark consistency: 24 | // false : do nothing (default) 25 | // true : ensure whatever is used is consistent 26 | // "single" : require single quotes 27 | // "double" : require double quotes 28 | "undef": true, // true: Require all non-global variables to be declared (prevents global leaks) 29 | "unused": true, // true: Require all defined variables be used 30 | "strict": true, // true: Requires all functions run in ES5 Strict Mode 31 | "maxparams": false, // {int} Max number of formal params allowed per function 32 | "maxdepth": 5, // {int} Max depth of nested blocks (within functions) 33 | "maxstatements": false, // {int} Max number statements per function 34 | "maxcomplexity": 8, // {int} Max cyclomatic complexity per function 35 | "maxlen": false, // {int} Max number of characters per line 36 | 37 | // Relaxing 38 | "asi": false, // true: Tolerate Automatic Semicolon Insertion (no semicolons) 39 | "boss": false, // true: Tolerate assignments where comparisons would be expected 40 | "debug": true, // true: Allow debugger statements e.g. browser breakpoints. 41 | "eqnull": false, // true: Tolerate use of `== null` 42 | "esnext": false, // true: Allow ES.next (ES6) syntax (ex: `const`) 43 | "moz": false, // true: Allow Mozilla specific syntax (extends and overrides esnext features) 44 | // (ex: `for each`, multiple try/catch, function expression…) 45 | "evil": false, // true: Tolerate use of `eval` and `new Function()` 46 | "expr": true, // true: Tolerate `ExpressionStatement` as Programs 47 | "funcscope": false, // true: Tolerate defining variables inside control statements" 48 | "globalstrict": false, // true: Allow global "use strict" (also enables 'strict') 49 | "iterator": false, // true: Tolerate using the `__iterator__` property 50 | "lastsemic": false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block 51 | "laxbreak": true, // true: Tolerate possibly unsafe line breakings 52 | "laxcomma": true, // true: Tolerate comma-first style coding 53 | "loopfunc": false, // true: Tolerate functions being defined in loops 54 | "multistr": false, // true: Tolerate multi-line strings 55 | "proto": false, // true: Tolerate using the `__proto__` property 56 | "scripturl": false, // true: Tolerate script-targeted URLs 57 | "shadow": false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;` 58 | "sub": false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation 59 | "supernew": false, // true: Tolerate `new function () { ... };` and `new Object;` 60 | "validthis": false, // true: Tolerate using this in a non-constructor function 61 | 62 | // Environments 63 | "browser": true, // Web Browser (window, document, etc) 64 | "couch": false, // CouchDB 65 | "devel": true, // Development/debugging (alert, confirm, etc) 66 | "dojo": false, // Dojo Toolkit 67 | "jquery": true, // jQuery 68 | "mootools": false, // MooTools 69 | "node": false, // Node.js 70 | "nonstandard": false, // Widely adopted globals (escape, unescape, etc) 71 | "prototypejs": false, // Prototype and Scriptaculous 72 | "rhino": false, // Rhino 73 | "worker": false, // Web Workers 74 | "wsh": false, // Windows Scripting Host 75 | "yui": false, // Yahoo User Interface 76 | 77 | // Custom Globals 78 | "globals": { 79 | "console": false, 80 | "define": false, 81 | "require": false, 82 | "dojo": false, 83 | "dojoConfig": false 84 | } // additional predefined global variables 85 | } 86 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18.9.0 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Simone Poggiali 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animatelo 2 | [![CDNJS version](https://img.shields.io/cdnjs/v/animatelo.svg)](https://cdnjs.com/libraries/animatelo) 3 | 4 | *Just-add-water Web Animations* 5 | 6 | Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. 7 | 8 | This is a porting to Web Animation API of the fabulous [animate.css](//github.com/daneden/animate.css) project. 9 | 10 | [Check out all the animations here!](//gibbok.github.io/animatelo) 11 | 12 | # What is Web Animations API? 13 | Web Animations API is a new JavaScript API for driving animated content on the web. 14 | 15 | Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers. 16 | 17 | With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. 18 | 19 | With the Web Animations API, we no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction. 20 | 21 | # Browser Support 22 | Web Animations API features is available by default in Firefox 48+ and Chrome 36+. 23 | For other browsers there’s a [handy maintained polyfill](//github.com/web-animations/web-animations-js) that tests for feature support and adds it where necessary. 24 | 25 | The polyfill and Animatelo are supported on modern versions of all major browsers, including: 26 | - Chrome 27 | - Firefox 27+ 28 | - IE10+ (including Edge) 29 | - Safari (iOS) 7.1+ 30 | - Safari (Mac) 9+ 31 | 32 | # Installation 33 | 34 | To install via Bower, simply do the following: 35 | 36 | ```bash 37 | $ bower install animatelo --save 38 | ``` 39 | or you can install via npm: 40 | 41 | ```bash 42 | $ npm install animatelo --save 43 | ``` 44 | 45 | # Basic Usage 46 | Here's a simple example of an animation that flip a text in a `

`. 47 | [Try it as a live demo.](//codepen.io/gibbok/pen/pRJXQq) 48 | 49 | ```html 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |

Hello world!

58 | 59 | 60 | 63 | ``` 64 | 65 | # Advanced Usage Documentation 66 | More information and technical documentation on Animatelo can be found at [Usage](./usage.md) page. 67 | 68 | # License 69 | Animatelo is licensed under the [MIT license](//opensource.org/licenses/MIT). 70 | -------------------------------------------------------------------------------- /bowe.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animatelo", 3 | "description": "Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.", 4 | "main": "index.js", 5 | "moduleType": [ 6 | "globals" 7 | ], 8 | "keywords": [ 9 | "web animations api", 10 | "web animations", 11 | "animation", 12 | "animations", 13 | "animate", 14 | "animatelo", 15 | "animatelo.js", 16 | "animate.css", 17 | "css", 18 | "css3" 19 | ], 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/gibbok/animatelo.git" 23 | }, 24 | "dependencies": {}, 25 | "author": "GibboK", 26 | "license": "MIT", 27 | "devDependencies": { 28 | "connect": "^3.5.0", 29 | "open": "^0.0.5", 30 | "jshint":"^2.9.4", 31 | "jshint-stylish": "^2.2.1", 32 | "jscs": "^3.0.7", 33 | "gulp": "^3.9.1", 34 | "gulp-connect": "^5.0.0", 35 | "gulp-jscs": "^4.0.0", 36 | "gulp-jshint": "^2.0.4", 37 | "gulp-jscs-stylish": "^1.4.0", 38 | "gulp-uglify": "^2.0.0", 39 | "pump": "^1.0.2", 40 | "gulp-concat": "^2.6.1" 41 | } 42 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const connect = require('gulp-connect'); 3 | const open = require('open'); 4 | const jscs = require('gulp-jscs'); 5 | const jshint = require('gulp-jshint'); 6 | const stylish = require('gulp-jscs-stylish'); 7 | const uglify = require('gulp-uglify'); 8 | const pump = require('pump'); 9 | const concat = require('gulp-concat'); 10 | 11 | gulp.task('connect', function () { 12 | // runs connect server 13 | connect.server({ 14 | root: "" 15 | }); 16 | }); 17 | 18 | gulp.task('open', function () { 19 | // open browser 20 | var uri = 'http://localhost:8080/test/test.html'; 21 | open(uri); 22 | }); 23 | 24 | gulp.task('checkcode', function () { 25 | // validate source code using jscs and jshint 26 | gulp.src('.') 27 | .pipe(jshint()) 28 | .pipe(jscs()) 29 | .on('error', function () { }) 30 | .pipe(stylish.combineWithHintResults()) 31 | .pipe(jshint.reporter('jshint-stylish')); 32 | }); 33 | 34 | gulp.task('build', function (cb) { 35 | pump([ 36 | gulp.src('./src/**/*.js'), 37 | concat('animatelo.min.js'), 38 | uglify({ 39 | preserveComments: 'license' 40 | }), 41 | gulp.dest('dist') 42 | ], 43 | cb 44 | ); 45 | }); -------------------------------------------------------------------------------- /notes.md: -------------------------------------------------------------------------------- 1 | # Notes 2 | 3 | ## Animation control 4 | 5 | - duration: 3s; 6 | - delay: 2s; 7 | - iteration-count: infinite; 8 | 9 | ## Easy to use API 10 | 11 | Example: 12 | 13 | ```javascript 14 | var player = animate('#text').flash({ 15 | duration: 3000, 16 | delay: 2000, 17 | iteratioCount: 2 18 | }); 19 | ``` 20 | 21 | As selector it support `Document.querySelector()`. 22 | 23 | 24 | ## Support old browser 25 | 26 | Using a polify. 27 | 28 | ## Interesting 29 | 30 | https://www.npmjs.com/package/css-tree 31 | 32 | https://en.wikipedia.org/wiki/Abstract_syntax_tree 33 | 34 | http://iamdustan.com/reworkcss_ast_explorer/ 35 | 36 | https://astexplorer.net/ 37 | 38 | https://github.com/reworkcss/css 39 | 40 | ## Specs 41 | 42 | https://w3c.github.io/web-animations/#dom-animatable-animate 43 | 44 | https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#Parameters 45 | 46 | https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats 47 | 48 | CSS keyframes to Objects keyframes 49 | CSS keyframes parser -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animatelo", 3 | "version": "1.0.3", 4 | "description": "Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.", 5 | "main": "./dist/animatelo.min.js", 6 | "src": "./src/animatelo.js", 7 | "keywords": [ 8 | "web animations api", 9 | "web animations", 10 | "animation", 11 | "animations", 12 | "animate", 13 | "animatelo", 14 | "animatelo.js", 15 | "animate.css", 16 | "css", 17 | "css3" 18 | ], 19 | "scripts": { 20 | "test": "echo \"Error: no test specified\" && exit 1" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/gibbok/animatelo.git" 25 | }, 26 | "dependencies": { 27 | }, 28 | "author": "GibboK", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/gibbok/animatelo/issues" 32 | }, 33 | "homepage": "https://github.com/gibbok/animatelo#readme", 34 | "devDependencies": { 35 | "connect": "^3.5.0", 36 | "open": "^0.0.5", 37 | "jshint":"^2.9.4", 38 | "jshint-stylish": "^2.2.1", 39 | "jscs": "^3.0.7", 40 | "gulp": "^3.9.1", 41 | "gulp-connect": "^5.0.0", 42 | "gulp-jscs": "^4.0.0", 43 | "gulp-jshint": "^2.0.4", 44 | "gulp-jscs-stylish": "^1.4.0", 45 | "gulp-uglify": "^2.0.0", 46 | "pump": "^1.0.2", 47 | "gulp-concat": "^2.6.1" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/animatelo.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.version = '1.0.3'; 5 | 6 | var _defaultOptions = { 7 | duration: 1000, 8 | delay: 0, 9 | iterations: 1, 10 | direction: 'normal', 11 | fill: 'both' 12 | }, 13 | _UUID = function () { 14 | var d = new Date().getTime(), 15 | uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 16 | var r = (d + Math.random() * 16) % 16 | 0; 17 | d = Math.floor(d / 16); 18 | return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); 19 | }); 20 | return uuid; 21 | }, 22 | _select = function (selector) { 23 | var nodeList, 24 | isNodeList = selector instanceof NodeList, 25 | isNode = selector instanceof Node, 26 | isHTMLCollection = selector instanceof HTMLCollection, 27 | isString = typeof selector === 'string'; 28 | if (isNodeList) { 29 | nodeList = selector; 30 | } else if (isNode) { 31 | nodeList = [selector]; 32 | } else if(isHTMLCollection){ 33 | nodeList = selector; 34 | } else if (isString) { 35 | nodeList = document.querySelectorAll(selector) 36 | } else { 37 | throw 'selector is invaid'; 38 | } 39 | return nodeList; 40 | }, 41 | _validate = function (options) { 42 | var directionValid = [ 43 | 'normal', 44 | 'reverse', 45 | 'alternate', 46 | 'alternate-reverse', 47 | 'initial' 48 | ], 49 | fillValid = [ 50 | 'none', 51 | 'forwards', 52 | 'backwards', 53 | 'both', 54 | 'initial' 55 | ]; 56 | if (typeof options.duration !== 'number') { 57 | throw 'parameter duration is invalid'; 58 | } 59 | if (typeof options.delay !== 'number') { 60 | throw 'parameter delay is invalid'; 61 | } 62 | if (typeof options.iterations !== 'number') { 63 | throw 'parameter iterations is invalid'; 64 | } 65 | 66 | if (typeof options.direction !== 'string' || 67 | directionValid.indexOf(options.direction) === -1) { 68 | throw 'parameter direction is invalid'; 69 | } 70 | if (typeof options.fill !== 'string' || 71 | directionValid.indexOf(options.direction) === -1) { 72 | throw 'parameter fill is invalid'; 73 | } 74 | }; 75 | 76 | animatelo._animate = function (selector, keyframes, optionsArg) { 77 | var options = { 78 | duration: optionsArg && 'duration' in optionsArg ? optionsArg.duration : _defaultOptions.duration, 79 | delay: optionsArg && 'delay' in optionsArg ? optionsArg.delay : _defaultOptions.delay, 80 | iterations: optionsArg && 'iterations' in optionsArg ? optionsArg.iterations : _defaultOptions.iterations, 81 | direction: optionsArg && 'direction' in optionsArg ? optionsArg.direction : _defaultOptions.direction, 82 | fill: optionsArg && 'fill' in optionsArg ? optionsArg.fill : _defaultOptions.fill, 83 | id: optionsArg && 'id' in optionsArg ? optionsArg.id : _UUID() 84 | }, 85 | hasUserId = optionsArg && 'id' in optionsArg ? true : false, 86 | nodeList = _select(selector), 87 | players = [], 88 | nodeListArr = [].slice.call(nodeList); 89 | _validate(options); 90 | nodeListArr.forEach(function (node, index) { 91 | var player = node.animate(keyframes, options); 92 | if (hasUserId) { 93 | player.id = options.id + '-' + index; 94 | } else { 95 | player.id = _UUID(); 96 | } 97 | players.push(player); 98 | }); 99 | return players; 100 | }; 101 | 102 | })(window.animatelo = window.animatelo || {}); 103 | -------------------------------------------------------------------------------- /src/attentionSeekers/bounce.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounce = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "translate3d(0,0,0)", 8 | "offset": "0", 9 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 10 | }, 11 | { 12 | "transform": "translate3d(0,0,0)", 13 | "offset": "0.2", 14 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 15 | }, 16 | { 17 | "transform": "translate3d(0, -30px, 0)", 18 | "offset": "0.4", 19 | "easing": "cubic-bezier(0.755, 0.050, 0.855, 0.060)" 20 | }, 21 | { 22 | "transform": "translate3d(0, -30px, 0)", 23 | "offset": "0.43", 24 | "easing": "cubic-bezier(0.755, 0.050, 0.855, 0.060)" 25 | }, 26 | { 27 | "transform": "translate3d(0,0,0)", 28 | "offset": "0.53", 29 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 30 | }, 31 | { 32 | "transform": "translate3d(0, -15px, 0)", 33 | "offset": "0.7", 34 | "easing": "cubic-bezier(0.755, 0.050, 0.855, 0.060)" 35 | }, 36 | { 37 | "transform": "translate3d(0,0,0)", 38 | "offset": "0.8", 39 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 40 | }, 41 | { 42 | "transform": "translate3d(0,-4px,0)", 43 | "offset": "0.9", 44 | "easing": "ease" 45 | }, 46 | { 47 | "transform": "translate3d(0,0,0)", 48 | "offset": "1", 49 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 50 | } 51 | ]; 52 | return animatelo._animate(selector, keyframeset, options); 53 | } 54 | })(window.animatelo = window.animatelo || {}); 55 | -------------------------------------------------------------------------------- /src/attentionSeekers/done/bounce.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounce": [ 3 | { 4 | "transform": "translate3d(0,0,0)", 5 | "offset": "0", 6 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 7 | }, 8 | { 9 | "transform": "translate3d(0,0,0)", 10 | "offset": "0.2", 11 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 12 | }, 13 | { 14 | "transform": "translate3d(0, -30px, 0)", 15 | "offset": "0.4", 16 | "easing": "cubic-bezier(0.755, 0.050, 0.855, 0.060)" 17 | }, 18 | { 19 | "transform": "translate3d(0, -30px, 0)", 20 | "offset": "0.43", 21 | "easing": "cubic-bezier(0.755, 0.050, 0.855, 0.060)" 22 | }, 23 | { 24 | "transform": "translate3d(0,0,0)", 25 | "offset": "0.53", 26 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 27 | }, 28 | { 29 | "transform": "translate3d(0, -15px, 0)", 30 | "offset": "0.7", 31 | "easing": "cubic-bezier(0.755, 0.050, 0.855, 0.060)" 32 | }, 33 | { 34 | "transform": "translate3d(0,0,0)", 35 | "offset": "0.8", 36 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 37 | }, 38 | { 39 | "transform": "translate3d(0,-4px,0)", 40 | "offset": "0.9", 41 | "easing": "ease" 42 | }, 43 | { 44 | "transform": "translate3d(0,0,0)", 45 | "offset": "1", 46 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 47 | } 48 | ] 49 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/flash.json: -------------------------------------------------------------------------------- 1 | { 2 | "flash": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "offset": "0.25", 11 | "easing": "ease" 12 | }, 13 | { 14 | "opacity": "1", 15 | "offset": "0.5", 16 | "easing": "ease" 17 | }, 18 | { 19 | "opacity": "0", 20 | "offset": "0.75", 21 | "easing": "ease" 22 | }, 23 | { 24 | "opacity": "1", 25 | "offset": "1", 26 | "easing": "ease" 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/headShake.json: -------------------------------------------------------------------------------- 1 | { 2 | "headShake": [ 3 | { 4 | "transform": "translateX(0)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "translateX(-6px) rotateY(-9deg)", 10 | "offset": "0.065", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "translateX(5px) rotateY(7deg)", 15 | "offset": "0.185", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "translateX(-3px) rotateY(-5deg)", 20 | "offset": "0.315", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "translateX(2px) rotateY(3deg)", 25 | "offset": "0.435", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "translateX(0)", 30 | "offset": "0.5", 31 | "easing": "ease" 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/jello.json: -------------------------------------------------------------------------------- 1 | { 2 | "jello": [ 3 | { 4 | "transform": "none", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "none", 10 | "offset": "0.111", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "skewX(-12.5deg) skewY(-12.5deg)", 15 | "offset": "0.222", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "skewX(6.25deg) skewY(6.25deg)", 20 | "offset": "0.33299999999999996", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "skewX(-3.125deg) skewY(-3.125deg)", 25 | "offset": "0.444", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "skewX(1.5625deg) skewY(1.5625deg)", 30 | "offset": "0.555", 31 | "easing": "ease" 32 | }, 33 | { 34 | "transform": "skewX(-0.78125deg) skewY(-0.78125deg)", 35 | "offset": "0.6659999999999999", 36 | "easing": "ease" 37 | }, 38 | { 39 | "transform": "skewX(0.390625deg) skewY(0.390625deg)", 40 | "offset": "0.777", 41 | "easing": "ease" 42 | }, 43 | { 44 | "transform": "skewX(-0.1953125deg) skewY(-0.1953125deg)", 45 | "offset": "0.888", 46 | "easing": "ease" 47 | }, 48 | { 49 | "transform": "none", 50 | "offset": "1", 51 | "easing": "ease" 52 | } 53 | ] 54 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/pulse.json: -------------------------------------------------------------------------------- 1 | { 2 | "pulse": [ 3 | { 4 | "transform": "scale3d(1, 1, 1)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "scale3d(1.05, 1.05, 1.05)", 10 | "offset": "0.5", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "scale3d(1, 1, 1)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/rubberBand.json: -------------------------------------------------------------------------------- 1 | { 2 | "rubberBand": [ 3 | { 4 | "transform": "scale3d(1, 1, 1)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "scale3d(1.25, 0.75, 1)", 10 | "offset": "0.3", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "scale3d(0.75, 1.25, 1)", 15 | "offset": "0.4", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "scale3d(1.15, 0.85, 1)", 20 | "offset": "0.5", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "scale3d(.95, 1.05, 1)", 25 | "offset": "0.65", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "scale3d(1.05, .95, 1)", 30 | "offset": "0.75", 31 | "easing": "ease" 32 | }, 33 | { 34 | "transform": "scale3d(1, 1, 1)", 35 | "offset": "1", 36 | "easing": "ease" 37 | } 38 | ] 39 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/shake.json: -------------------------------------------------------------------------------- 1 | { 2 | "shake": [ 3 | { 4 | "transform": "translate3d(0, 0, 0)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "translate3d(-10px, 0, 0)", 10 | "offset": "0.1", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "translate3d(10px, 0, 0)", 15 | "offset": "0.2", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "translate3d(-10px, 0, 0)", 20 | "offset": "0.3", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "translate3d(10px, 0, 0)", 25 | "offset": "0.4", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "translate3d(-10px, 0, 0)", 30 | "offset": "0.5", 31 | "easing": "ease" 32 | }, 33 | { 34 | "transform": "translate3d(10px, 0, 0)", 35 | "offset": "0.6", 36 | "easing": "ease" 37 | }, 38 | { 39 | "transform": "translate3d(-10px, 0, 0)", 40 | "offset": "0.7", 41 | "easing": "ease" 42 | }, 43 | { 44 | "transform": "translate3d(10px, 0, 0)", 45 | "offset": "0.8", 46 | "easing": "ease" 47 | }, 48 | { 49 | "transform": "translate3d(-10px, 0, 0)", 50 | "offset": "0.9", 51 | "easing": "ease" 52 | }, 53 | { 54 | "transform": "translate3d(0, 0, 0)", 55 | "offset": "1", 56 | "easing": "ease" 57 | } 58 | ] 59 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/swing.json: -------------------------------------------------------------------------------- 1 | { 2 | "swing": [ 3 | { 4 | "transform": "rotate3d(0, 0, 1, 15deg)", 5 | "offset": "0.2", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "rotate3d(0, 0, 1, -10deg)", 10 | "offset": "0.4", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "rotate3d(0, 0, 1, 5deg)", 15 | "offset": "0.6", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "rotate3d(0, 0, 1, -5deg)", 20 | "offset": "0.8", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "rotate3d(0, 0, 1, 0deg)", 25 | "offset": "1", 26 | "easing": "ease" 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/tada.json: -------------------------------------------------------------------------------- 1 | { 2 | "tada": [ 3 | { 4 | "transform": "scale3d(1, 1, 1)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", 10 | "offset": "0.1", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", 15 | "offset": "0.2", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 20 | "offset": "0.3", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", 25 | "offset": "0.4", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 30 | "offset": "0.5", 31 | "easing": "ease" 32 | }, 33 | { 34 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", 35 | "offset": "0.6", 36 | "easing": "ease" 37 | }, 38 | { 39 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 40 | "offset": "0.7", 41 | "easing": "ease" 42 | }, 43 | { 44 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", 45 | "offset": "0.8", 46 | "easing": "ease" 47 | }, 48 | { 49 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 50 | "offset": "0.9", 51 | "easing": "ease" 52 | }, 53 | { 54 | "transform": "scale3d(1, 1, 1)", 55 | "offset": "1", 56 | "easing": "ease" 57 | } 58 | ] 59 | } -------------------------------------------------------------------------------- /src/attentionSeekers/done/wobble.json: -------------------------------------------------------------------------------- 1 | { 2 | "wobble": [ 3 | { 4 | "transform": "none", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)", 10 | "offset": "0.15", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)", 15 | "offset": "0.3", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)", 20 | "offset": "0.45", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)", 25 | "offset": "0.6", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)", 30 | "offset": "0.75", 31 | "easing": "ease" 32 | }, 33 | { 34 | "transform": "none", 35 | "offset": "1", 36 | "easing": "ease" 37 | } 38 | ] 39 | } -------------------------------------------------------------------------------- /src/attentionSeekers/flash.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.flash = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "opacity": "0", 13 | "offset": "0.25", 14 | "easing": "ease" 15 | }, 16 | { 17 | "opacity": "1", 18 | "offset": "0.5", 19 | "easing": "ease" 20 | }, 21 | { 22 | "opacity": "0", 23 | "offset": "0.75", 24 | "easing": "ease" 25 | }, 26 | { 27 | "opacity": "1", 28 | "offset": "1", 29 | "easing": "ease" 30 | } 31 | ]; 32 | return animatelo._animate(selector, keyframeset, options); 33 | } 34 | })(window.animatelo = window.animatelo || {}); 35 | -------------------------------------------------------------------------------- /src/attentionSeekers/headShake.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.headShake = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": 'translateX(0)', 8 | "offset": "0", 9 | "easing": "ease-in-out" 10 | }, 11 | { 12 | "transform": "translateX(-6px) rotateY(-9deg)", 13 | "offset": "0.065", 14 | "easing": "ease-in-out" 15 | }, 16 | { 17 | "transform": "translateX(5px) rotateY(7deg)", 18 | "offset": "0.185", 19 | "easing": "ease-in-out" 20 | }, 21 | { 22 | "transform": "translateX(-3px) rotateY(-5deg)", 23 | "offset": "0.315", 24 | "easing": "ease-in-out" 25 | }, 26 | { 27 | "transform": "translateX(2px) rotateY(3deg)", 28 | "offset": "0.435", 29 | "easing": "ease-in-out" 30 | }, 31 | { 32 | "transform": "translateX(0)", 33 | "offset": "0.5", 34 | "easing": "ease-in-out" 35 | }, 36 | { 37 | "transform": 'translateX(0)', 38 | "offset": "1", 39 | "easing": "ease-in-out" 40 | } 41 | ]; 42 | return animatelo._animate(selector, keyframeset, options); 43 | } 44 | })(window.animatelo = window.animatelo || {}); -------------------------------------------------------------------------------- /src/attentionSeekers/jello.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.jello = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "none", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "transform": "none", 13 | "offset": "0.111", 14 | "easing": "ease" 15 | }, 16 | { 17 | "transform": "skewX(-12.5deg) skewY(-12.5deg)", 18 | "offset": "0.222", 19 | "easing": "ease" 20 | }, 21 | { 22 | "transform": "skewX(6.25deg) skewY(6.25deg)", 23 | "offset": "0.33299999999999996", 24 | "easing": "ease" 25 | }, 26 | { 27 | "transform": "skewX(-3.125deg) skewY(-3.125deg)", 28 | "offset": "0.444", 29 | "easing": "ease" 30 | }, 31 | { 32 | "transform": "skewX(1.5625deg) skewY(1.5625deg)", 33 | "offset": "0.555", 34 | "easing": "ease" 35 | }, 36 | { 37 | "transform": "skewX(-0.78125deg) skewY(-0.78125deg)", 38 | "offset": "0.6659999999999999", 39 | "easing": "ease" 40 | }, 41 | { 42 | "transform": "skewX(0.390625deg) skewY(0.390625deg)", 43 | "offset": "0.777", 44 | "easing": "ease" 45 | }, 46 | { 47 | "transform": "skewX(-0.1953125deg) skewY(-0.1953125deg)", 48 | "offset": "0.888", 49 | "easing": "ease" 50 | }, 51 | { 52 | "transform": "none", 53 | "offset": "1", 54 | "easing": "ease" 55 | } 56 | ]; 57 | return animatelo._animate(selector, keyframeset, options); 58 | } 59 | })(window.animatelo = window.animatelo || {}); 60 | -------------------------------------------------------------------------------- /src/attentionSeekers/pulse.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.pulse = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "scale3d(1, 1, 1)", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "transform": "scale3d(1.05, 1.05, 1.05)", 13 | "offset": "0.5", 14 | "easing": "ease" 15 | }, 16 | { 17 | "transform": "scale3d(1, 1, 1)", 18 | "offset": "1", 19 | "easing": "ease" 20 | } 21 | ]; 22 | return animatelo._animate(selector, keyframeset, options); 23 | } 24 | })(window.animatelo = window.animatelo || {}); 25 | -------------------------------------------------------------------------------- /src/attentionSeekers/rubberBand.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rubberBand = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "scale3d(1, 1, 1)", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "transform": "scale3d(1.25, 0.75, 1)", 13 | "offset": "0.3", 14 | "easing": "ease" 15 | }, 16 | { 17 | "transform": "scale3d(0.75, 1.25, 1)", 18 | "offset": "0.4", 19 | "easing": "ease" 20 | }, 21 | { 22 | "transform": "scale3d(1.15, 0.85, 1)", 23 | "offset": "0.5", 24 | "easing": "ease" 25 | }, 26 | { 27 | "transform": "scale3d(.95, 1.05, 1)", 28 | "offset": "0.65", 29 | "easing": "ease" 30 | }, 31 | { 32 | "transform": "scale3d(1.05, .95, 1)", 33 | "offset": "0.75", 34 | "easing": "ease" 35 | }, 36 | { 37 | "transform": "scale3d(1, 1, 1)", 38 | "offset": "1", 39 | "easing": "ease" 40 | } 41 | ]; 42 | return animatelo._animate(selector, keyframeset, options); 43 | } 44 | })(window.animatelo = window.animatelo || {}); 45 | -------------------------------------------------------------------------------- /src/attentionSeekers/shake.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.shake = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "translate3d(0, 0, 0)", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "transform": "translate3d(-10px, 0, 0)", 13 | "offset": "0.1", 14 | "easing": "ease" 15 | }, 16 | { 17 | "transform": "translate3d(10px, 0, 0)", 18 | "offset": "0.2", 19 | "easing": "ease" 20 | }, 21 | { 22 | "transform": "translate3d(-10px, 0, 0)", 23 | "offset": "0.3", 24 | "easing": "ease" 25 | }, 26 | { 27 | "transform": "translate3d(10px, 0, 0)", 28 | "offset": "0.4", 29 | "easing": "ease" 30 | }, 31 | { 32 | "transform": "translate3d(-10px, 0, 0)", 33 | "offset": "0.5", 34 | "easing": "ease" 35 | }, 36 | { 37 | "transform": "translate3d(10px, 0, 0)", 38 | "offset": "0.6", 39 | "easing": "ease" 40 | }, 41 | { 42 | "transform": "translate3d(-10px, 0, 0)", 43 | "offset": "0.7", 44 | "easing": "ease" 45 | }, 46 | { 47 | "transform": "translate3d(10px, 0, 0)", 48 | "offset": "0.8", 49 | "easing": "ease" 50 | }, 51 | { 52 | "transform": "translate3d(-10px, 0, 0)", 53 | "offset": "0.9", 54 | "easing": "ease" 55 | }, 56 | { 57 | "transform": "translate3d(0, 0, 0)", 58 | "offset": "1", 59 | "easing": "ease" 60 | } 61 | ]; 62 | return animatelo._animate(selector, keyframeset, options); 63 | } 64 | })(window.animatelo = window.animatelo || {}); 65 | -------------------------------------------------------------------------------- /src/attentionSeekers/swing.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.swing = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": 'rotate3d(0, 0, 1, 0deg)', 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "transform": "rotate3d(0, 0, 1, 15deg)", 13 | "offset": "0.2", 14 | "easing": "ease" 15 | }, 16 | { 17 | "transform": "rotate3d(0, 0, 1, -10deg)", 18 | "offset": "0.4", 19 | "easing": "ease" 20 | }, 21 | { 22 | "transform": "rotate3d(0, 0, 1, 5deg)", 23 | "offset": "0.6", 24 | "easing": "ease" 25 | }, 26 | { 27 | "transform": "rotate3d(0, 0, 1, -5deg)", 28 | "offset": "0.8", 29 | "easing": "ease" 30 | }, 31 | { 32 | "transform": "rotate3d(0, 0, 1, 0deg)", 33 | "offset": "1", 34 | "easing": "ease" 35 | } 36 | ]; 37 | return animatelo._animate(selector, keyframeset, options); 38 | } 39 | })(window.animatelo = window.animatelo || {}); -------------------------------------------------------------------------------- /src/attentionSeekers/tada.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.tada = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "scale3d(1, 1, 1)", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "transform": "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", 13 | "offset": "0.1", 14 | "easing": "ease" 15 | }, 16 | { 17 | "transform": "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", 18 | "offset": "0.2", 19 | "easing": "ease" 20 | }, 21 | { 22 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 23 | "offset": "0.3", 24 | "easing": "ease" 25 | }, 26 | { 27 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", 28 | "offset": "0.4", 29 | "easing": "ease" 30 | }, 31 | { 32 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 33 | "offset": "0.5", 34 | "easing": "ease" 35 | }, 36 | { 37 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", 38 | "offset": "0.6", 39 | "easing": "ease" 40 | }, 41 | { 42 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 43 | "offset": "0.7", 44 | "easing": "ease" 45 | }, 46 | { 47 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", 48 | "offset": "0.8", 49 | "easing": "ease" 50 | }, 51 | { 52 | "transform": "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", 53 | "offset": "0.9", 54 | "easing": "ease" 55 | }, 56 | { 57 | "transform": "scale3d(1, 1, 1)", 58 | "offset": "1", 59 | "easing": "ease" 60 | } 61 | ]; 62 | return animatelo._animate(selector, keyframeset, options); 63 | } 64 | })(window.animatelo = window.animatelo || {}); 65 | -------------------------------------------------------------------------------- /src/attentionSeekers/wobble.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.wobble = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "none", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "transform": "translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)", 13 | "offset": "0.15", 14 | "easing": "ease" 15 | }, 16 | { 17 | "transform": "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)", 18 | "offset": "0.3", 19 | "easing": "ease" 20 | }, 21 | { 22 | "transform": "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)", 23 | "offset": "0.45", 24 | "easing": "ease" 25 | }, 26 | { 27 | "transform": "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)", 28 | "offset": "0.6", 29 | "easing": "ease" 30 | }, 31 | { 32 | "transform": "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)", 33 | "offset": "0.75", 34 | "easing": "ease" 35 | }, 36 | { 37 | "transform": "none", 38 | "offset": "1", 39 | "easing": "ease" 40 | } 41 | ]; 42 | return animatelo._animate(selector, keyframeset, options); 43 | } 44 | })(window.animatelo = window.animatelo || {}); 45 | -------------------------------------------------------------------------------- /src/bouncingEntrances/bounceIn.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceIn = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "scale3d(.3, .3, .3)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 11 | }, 12 | { 13 | "transform": "scale3d(1.1, 1.1, 1.1)", 14 | "offset": "0.2", 15 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 16 | }, 17 | { 18 | "transform": "scale3d(.9, .9, .9)", 19 | "offset": "0.4", 20 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 21 | }, 22 | { 23 | "opacity": "1", 24 | "transform": "scale3d(1.03, 1.03, 1.03)", 25 | "offset": "0.6", 26 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 27 | }, 28 | { 29 | "transform": "scale3d(.97, .97, .97)", 30 | "offset": "0.8", 31 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 32 | }, 33 | { 34 | "opacity": "1", 35 | "transform": "scale3d(1, 1, 1)", 36 | "offset": "1", 37 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 38 | } 39 | ]; 40 | // change default animation duration 41 | var duration = 750; 42 | if (typeof options === 'object' && 'duration' in options === false) { 43 | options.duration = duration; 44 | } 45 | if (typeof options !== 'object') { 46 | var options = { 47 | duration: duration 48 | }; 49 | } 50 | return animatelo._animate(selector, keyframeset, options); 51 | } 52 | })(window.animatelo = window.animatelo || {}); -------------------------------------------------------------------------------- /src/bouncingEntrances/bounceInDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceInDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(0, -3000px, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "translate3d(0, 25px, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 17 | }, 18 | { 19 | "transform": "translate3d(0, -10px, 0)", 20 | "offset": "0.75", 21 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 22 | }, 23 | { 24 | "transform": "translate3d(0, 5px, 0)", 25 | "offset": "0.9", 26 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 27 | }, 28 | { 29 | "opacity": "1", 30 | "transform": "none", 31 | "offset": "1", 32 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 33 | } 34 | ]; 35 | return animatelo._animate(selector, keyframeset, options); 36 | } 37 | })(window.animatelo = window.animatelo || {}); 38 | -------------------------------------------------------------------------------- /src/bouncingEntrances/bounceInLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceInLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(-3000px, 0, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "translate3d(25px, 0, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 17 | 18 | }, 19 | { 20 | "transform": "translate3d(-10px, 0, 0)", 21 | "offset": "0.75", 22 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 23 | 24 | }, 25 | { 26 | "transform": "translate3d(5px, 0, 0)", 27 | "offset": "0.9", 28 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 29 | }, 30 | { 31 | "opacity": "1", 32 | "transform": "none", 33 | "offset": "1", 34 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 35 | } 36 | ]; 37 | return animatelo._animate(selector, keyframeset, options); 38 | } 39 | })(window.animatelo = window.animatelo || {}); 40 | -------------------------------------------------------------------------------- /src/bouncingEntrances/bounceInRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceInRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(3000px, 0, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "translate3d(-25px, 0, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 17 | }, 18 | { 19 | "transform": "translate3d(10px, 0, 0)", 20 | "offset": "0.75", 21 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 22 | }, 23 | { 24 | "transform": "translate3d(-5px, 0, 0)", 25 | "offset": "0.9", 26 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 27 | }, 28 | { 29 | "opacity": "1", 30 | "transform": "none", 31 | "offset": "1", 32 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 33 | } 34 | ]; 35 | return animatelo._animate(selector, keyframeset, options); 36 | } 37 | })(window.animatelo = window.animatelo || {}); 38 | -------------------------------------------------------------------------------- /src/bouncingEntrances/bounceInUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceInUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(0, 3000px, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "translate3d(0, -20px, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 17 | }, 18 | { 19 | "transform": "translate3d(0, 10px, 0)", 20 | "offset": "0.75", 21 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 22 | }, 23 | { 24 | "transform": "translate3d(0, -5px, 0)", 25 | "offset": "0.9", 26 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 27 | }, 28 | { 29 | "opacity": "1", 30 | "transform": "translate3d(0, 0, 0)", 31 | "offset": "1", 32 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 33 | } 34 | ]; 35 | return animatelo._animate(selector, keyframeset, options); 36 | } 37 | })(window.animatelo = window.animatelo || {}); 38 | -------------------------------------------------------------------------------- /src/bouncingEntrances/done/bounceIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceIn": [ 3 | { 4 | "opacity": "0", 5 | "transform": "scale3d(.3, .3, .3)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "offset": "0", 11 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 12 | }, 13 | { 14 | "offset": "0.2", 15 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 16 | }, 17 | { 18 | "transform": "scale3d(1.1, 1.1, 1.1)", 19 | "offset": "0.2", 20 | "easing": "ease" 21 | }, 22 | { 23 | "offset": "0.4", 24 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 25 | }, 26 | { 27 | "transform": "scale3d(.9, .9, .9)", 28 | "offset": "0.4", 29 | "easing": "ease" 30 | }, 31 | { 32 | "offset": "0.6", 33 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 34 | }, 35 | { 36 | "opacity": "1", 37 | "transform": "scale3d(1.03, 1.03, 1.03)", 38 | "offset": "0.6", 39 | "easing": "ease" 40 | }, 41 | { 42 | "offset": "0.8", 43 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 44 | }, 45 | { 46 | "transform": "scale3d(.97, .97, .97)", 47 | "offset": "0.8", 48 | "easing": "ease" 49 | }, 50 | { 51 | "offset": "1", 52 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 53 | }, 54 | { 55 | "opacity": "1", 56 | "transform": "scale3d(1, 1, 1)", 57 | "offset": "1", 58 | "easing": "ease" 59 | } 60 | ] 61 | } -------------------------------------------------------------------------------- /src/bouncingEntrances/done/bounceInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceInDown": [ 3 | { 4 | "offset": "0", 5 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 6 | }, 7 | { 8 | "opacity": "0", 9 | "transform": "translate3d(0, -3000px, 0)", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "offset": "0.6", 15 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "translate3d(0, 25px, 0)", 20 | "offset": "0.6", 21 | "easing": "ease" 22 | }, 23 | { 24 | "offset": "0.75", 25 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 26 | }, 27 | { 28 | "transform": "translate3d(0, -10px, 0)", 29 | "offset": "0.75", 30 | "easing": "ease" 31 | }, 32 | { 33 | "offset": "0.9", 34 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 35 | }, 36 | { 37 | "transform": "translate3d(0, 5px, 0)", 38 | "offset": "0.9", 39 | "easing": "ease" 40 | }, 41 | { 42 | "offset": "1", 43 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 44 | }, 45 | { 46 | "transform": "none", 47 | "offset": "1", 48 | "easing": "ease" 49 | } 50 | ] 51 | } -------------------------------------------------------------------------------- /src/bouncingEntrances/done/bounceInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceInLeft": [ 3 | { 4 | "offset": "0", 5 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 6 | }, 7 | { 8 | "opacity": "0", 9 | "transform": "translate3d(-3000px, 0, 0)", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "offset": "0.6", 15 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "translate3d(25px, 0, 0)", 20 | "offset": "0.6", 21 | "easing": "ease" 22 | }, 23 | { 24 | "offset": "0.75", 25 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 26 | }, 27 | { 28 | "transform": "translate3d(-10px, 0, 0)", 29 | "offset": "0.75", 30 | "easing": "ease" 31 | }, 32 | { 33 | "offset": "0.9", 34 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 35 | }, 36 | { 37 | "transform": "translate3d(5px, 0, 0)", 38 | "offset": "0.9", 39 | "easing": "ease" 40 | }, 41 | { 42 | "offset": "1", 43 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 44 | }, 45 | { 46 | "transform": "none", 47 | "offset": "1", 48 | "easing": "ease" 49 | } 50 | ] 51 | } -------------------------------------------------------------------------------- /src/bouncingEntrances/done/bounceInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceInRight": [ 3 | { 4 | "offset": "0", 5 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 6 | }, 7 | { 8 | "opacity": "0", 9 | "transform": "translate3d(3000px, 0, 0)", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "offset": "0.6", 15 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "translate3d(-25px, 0, 0)", 20 | "offset": "0.6", 21 | "easing": "ease" 22 | }, 23 | { 24 | "offset": "0.75", 25 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 26 | }, 27 | { 28 | "transform": "translate3d(10px, 0, 0)", 29 | "offset": "0.75", 30 | "easing": "ease" 31 | }, 32 | { 33 | "offset": "0.9", 34 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 35 | }, 36 | { 37 | "transform": "translate3d(-5px, 0, 0)", 38 | "offset": "0.9", 39 | "easing": "ease" 40 | }, 41 | { 42 | "offset": "1", 43 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 44 | }, 45 | { 46 | "transform": "none", 47 | "offset": "1", 48 | "easing": "ease" 49 | } 50 | ] 51 | } -------------------------------------------------------------------------------- /src/bouncingEntrances/done/bounceInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceInUp": [ 3 | { 4 | "offset": "0", 5 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 6 | }, 7 | { 8 | "opacity": "0", 9 | "transform": "translate3d(0, 3000px, 0)", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "offset": "0.6", 15 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "translate3d(0, -20px, 0)", 20 | "offset": "0.6", 21 | "easing": "ease" 22 | }, 23 | { 24 | "offset": "0.75", 25 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 26 | }, 27 | { 28 | "transform": "translate3d(0, 10px, 0)", 29 | "offset": "0.75", 30 | "easing": "ease" 31 | }, 32 | { 33 | "offset": "0.9", 34 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 35 | }, 36 | { 37 | "transform": "translate3d(0, -5px, 0)", 38 | "offset": "0.9", 39 | "easing": "ease" 40 | }, 41 | { 42 | "offset": "1", 43 | "easing": "cubic-bezier(0.215, 0.610, 0.355, 1.000)" 44 | }, 45 | { 46 | "transform": "translate3d(0, 0, 0)", 47 | "offset": "1", 48 | "easing": "ease" 49 | } 50 | ] 51 | } -------------------------------------------------------------------------------- /src/bouncingExits/bounceOut.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceOut = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "scale3d(.9, .9, .9)", 14 | "offset": "0.2", 15 | "easing": "ease" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "scale3d(1.1, 1.1, 1.1)", 20 | "offset": "0.5", 21 | "easing": "ease" 22 | }, 23 | { 24 | "opacity": "1", 25 | "transform": "scale3d(1.1, 1.1, 1.1)", 26 | "offset": "0.55", 27 | "easing": "ease" 28 | }, 29 | { 30 | "opacity": "0", 31 | "transform": "scale3d(.3, .3, .3)", 32 | "offset": "1", 33 | "easing": "ease" 34 | } 35 | ]; 36 | // change default animation duration 37 | var duration = 750; 38 | if (typeof options === 'object' && 'duration' in options === false) { 39 | options.duration = duration; 40 | } 41 | if (typeof options !== 'object') { 42 | var options = { 43 | duration: duration 44 | }; 45 | } 46 | return animatelo._animate(selector, keyframeset, options); 47 | } 48 | })(window.animatelo = window.animatelo || {}); 49 | -------------------------------------------------------------------------------- /src/bouncingExits/bounceOutDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceOutDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "translate3d(0, 10px, 0)", 14 | "offset": "0.2", 15 | "easing": "ease" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "translate3d(0, -20px, 0)", 20 | "offset": "0.4", 21 | "easing": "ease" 22 | }, 23 | { 24 | "opacity": "1", 25 | "transform": "translate3d(0, -20px, 0)", 26 | "offset": "0.45", 27 | "easing": "ease" 28 | }, 29 | { 30 | "opacity": "0", 31 | "transform": "translate3d(0, 2000px, 0)", 32 | "offset": "1", 33 | "easing": "ease" 34 | } 35 | ]; 36 | return animatelo._animate(selector, keyframeset, options); 37 | } 38 | })(window.animatelo = window.animatelo || {}); 39 | -------------------------------------------------------------------------------- /src/bouncingExits/bounceOutLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceOutLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "translate3d(20px, 0, 0)", 15 | "offset": "0.2", 16 | "easing": "ease" 17 | }, 18 | { 19 | "opacity": "0", 20 | "transform": "translate3d(-2000px, 0, 0)", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | return animatelo._animate(selector, keyframeset, options); 26 | } 27 | })(window.animatelo = window.animatelo || {}); 28 | -------------------------------------------------------------------------------- /src/bouncingExits/bounceOutRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceOutRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "translate3d(-20px, 0, 0)", 15 | "offset": "0.2", 16 | "easing": "ease" 17 | }, 18 | { 19 | "opacity": "0", 20 | "transform": "translate3d(2000px, 0, 0)", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | return animatelo._animate(selector, keyframeset, options); 26 | } 27 | })(window.animatelo = window.animatelo || {}); 28 | -------------------------------------------------------------------------------- /src/bouncingExits/bounceOutUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.bounceOutUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "translate3d(0, -10px, 0)", 14 | "offset": "0.2", 15 | "easing": "ease" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "translate3d(0, 20px, 0)", 20 | "offset": "0.4", 21 | "easing": "ease" 22 | }, 23 | { 24 | "opacity": "1", 25 | "transform": "translate3d(0, 20px, 0)", 26 | "offset": "0.45", 27 | "easing": "ease" 28 | }, 29 | { 30 | "opacity": "0", 31 | "transform": "translate3d(0, -2000px, 0)", 32 | "offset": "1", 33 | "easing": "ease" 34 | } 35 | ]; 36 | return animatelo._animate(selector, keyframeset, options); 37 | } 38 | })(window.animatelo = window.animatelo || {}); 39 | -------------------------------------------------------------------------------- /src/bouncingExits/done/bounceOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceOut": [ 3 | { 4 | "transform": "scale3d(.9, .9, .9)", 5 | "offset": "0.2", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "1", 10 | "transform": "scale3d(1.1, 1.1, 1.1)", 11 | "offset": "0.5", 12 | "easing": "ease" 13 | }, 14 | { 15 | "opacity": "1", 16 | "transform": "scale3d(1.1, 1.1, 1.1)", 17 | "offset": "0.55", 18 | "easing": "ease" 19 | }, 20 | { 21 | "opacity": "0", 22 | "transform": "scale3d(.3, .3, .3)", 23 | "offset": "1", 24 | "easing": "ease" 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /src/bouncingExits/done/bounceOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceOutDown": [ 3 | { 4 | "transform": "translate3d(0, 10px, 0)", 5 | "offset": "0.2", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "1", 10 | "transform": "translate3d(0, -20px, 0)", 11 | "offset": "0.4", 12 | "easing": "ease" 13 | }, 14 | { 15 | "opacity": "1", 16 | "transform": "translate3d(0, -20px, 0)", 17 | "offset": "0.45", 18 | "easing": "ease" 19 | }, 20 | { 21 | "opacity": "0", 22 | "transform": "translate3d(0, 2000px, 0)", 23 | "offset": "1", 24 | "easing": "ease" 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /src/bouncingExits/done/bounceOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceOutLeft": [ 3 | { 4 | "opacity": "1", 5 | "transform": "translate3d(20px, 0, 0)", 6 | "offset": "0.2", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "0", 11 | "transform": "translate3d(-2000px, 0, 0)", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/bouncingExits/done/bounceOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceOutRight": [ 3 | { 4 | "opacity": "1", 5 | "transform": "translate3d(-20px, 0, 0)", 6 | "offset": "0.2", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "0", 11 | "transform": "translate3d(2000px, 0, 0)", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/bouncingExits/done/bounceOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "bounceOutUp": [ 3 | { 4 | "transform": "translate3d(0, -10px, 0)", 5 | "offset": "0.2", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "1", 10 | "transform": "translate3d(0, 20px, 0)", 11 | "offset": "0.4", 12 | "easing": "ease" 13 | }, 14 | { 15 | "opacity": "1", 16 | "transform": "translate3d(0, 20px, 0)", 17 | "offset": "0.45", 18 | "easing": "ease" 19 | }, 20 | { 21 | "opacity": "0", 22 | "transform": "translate3d(0, -2000px, 0)", 23 | "offset": "1", 24 | "easing": "ease" 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeIn": [ 3 | { 4 | "opacity": "0", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "1", 10 | "offset": "1", 11 | "easing": "ease" 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInDown": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(0, -100%, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInDownBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInDownBig": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(0, -2000px, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInLeft": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(-100%, 0, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInLeftBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInLeftBig": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(-2000px, 0, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInRight": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(100%, 0, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInRightBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInRightBig": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(2000px, 0, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInUp": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(0, 100%, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/done/fadeInUpBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeInUpBig": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(0, 2000px, 0)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/fadingEntrances/fadeIn.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeIn = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "opacity": "1", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ]; 17 | return animatelo._animate(selector, keyframeset, options); 18 | } 19 | })(window.animatelo = window.animatelo || {}); 20 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(0, -100%, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInDownBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInDownBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(0, -2000px, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(-100%, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInLeftBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInLeftBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(-2000px, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(100%, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInRightBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInRightBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(2000px, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(0, 100%, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingEntrances/fadeInUpBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeInUpBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(0, 2000px, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOut": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "offset": "1", 11 | "easing": "ease" 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutDown": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(0, 100%, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutDownBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutDownBig": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(0, 2000px, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutLeft": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(-100%, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutLeftBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutLeftBig": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(-2000px, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutRight": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(100%, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutRightBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutRightBig": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(2000px, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutUp": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(0, -100%, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/done/fadeOutUpBig.json: -------------------------------------------------------------------------------- 1 | { 2 | "fadeOutUpBig": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(0, -2000px, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fadingExits/fadeOut.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOut = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "offset": "0", 9 | "easing": "ease" 10 | }, 11 | { 12 | "opacity": "0", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ]; 17 | return animatelo._animate(selector, keyframeset, options); 18 | } 19 | })(window.animatelo = window.animatelo || {}); 20 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(0, 100%, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutDownBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutDownBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(0, 2000px, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(-100%, 0, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutLeftBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutLeftBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(-2000px, 0, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(100%, 0, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutRightBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutRightBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(2000px, 0, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(0, -100%, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/fadingExits/fadeOutUpBig.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.fadeOutUpBig = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(0, -2000px, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/flippers/done/flip.json: -------------------------------------------------------------------------------- 1 | { 2 | "flip": [ 3 | { 4 | "transform": "perspective(400px) rotate3d(0, 1, 0, -360deg)", 5 | "offset": "0", 6 | "easing": "ease-out" 7 | }, 8 | { 9 | "transform": "perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)", 10 | "offset": "0.4", 11 | "easing": "ease-out" 12 | }, 13 | { 14 | "transform": "perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)", 15 | "offset": "0.5", 16 | "easing": "ease-in" 17 | }, 18 | { 19 | "transform": "perspective(400px) scale3d(.95, .95, .95)", 20 | "offset": "0.8", 21 | "easing": "ease-in" 22 | }, 23 | { 24 | "transform": "perspective(400px)", 25 | "offset": "1", 26 | "easing": "ease-in" 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/flippers/done/flipInX.json: -------------------------------------------------------------------------------- 1 | { 2 | "flipInX": [ 3 | { 4 | "transform": "perspective(400px) rotate3d(1, 0, 0, 90deg)", 5 | "opacity": "0", 6 | "offset": "0", 7 | "easing": "ease-in" 8 | }, 9 | { 10 | "transform": "perspective(400px) rotate3d(1, 0, 0, -20deg)", 11 | "offset": "0.4", 12 | "easing": "ease-in" 13 | }, 14 | { 15 | "transform": "perspective(400px) rotate3d(1, 0, 0, 10deg)", 16 | "opacity": "1", 17 | "offset": "0.6", 18 | "easing": "ease" 19 | }, 20 | { 21 | "transform": "perspective(400px) rotate3d(1, 0, 0, -5deg)", 22 | "offset": "0.8", 23 | "easing": "ease" 24 | }, 25 | { 26 | "transform": "perspective(400px)", 27 | "offset": "1", 28 | "easing": "ease" 29 | } 30 | ] 31 | } -------------------------------------------------------------------------------- /src/flippers/done/flipInY.json: -------------------------------------------------------------------------------- 1 | { 2 | "flipInY": [ 3 | { 4 | "transform": "perspective(400px) rotate3d(0, 1, 0, 90deg)", 5 | "opacity": "0", 6 | "offset": "0", 7 | "easing": "ease-in" 8 | }, 9 | { 10 | "transform": "perspective(400px) rotate3d(0, 1, 0, -20deg)", 11 | "offset": "0.4", 12 | "easing": "ease-in" 13 | }, 14 | { 15 | "transform": "perspective(400px) rotate3d(0, 1, 0, 10deg)", 16 | "opacity": "1", 17 | "offset": "0.6", 18 | "easing": "ease" 19 | }, 20 | { 21 | "transform": "perspective(400px) rotate3d(0, 1, 0, -5deg)", 22 | "offset": "0.8", 23 | "easing": "ease" 24 | }, 25 | { 26 | "transform": "perspective(400px)", 27 | "offset": "1", 28 | "easing": "ease" 29 | } 30 | ] 31 | } -------------------------------------------------------------------------------- /src/flippers/done/flipOutX.json: -------------------------------------------------------------------------------- 1 | { 2 | "flipOutX": [ 3 | { 4 | "transform": "perspective(400px)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "perspective(400px) rotate3d(1, 0, 0, -20deg)", 10 | "opacity": "1", 11 | "offset": "0.3", 12 | "easing": "ease" 13 | }, 14 | { 15 | "transform": "perspective(400px) rotate3d(1, 0, 0, 90deg)", 16 | "opacity": "0", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/flippers/done/flipOutY.json: -------------------------------------------------------------------------------- 1 | { 2 | "flipOutY": [ 3 | { 4 | "transform": "perspective(400px)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "perspective(400px) rotate3d(0, 1, 0, -15deg)", 10 | "opacity": "1", 11 | "offset": "0.3", 12 | "easing": "ease" 13 | }, 14 | { 15 | "transform": "perspective(400px) rotate3d(0, 1, 0, 90deg)", 16 | "opacity": "0", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/flippers/flip.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.flip = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "perspective(400px) rotate3d(0, 1, 0, -360deg)", 8 | "offset": "0", 9 | "easing": "ease-out" 10 | }, 11 | { 12 | "transform": "perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)", 13 | "offset": "0.4", 14 | "easing": "ease-out" 15 | }, 16 | { 17 | "transform": "perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)", 18 | "offset": "0.5", 19 | "easing": "ease-in" 20 | }, 21 | { 22 | "transform": "perspective(400px) scale3d(.95, .95, .95)", 23 | "offset": "0.8", 24 | "easing": "ease-in" 25 | }, 26 | { 27 | "transform": "perspective(400px)", 28 | "offset": "1", 29 | "easing": "ease-in" 30 | } 31 | ]; 32 | return animatelo._animate(selector, keyframeset, options); 33 | } 34 | })(window.animatelo = window.animatelo || {}); 35 | -------------------------------------------------------------------------------- /src/flippers/flipInX.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.flipInX = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "perspective(400px) rotate3d(1, 0, 0, 90deg)", 8 | "opacity": "0", 9 | "offset": "0", 10 | "easing": "ease-in" 11 | }, 12 | { 13 | "transform": "perspective(400px) rotate3d(1, 0, 0, -20deg)", 14 | "offset": "0.4", 15 | "easing": "ease-in" 16 | }, 17 | { 18 | "transform": "perspective(400px) rotate3d(1, 0, 0, 10deg)", 19 | "opacity": "1", 20 | "offset": "0.6", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "perspective(400px) rotate3d(1, 0, 0, -5deg)", 25 | "offset": "0.8", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "perspective(400px)", 30 | "opacity": "1", 31 | "offset": "1", 32 | "easing": "ease" 33 | } 34 | ]; 35 | return animatelo._animate(selector, keyframeset, options); 36 | } 37 | })(window.animatelo = window.animatelo || {}); 38 | -------------------------------------------------------------------------------- /src/flippers/flipInY.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.flipInY = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "perspective(400px) rotate3d(0, 1, 0, 90deg)", 8 | "opacity": "0", 9 | "offset": "0", 10 | "easing": "ease-in" 11 | }, 12 | { 13 | "transform": "perspective(400px) rotate3d(0, 1, 0, -20deg)", 14 | "offset": "0.4", 15 | "easing": "ease-in" 16 | }, 17 | { 18 | "transform": "perspective(400px) rotate3d(0, 1, 0, 10deg)", 19 | "opacity": "1", 20 | "offset": "0.6", 21 | "easing": "ease" 22 | }, 23 | { 24 | "transform": "perspective(400px) rotate3d(0, 1, 0, -5deg)", 25 | "offset": "0.8", 26 | "easing": "ease" 27 | }, 28 | { 29 | "transform": "perspective(400px)", 30 | "opacity": "1", 31 | "offset": "1", 32 | "easing": "ease" 33 | } 34 | ]; 35 | return animatelo._animate(selector, keyframeset, options); 36 | } 37 | })(window.animatelo = window.animatelo || {}); 38 | -------------------------------------------------------------------------------- /src/flippers/flipOutX.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.flipOutX = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "perspective(400px)", 8 | "opacity": "1", 9 | "offset": "0", 10 | "easing": "ease", 11 | "backface-visibility": "visible" 12 | }, 13 | { 14 | "transform": "perspective(400px) rotate3d(1, 0, 0, -20deg)", 15 | "opacity": "1", 16 | "offset": "0.3", 17 | "easing": "ease" 18 | }, 19 | { 20 | "transform": "perspective(400px) rotate3d(1, 0, 0, 90deg)", 21 | "opacity": "0", 22 | "offset": "1", 23 | "easing": "ease", 24 | "backface-visibility": "visible" 25 | } 26 | ]; 27 | // change default animation duration 28 | var duration = 750; 29 | if (typeof options === 'object' && 'duration' in options === false) { 30 | options.duration = duration; 31 | } 32 | if (typeof options !== 'object') { 33 | var options = { 34 | duration: duration 35 | }; 36 | } 37 | return animatelo._animate(selector, keyframeset, options); 38 | } 39 | })(window.animatelo = window.animatelo || {}); 40 | -------------------------------------------------------------------------------- /src/flippers/flipOutY.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.flipOutY = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "perspective(400px)", 8 | "opacity": "1", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "perspective(400px) rotate3d(0, 1, 0, -15deg)", 14 | "opacity": "1", 15 | "offset": "0.3", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "perspective(400px) rotate3d(0, 1, 0, 90deg)", 20 | "opacity": "0", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | // change default animation duration 26 | var duration = 750; 27 | if (typeof options === 'object' && 'duration' in options === false) { 28 | options.duration = duration; 29 | } 30 | if (typeof options !== 'object') { 31 | var options = { 32 | duration: duration 33 | }; 34 | } 35 | return animatelo._animate(selector, keyframeset, options); 36 | } 37 | })(window.animatelo = window.animatelo || {}); 38 | -------------------------------------------------------------------------------- /src/lightspeed/done/lightSpeedIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "lightSpeedIn": [ 3 | { 4 | "transform": "translate3d(100%, 0, 0) skewX(-30deg)", 5 | "opacity": "0", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transform": "skewX(20deg)", 11 | "opacity": "1", 12 | "offset": "0.6", 13 | "easing": "ease" 14 | }, 15 | { 16 | "transform": "skewX(-5deg)", 17 | "opacity": "1", 18 | "offset": "0.8", 19 | "easing": "ease" 20 | }, 21 | { 22 | "transform": "none", 23 | "opacity": "1", 24 | "offset": "1", 25 | "easing": "ease" 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /src/lightspeed/done/lightSpeedOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "lightSpeedOut": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "transform": "translate3d(100%, 0, 0) skewX(30deg)", 10 | "opacity": "0", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedIn.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.lightSpeedIn = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "translate3d(100%, 0, 0) skewX(-30deg)", 8 | "opacity": "0", 9 | "offset": "0", 10 | "easing": "ease-out" 11 | }, 12 | { 13 | "transform": "skewX(20deg)", 14 | "opacity": "1", 15 | "offset": "0.6", 16 | "easing": "ease-out" 17 | }, 18 | { 19 | "transform": "skewX(-5deg)", 20 | "opacity": "1", 21 | "offset": "0.8", 22 | "easing": "ease-out" 23 | }, 24 | { 25 | "transform": "none", 26 | "opacity": "1", 27 | "offset": "1", 28 | "easing": "ease-out" 29 | } 30 | ]; 31 | return animatelo._animate(selector, keyframeset, options); 32 | } 33 | })(window.animatelo = window.animatelo || {}); 34 | -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedOut.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.lightSpeedOut = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "none", 8 | "opacity": "1", 9 | "offset": "0", 10 | "easing": "ease-in" 11 | }, 12 | { 13 | "transform": "translate3d(100%, 0, 0) skewX(30deg)", 14 | "opacity": "0", 15 | "offset": "1", 16 | "easing": "ease-in" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/rotatingEntrances/done/rotateIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateIn": [ 3 | { 4 | "transformOrigin": "center", 5 | "transform": "rotate3d(0, 0, 1, -200deg)", 6 | "opacity": "0", 7 | "offset": "0", 8 | "easing": "ease" 9 | }, 10 | { 11 | "transformOrigin": "center", 12 | "transform": "none", 13 | "opacity": "1", 14 | "offset": "1", 15 | "easing": "ease" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /src/rotatingEntrances/done/rotateInDownLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateInDownLeft": [ 3 | { 4 | "transformOrigin": "left bottom", 5 | "transform": "rotate3d(0, 0, 1, -45deg)", 6 | "opacity": "0", 7 | "offset": "0", 8 | "easing": "ease" 9 | }, 10 | { 11 | "transformOrigin": "left bottom", 12 | "transform": "none", 13 | "opacity": "1", 14 | "offset": "1", 15 | "easing": "ease" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /src/rotatingEntrances/done/rotateInDownRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateInDownRight": [ 3 | { 4 | "transformOrigin": "right bottom", 5 | "transform": "rotate3d(0, 0, 1, 45deg)", 6 | "opacity": "0", 7 | "offset": "0", 8 | "easing": "ease" 9 | }, 10 | { 11 | "transformOrigin": "right bottom", 12 | "transform": "none", 13 | "opacity": "1", 14 | "offset": "1", 15 | "easing": "ease" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /src/rotatingEntrances/done/rotateInUpLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateInUpLeft": [ 3 | { 4 | "transformOrigin": "left bottom", 5 | "transform": "rotate3d(0, 0, 1, 45deg)", 6 | "opacity": "0", 7 | "offset": "0", 8 | "easing": "ease" 9 | }, 10 | { 11 | "transformOrigin": "left bottom", 12 | "transform": "none", 13 | "opacity": "1", 14 | "offset": "1", 15 | "easing": "ease" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /src/rotatingEntrances/done/rotateInUpRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateInUpRight": [ 3 | { 4 | "transformOrigin": "right bottom", 5 | "transform": "rotate3d(0, 0, 1, -90deg)", 6 | "opacity": "0", 7 | "offset": "0", 8 | "easing": "ease" 9 | }, 10 | { 11 | "transformOrigin": "right bottom", 12 | "transform": "none", 13 | "opacity": "1", 14 | "offset": "1", 15 | "easing": "ease" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /src/rotatingEntrances/rotateIn.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateIn = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "center", 8 | "transform": "rotate3d(0, 0, 1, -200deg)", 9 | "opacity": "0", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "center", 15 | "transform": "none", 16 | "opacity": "1", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingEntrances/rotateInDownLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateInDownLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "left bottom", 8 | "transform": "rotate3d(0, 0, 1, -45deg)", 9 | "opacity": "0", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "left bottom", 15 | "transform": "none", 16 | "opacity": "1", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingEntrances/rotateInDownRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateInDownRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "right bottom", 8 | "transform": "rotate3d(0, 0, 1, 45deg)", 9 | "opacity": "0", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "right bottom", 15 | "transform": "none", 16 | "opacity": "1", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingEntrances/rotateInUpLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateInUpLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "left bottom", 8 | "transform": "rotate3d(0, 0, 1, 45deg)", 9 | "opacity": "0", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "left bottom", 15 | "transform": "none", 16 | "opacity": "1", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingEntrances/rotateInUpRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateInUpRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "right bottom", 8 | "transform": "rotate3d(0, 0, 1, -90deg)", 9 | "opacity": "0", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "right bottom", 15 | "transform": "none", 16 | "opacity": "1", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingExits/done/rotateOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateOut": [ 3 | { 4 | "transformOrigin": "center", 5 | "opacity": "1", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transformOrigin": "center", 11 | "transform": "rotate3d(0, 0, 1, 200deg)", 12 | "opacity": "0", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/rotatingExits/done/rotateOutDownLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateOutDownLeft": [ 3 | { 4 | "transformOrigin": "left bottom", 5 | "opacity": "1", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transformOrigin": "left bottom", 11 | "transform": "rotate3d(0, 0, 1, 45deg)", 12 | "opacity": "0", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/rotatingExits/done/rotateOutDownRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateOutDownRight": [ 3 | { 4 | "transformOrigin": "right bottom", 5 | "opacity": "1", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transformOrigin": "right bottom", 11 | "transform": "rotate3d(0, 0, 1, -45deg)", 12 | "opacity": "0", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/rotatingExits/done/rotateOutUpLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateOutUpLeft": [ 3 | { 4 | "transformOrigin": "left bottom", 5 | "opacity": "1", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transformOrigin": "left bottom", 11 | "transform": "rotate3d(0, 0, 1, -45deg)", 12 | "opacity": "0", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/rotatingExits/done/rotateOutUpRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "rotateOutUpRight": [ 3 | { 4 | "transformOrigin": "right bottom", 5 | "opacity": "1", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transformOrigin": "right bottom", 11 | "transform": "rotate3d(0, 0, 1, 90deg)", 12 | "opacity": "0", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/rotatingExits/rotateOut.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateOut = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "center", 8 | "transform": "none", 9 | "opacity": "1", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "center", 15 | "transform": "rotate3d(0, 0, 1, 200deg)", 16 | "opacity": "0", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingExits/rotateOutDownLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateOutDownLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "left bottom", 8 | "transform": "none", 9 | "opacity": "1", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "left bottom", 15 | "transform": "rotate3d(0, 0, 1, 45deg)", 16 | "opacity": "0", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingExits/rotateOutDownRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateOutDownRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "right bottom", 8 | "transform": "none", 9 | "opacity": "1", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "right bottom", 15 | "transform": "rotate3d(0, 0, 1, -45deg)", 16 | "opacity": "0", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingExits/rotateOutUpLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateOutUpLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "left bottom", 8 | "transform": "none", 9 | "opacity": "1", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "left bottom", 15 | "transform": "rotate3d(0, 0, 1, -45deg)", 16 | "opacity": "0", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/rotatingExits/rotateOutUpRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rotateOutUpRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transformOrigin": "right bottom", 8 | "transform": "none", 9 | "opacity": "1", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transformOrigin": "right bottom", 15 | "transform": "rotate3d(0, 0, 1, 90deg)", 16 | "opacity": "0", 17 | "offset": "1", 18 | "easing": "ease" 19 | } 20 | ]; 21 | return animatelo._animate(selector, keyframeset, options); 22 | } 23 | })(window.animatelo = window.animatelo || {}); 24 | -------------------------------------------------------------------------------- /src/slidingEntrances/done/slideInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideInDown": [ 3 | { 4 | "transform": "translate3d(0, -100%, 0)", 5 | "visibility": "visible", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transform": "translate3d(0, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingEntrances/done/slideInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideInLeft": [ 3 | { 4 | "transform": "translate3d(-100%, 0, 0)", 5 | "visibility": "visible", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transform": "translate3d(0, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingEntrances/done/slideInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideInRight": [ 3 | { 4 | "transform": "translate3d(100%, 0, 0)", 5 | "visibility": "visible", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transform": "translate3d(0, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingEntrances/done/slideInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideInUp": [ 3 | { 4 | "transform": "translate3d(0, 100%, 0)", 5 | "visibility": "visible", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "transform": "translate3d(0, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingEntrances/slideInDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideInDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "translate3d(0, -100%, 0)", 8 | "visibility": "visible", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "translate3d(0, 0, 0)", 14 | "visibility": "visible", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/slidingEntrances/slideInLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideInLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "translate3d(-100%, 0, 0)", 8 | "visibility": "visible", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "translate3d(0, 0, 0)", 14 | "visibility": "visible", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/slidingEntrances/slideInRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideInRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "translate3d(100%, 0, 0)", 8 | "visibility": "visible", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "translate3d(0, 0, 0)", 14 | "visibility": "visible", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/slidingEntrances/slideInUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideInUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "translate3d(0, 100%, 0)", 8 | "visibility": "visible", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "transform": "translate3d(0, 0, 0)", 14 | "visibility": "visible", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/slidingExits/done/slideOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideOutDown": [ 3 | { 4 | "transform": "translate3d(0, 0, 0)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "visibility": "hidden", 10 | "transform": "translate3d(0, 100%, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingExits/done/slideOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideOutLeft": [ 3 | { 4 | "transform": "translate3d(0, 0, 0)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "visibility": "hidden", 10 | "transform": "translate3d(-100%, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingExits/done/slideOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideOutRight": [ 3 | { 4 | "transform": "translate3d(0, 0, 0)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "visibility": "hidden", 10 | "transform": "translate3d(100%, 0, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingExits/done/slideOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "slideOutUp": [ 3 | { 4 | "transform": "translate3d(0, 0, 0)", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "visibility": "hidden", 10 | "transform": "translate3d(0, -100%, 0)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/slidingExits/slideOutDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideOutDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "visibility": "visible", 8 | "transform": "translate3d(0, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "visibility": "hidden", 14 | "transform": "translate3d(0, 100%, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/slidingExits/slideOutLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideOutLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "visibility": "visible", 8 | "transform": "translate3d(0, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "visibility": "hidden", 14 | "transform": "translate3d(-100%, 0, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/slidingExits/slideOutRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideOutRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "visibility": "visible", 8 | "transform": "translate3d(0, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "visibility": "hidden", 14 | "transform": "translate3d(100%, 0, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/slidingExits/slideOutUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.slideOutUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "visibility": "visible", 8 | "transform": "translate3d(0, 0, 0)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "visibility": "hidden", 14 | "transform": "translate3d(0, -100%, 0)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/specials/done/hinge.json: -------------------------------------------------------------------------------- 1 | { 2 | "hinge": [ 3 | { 4 | "transformOrigin": "top left", 5 | "offset": "0", 6 | "easing": "ease-in-out" 7 | }, 8 | { 9 | "transform": "rotate3d(0, 0, 1, 80deg)", 10 | "transformOrigin": "top left", 11 | "offset": "0.2", 12 | "easing": "ease-in-out" 13 | }, 14 | { 15 | "transform": "rotate3d(0, 0, 1, 60deg)", 16 | "transformOrigin": "top left", 17 | "opacity": "1", 18 | "offset": "0.4", 19 | "easing": "ease-in-out" 20 | }, 21 | { 22 | "transform": "rotate3d(0, 0, 1, 80deg)", 23 | "transformOrigin": "top left", 24 | "offset": "0.6", 25 | "easing": "ease-in-out" 26 | }, 27 | { 28 | "transform": "rotate3d(0, 0, 1, 60deg)", 29 | "transformOrigin": "top left", 30 | "opacity": "1", 31 | "offset": "0.8", 32 | "easing": "ease-in-out" 33 | }, 34 | { 35 | "transform": "translate3d(0, 700px, 0)", 36 | "opacity": "0", 37 | "offset": "1", 38 | "easing": "ease" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /src/specials/done/rollIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "rollIn": [ 3 | { 4 | "opacity": "0", 5 | "transform": "translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "none", 12 | "offset": "1", 13 | "easing": "ease" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/specials/done/rollOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "rollOut": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)", 11 | "offset": "1", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/specials/hinge.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.hinge = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "transform": "none", 8 | "transformOrigin": "top left", 9 | "opacity": "1", 10 | "offset": "0", 11 | "easing": "ease-in-out" 12 | }, 13 | { 14 | "transform": "rotate3d(0, 0, 1, 80deg)", 15 | "transformOrigin": "top left", 16 | "offset": "0.2", 17 | "easing": "ease-in-out" 18 | }, 19 | { 20 | "transform": "rotate3d(0, 0, 1, 60deg)", 21 | "transformOrigin": "top left", 22 | "opacity": "1", 23 | "offset": "0.4", 24 | "easing": "ease-in-out" 25 | }, 26 | { 27 | "transform": "rotate3d(0, 0, 1, 80deg)", 28 | "transformOrigin": "top left", 29 | "offset": "0.6", 30 | "easing": "ease-in-out" 31 | }, 32 | { 33 | "transform": "rotate3d(0, 0, 1, 60deg)", 34 | "transformOrigin": "top left", 35 | "opacity": "1", 36 | "offset": "0.8", 37 | "easing": "ease-in-out" 38 | }, 39 | { 40 | "transform": "translate3d(0, 700px, 0)", 41 | "transformOrigin": "top left", 42 | "opacity": "0", 43 | "offset": "1", 44 | "easing": "ease" 45 | } 46 | ]; 47 | // change default animation duration 48 | var duration = 2000; 49 | if (typeof options === 'object' && 'duration' in options === false) { 50 | options.duration = duration; 51 | } 52 | if (typeof options !== 'object') { 53 | var options = { 54 | duration: duration 55 | }; 56 | } 57 | return animatelo._animate(selector, keyframeset, options); 58 | } 59 | })(window.animatelo = window.animatelo || {}); 60 | -------------------------------------------------------------------------------- /src/specials/jackInTheBox.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.jackInTheBox = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "scale(0.1) rotate(30deg)", 9 | "transformOrigin": "center bottom", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "transform": "rotate(-10deg)", 15 | "offset": "0.5", 16 | "easing": "ease" 17 | }, 18 | { 19 | "transform": "rotate(3deg)", 20 | "offset": "0.7", 21 | "easing": "ease" 22 | }, 23 | { 24 | "opacity": "1", 25 | "transform": "scale(1)", 26 | "transformOrigin": "center center", 27 | "offset": "1", 28 | "easing": "ease" 29 | } 30 | ]; 31 | return animatelo._animate(selector, keyframeset, options); 32 | } 33 | })(window.animatelo = window.animatelo || {}); 34 | -------------------------------------------------------------------------------- /src/specials/jackInTheBox.json: -------------------------------------------------------------------------------- 1 | { 2 | "jackInTheBox": [ 3 | { 4 | "opacity": "0", 5 | "transform": "scale(0.1) rotate(30deg)", 6 | "transformOrigin": "center bottom", 7 | "offset": "0", 8 | "easing": "ease" 9 | }, 10 | { 11 | "transform": "rotate(-10deg)", 12 | "offset": "0.5", 13 | "easing": "ease" 14 | }, 15 | { 16 | "transform": "rotate(3deg)", 17 | "offset": "0.7", 18 | "easing": "ease" 19 | }, 20 | { 21 | "opacity": "1", 22 | "transform": "scale(1)", 23 | "offset": "1", 24 | "easing": "ease" 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /src/specials/rollIn.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rollIn = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "none", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/specials/rollOut.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.rollOut = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)", 15 | "offset": "1", 16 | "easing": "ease" 17 | } 18 | ]; 19 | return animatelo._animate(selector, keyframeset, options); 20 | } 21 | })(window.animatelo = window.animatelo || {}); 22 | -------------------------------------------------------------------------------- /src/zoomingEntrances/done/zoomIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomIn": [ 3 | { 4 | "opacity": "0", 5 | "transform": "scale3d(.3, .3, .3)", 6 | "offset": "0", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "1", 11 | "offset": "0.5", 12 | "easing": "ease" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/zoomingEntrances/done/zoomInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomInDown": [ 3 | { 4 | "opacity": "0", 5 | "transform": "scale3d(.1, .1, .1) translate3d(0, -1000px, 0)", 6 | "offset": "0", 7 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "scale3d(.475, .475, .475) translate3d(0, 60px, 0)", 12 | "offset": "0.6", 13 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/zoomingEntrances/done/zoomInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomInLeft": [ 3 | { 4 | "opacity": "0", 5 | "transform": "scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)", 6 | "offset": "0", 7 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "scale3d(.475, .475, .475) translate3d(10px, 0, 0)", 12 | "offset": "0.6", 13 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/zoomingEntrances/done/zoomInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomInRight": [ 3 | { 4 | "opacity": "0", 5 | "transform": "scale3d(.1, .1, .1) translate3d(1000px, 0, 0)", 6 | "offset": "0", 7 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "scale3d(.475, .475, .475) translate3d(-10px, 0, 0)", 12 | "offset": "0.6", 13 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/zoomingEntrances/done/zoomInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomInUp": [ 3 | { 4 | "opacity": "0", 5 | "transform": "scale3d(.1, .1, .1) translate3d(0, 1000px, 0)", 6 | "offset": "0", 7 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 8 | }, 9 | { 10 | "opacity": "1", 11 | "transform": "scale3d(.475, .475, .475) translate3d(0, -60px, 0)", 12 | "offset": "0.6", 13 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/zoomingEntrances/zoomIn.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomIn = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "scale3d(.3, .3, .3)", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "1", 14 | "offset": "0.5", 15 | "easing": "ease" 16 | }, 17 | { 18 | "opacity": "1", 19 | "transform": "none", 20 | "offset": "1", 21 | "easing": "ease" 22 | } 23 | ]; 24 | return animatelo._animate(selector, keyframeset, options); 25 | } 26 | })(window.animatelo = window.animatelo || {}); 27 | -------------------------------------------------------------------------------- /src/zoomingEntrances/zoomInDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomInDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "scale3d(.1, .1, .1) translate3d(0, -1000px, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "scale3d(.475, .475, .475) translate3d(0, 60px, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 17 | }, 18 | { 19 | "opacity": "1", 20 | "transform": "none", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | return animatelo._animate(selector, keyframeset, options); 26 | } 27 | })(window.animatelo = window.animatelo || {}); 28 | -------------------------------------------------------------------------------- /src/zoomingEntrances/zoomInLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomInLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "scale3d(.475, .475, .475) translate3d(10px, 0, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 17 | }, 18 | { 19 | "opacity": "1", 20 | "transform": "none", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | return animatelo._animate(selector, keyframeset, options); 26 | } 27 | })(window.animatelo = window.animatelo || {}); 28 | -------------------------------------------------------------------------------- /src/zoomingEntrances/zoomInRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomInRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "scale3d(.1, .1, .1) translate3d(1000px, 0, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "scale3d(.475, .475, .475) translate3d(-10px, 0, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 17 | }, 18 | { 19 | "opacity": "1", 20 | "transform": "none", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | return animatelo._animate(selector, keyframeset, options); 26 | } 27 | })(window.animatelo = window.animatelo || {}); 28 | -------------------------------------------------------------------------------- /src/zoomingEntrances/zoomInUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomInUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "0", 8 | "transform": "scale3d(.1, .1, .1) translate3d(0, 1000px, 0)", 9 | "offset": "0", 10 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 11 | }, 12 | { 13 | "opacity": "1", 14 | "transform": "scale3d(.475, .475, .475) translate3d(0, -60px, 0)", 15 | "offset": "0.6", 16 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 17 | }, 18 | { 19 | "opacity": "1", 20 | "transform": "none", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | return animatelo._animate(selector, keyframeset, options); 26 | } 27 | })(window.animatelo = window.animatelo || {}); 28 | -------------------------------------------------------------------------------- /src/zoomingExits/done/zoomOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomOut": [ 3 | { 4 | "opacity": "1", 5 | "offset": "0", 6 | "easing": "ease" 7 | }, 8 | { 9 | "opacity": "0", 10 | "transform": "scale3d(.3, .3, .3)", 11 | "offset": "0.5", 12 | "easing": "ease" 13 | }, 14 | { 15 | "opacity": "0", 16 | "offset": "1", 17 | "easing": "ease" 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /src/zoomingExits/done/zoomOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomOutDown": [ 3 | { 4 | "opacity": "1", 5 | "transform": "scale3d(.475, .475, .475) translate3d(0, -60px, 0)", 6 | "offset": "0.4", 7 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 8 | }, 9 | { 10 | "opacity": "0", 11 | "transform": "scale3d(.1, .1, .1) translate3d(0, 2000px, 0)", 12 | "transformOrigin": "center bottom", 13 | "offset": "1", 14 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/zoomingExits/done/zoomOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomOutLeft": [ 3 | { 4 | "opacity": "1", 5 | "transform": "scale3d(.475, .475, .475) translate3d(42px, 0, 0)", 6 | "offset": "0.4", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "0", 11 | "transform": "scale(.1) translate3d(-2000px, 0, 0)", 12 | "transformOrigin": "left center", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/zoomingExits/done/zoomOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomOutRight": [ 3 | { 4 | "opacity": "1", 5 | "transform": "scale3d(.475, .475, .475) translate3d(-42px, 0, 0)", 6 | "offset": "0.4", 7 | "easing": "ease" 8 | }, 9 | { 10 | "opacity": "0", 11 | "transform": "scale(.1) translate3d(2000px, 0, 0)", 12 | "transformOrigin": "right center", 13 | "offset": "1", 14 | "easing": "ease" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/zoomingExits/done/zoomOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "zoomOutUp": [ 3 | { 4 | "opacity": "1", 5 | "transform": "scale3d(.475, .475, .475) translate3d(0, 60px, 0)", 6 | "offset": "0.4", 7 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 8 | }, 9 | { 10 | "opacity": "0", 11 | "transform": "scale3d(.1, .1, .1) translate3d(0, -2000px, 0)", 12 | "transformOrigin": "center bottom", 13 | "offset": "1", 14 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /src/zoomingExits/zoomOut.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomOut = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "offset": "0", 10 | "easing": "ease" 11 | }, 12 | { 13 | "opacity": "0", 14 | "transform": "scale3d(.3, .3, .3)", 15 | "offset": "0.5", 16 | "easing": "ease" 17 | }, 18 | { 19 | "opacity": "0", 20 | "transform": "none", 21 | "offset": "1", 22 | "easing": "ease" 23 | } 24 | ]; 25 | return animatelo._animate(selector, keyframeset, options); 26 | } 27 | })(window.animatelo = window.animatelo || {}); 28 | -------------------------------------------------------------------------------- /src/zoomingExits/zoomOutDown.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomOutDown = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "transformOrigin": "center center", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "opacity": "1", 15 | "transform": "scale3d(.475, .475, .475) translate3d(0, -60px, 0)", 16 | "offset": "0.4", 17 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 18 | }, 19 | { 20 | "opacity": "0", 21 | "transform": "scale3d(.1, .1, .1) translate3d(0, 2000px, 0)", 22 | "transformOrigin": "center bottom", 23 | "offset": "1", 24 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 25 | } 26 | ]; 27 | return animatelo._animate(selector, keyframeset, options); 28 | } 29 | })(window.animatelo = window.animatelo || {}); 30 | -------------------------------------------------------------------------------- /src/zoomingExits/zoomOutLeft.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomOutLeft = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "transformOrigin": "center center", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "opacity": "1", 15 | "transform": "scale3d(.475, .475, .475) translate3d(42px, 0, 0)", 16 | "offset": "0.4", 17 | "easing": "ease" 18 | }, 19 | { 20 | "opacity": "0", 21 | "transform": "scale(.1) translate3d(-2000px, 0, 0)", 22 | "transformOrigin": "left center", 23 | "offset": "1", 24 | "easing": "ease" 25 | } 26 | ]; 27 | return animatelo._animate(selector, keyframeset, options); 28 | } 29 | })(window.animatelo = window.animatelo || {}); 30 | -------------------------------------------------------------------------------- /src/zoomingExits/zoomOutRight.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomOutRight = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "transformOrigin": "center center", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "opacity": "1", 15 | "transform": "scale3d(.475, .475, .475) translate3d(-42px, 0, 0)", 16 | "offset": "0.4", 17 | "easing": "ease" 18 | }, 19 | { 20 | "opacity": "0", 21 | "transform": "scale(.1) translate3d(2000px, 0, 0)", 22 | "transformOrigin": "right center", 23 | "offset": "1", 24 | "easing": "ease" 25 | } 26 | ]; 27 | return animatelo._animate(selector, keyframeset, options); 28 | } 29 | })(window.animatelo = window.animatelo || {}); 30 | -------------------------------------------------------------------------------- /src/zoomingExits/zoomOutUp.js: -------------------------------------------------------------------------------- 1 | /*! Animatelo | The MIT License (MIT) | Copyright (c) 2017 GibboK */ 2 | ; (function (animatelo) { 3 | 'use strict'; 4 | animatelo.zoomOutUp = function (selector, options) { 5 | var keyframeset = [ 6 | { 7 | "opacity": "1", 8 | "transform": "none", 9 | "transformOrigin": "center center", 10 | "offset": "0", 11 | "easing": "ease" 12 | }, 13 | { 14 | "opacity": "1", 15 | "transform": "scale3d(.475, .475, .475) translate3d(0, 60px, 0)", 16 | "offset": "0.4", 17 | "easing": "cubic-bezier(0.550, 0.055, 0.675, 0.190)" 18 | }, 19 | { 20 | "opacity": "0", 21 | "transform": "scale3d(.1, .1, .1) translate3d(0, -2000px, 0)", 22 | "transformOrigin": "center bottom", 23 | "offset": "1", 24 | "easing": "cubic-bezier(0.175, 0.885, 0.320, 1)" 25 | } 26 | ]; 27 | return animatelo._animate(selector, keyframeset, options); 28 | } 29 | })(window.animatelo = window.animatelo || {}); 30 | -------------------------------------------------------------------------------- /test/comparison.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | border: none; 5 | margin: 0; 6 | background: none; 7 | color: inherit; 8 | font: inherit; 9 | } 10 | html { 11 | width: 100%; 12 | height: 100%; 13 | } 14 | body { 15 | min-height: 100%; 16 | text-align: center; 17 | font: 16px/1.5 sans-serif; 18 | } 19 | header.page { 20 | padding: 20px 0; 21 | background: hsl(215, 100%, 50%); 22 | color: white; 23 | font: 24px/1.5 sans-serif; 24 | } 25 | nav.options { 26 | padding: 10px 0; 27 | background: hsl(215, 100%, 40%); 28 | color: white; 29 | font: 16px/1.5 sans-serif; 30 | } 31 | main.comparison { 32 | position: relative; 33 | width: 100%; 34 | height: 400px; 35 | background: hsl(0, 0%, 85%); 36 | } 37 | div.side { 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | right: 0; 42 | bottom: 0; 43 | } 44 | div.left { 45 | clip: rect(0vh 50vw 100vh 0vw) 46 | } 47 | div.right { 48 | clip: rect(0vh 100vw 100vh 50vw) 49 | } 50 | div.divider { 51 | position: absolute; 52 | top: 0; 53 | left: 50%; 54 | bottom: 0; 55 | border-left: 6px dashed hsla(0, 0%, 0%, 0.1); 56 | margin-left: -3px; 57 | } 58 | div.example { 59 | position: absolute; 60 | top: 50%; 61 | left: 50%; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | width: 300px; 66 | height: 200px; 67 | margin: -100px 0 0 -150px; 68 | border-radius: 6px; 69 | background: hsl(0, 0%, 100%); 70 | font: 36px/1.5 sans-serif; 71 | will-change: transform, opacity; 72 | } 73 | select { 74 | height: 30px; 75 | padding: 0 10px; 76 | border-radius: 4px; 77 | background: hsl(215, 100%, 100%); 78 | color: hsl(215, 100%, 40%); 79 | cursor: pointer; 80 | outline: none; 81 | } 82 | select:hover { 83 | background: hsl(215, 100%, 95%) 84 | } 85 | select:active { 86 | background: hsl(215, 100%, 85%) 87 | } 88 | button { 89 | height: 30px; 90 | padding: 0 10px; 91 | border: 2px solid; 92 | border-radius: 4px; 93 | background: none; 94 | color: white; 95 | cursor: pointer; 96 | outline: none; 97 | } 98 | button:hover { 99 | color: hsl(215, 100%, 80%) 100 | } 101 | button:active { 102 | color: hsl(215, 100%, 70%) 103 | } 104 | button.is-disabled { 105 | pointer-events: none; 106 | box-shadow: none; 107 | opacity: 0.3; 108 | } -------------------------------------------------------------------------------- /test/comparison.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animation Comparison 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 |
99 | comparison animatelo and animate.css 100 |
101 | 215 |
216 |
217 |
218 |
Example
219 |
220 |
221 |
Example
222 |
223 |
224 | -------------------------------------------------------------------------------- /test/comparison.js: -------------------------------------------------------------------------------- 1 | ; (function (window) { 2 | document.addEventListener('DOMContentLoaded', function () { 3 | var _animationName = 'bounce', 4 | _elmSelector = document.getElementById('animations'), 5 | _elmPlay = document.getElementById('animate'), 6 | _elmLeft = document.querySelector('.left .example'), 7 | _elmRight = document.querySelector('.right .example'); 8 | 9 | _elmRight.classList.add('animated'); 10 | _elmRight.addEventListener('animationend', function (event) { 11 | _elmRight.classList.remove(_animationName); // Cleanup 12 | }); 13 | 14 | _elmSelector.addEventListener('change', function (event) { 15 | _animationName = this.value; 16 | }); 17 | 18 | _elmPlay.addEventListener('click', function (event) { 19 | _elmPlay.classList.add('is-disabled'); 20 | 21 | _elmRight.classList.add(_animationName); 22 | var _player = animatelo[_animationName](_elmLeft)[0]; 23 | 24 | _player.onfinish = function () { 25 | _player.cancel(); 26 | _elmPlay.classList.remove('is-disabled'); 27 | }; 28 | }); 29 | }); 30 | })(window) 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /test/test.css: -------------------------------------------------------------------------------- 1 | html { 2 | font: 100%/1.5 "Roboto", Verdana, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | } 6 | 7 | #test-target { 8 | position: absolute; 9 | top: 5%; 10 | left: 50%; 11 | margin-left: -180px; 12 | margin-left: -11.25rem; 13 | font-size: 80px; 14 | font-size: 5rem; 15 | font-weight: 100; 16 | } 17 | 18 | #test-form { 19 | position: absolute; 20 | top: 30%; 21 | left: 50%; 22 | text-align: center; 23 | margin-left: -80px; 24 | margin-left: -5rem; 25 | width: 160px; 26 | width: 10rem; 27 | } 28 | 29 | #test-form div{ 30 | margin-bottom: 12px; 31 | margin-bottom: 0.75rem; 32 | } 33 | 34 | #test-form label, #test-form button, #test-form input, #test-form select{ 35 | width: 160px; 36 | width: 160px; 37 | width: 10rem; 38 | } -------------------------------------------------------------------------------- /test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animatelo - Test page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
95 |

Animatelo

96 |
97 |
98 | 99 | 219 |
220 |
221 | 222 | 223 |
224 |
225 | 226 | 227 |
228 |
229 | 230 | 231 |
232 |
233 | 234 | 241 |
242 |
243 | 244 | 251 |
252 |
253 | 254 |
255 |
256 | 257 |
258 |
259 |
260 | 261 | 262 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | ; (function (window) { 2 | 'use strict'; 3 | var _targetId = '#test-target', 4 | _menuAnimationId = '#test-form-select-animations', 5 | _buttonAnimateId = '#test-form-btn-animate', 6 | _formId = '#test-form', 7 | _buttonResetId = '#test-form-btn-reset', 8 | _elmMenuAnimations = null, 9 | _elmButtonAnimate = null, 10 | _elmButtonReset = null, 11 | _elmForm = null, 12 | _submitedBy = '', 13 | _player = null, 14 | menuSelection = null, 15 | init = function () { 16 | document.addEventListener('DOMContentLoaded', function () { 17 | _logic(); 18 | }.bind(this)); 19 | }, 20 | _logic = function () { 21 | _getMenuAnimations(); 22 | _getButtonAnimate(); 23 | _getButtonReset(); 24 | _getForm(); 25 | _getMenuAnimationsSelectedValue(); 26 | _formListener(); 27 | _buttonAnimateListener(); 28 | _buttonResetListener(); 29 | }, 30 | _getMenuAnimations = function () { 31 | _elmMenuAnimations = document.querySelector(_menuAnimationId); 32 | }, 33 | _getButtonAnimate = function () { 34 | _elmButtonAnimate = document.querySelector(_buttonAnimateId); 35 | }, 36 | _getButtonReset = function () { 37 | _elmButtonReset = document.querySelector(_buttonResetId); 38 | }, 39 | _getForm = function () { 40 | _elmForm = document.querySelector(_formId); 41 | }, 42 | _getMenuAnimationsDefault = function () { 43 | _menuSelection = _elmMenuAnimations.selected.value; 44 | }, 45 | _getMenuAnimationsSelectedValue = function () { 46 | menuSelection = _elmMenuAnimations.options[_elmMenuAnimations.selectedIndex].value; 47 | }, 48 | _formListener = function () { 49 | _elmForm.addEventListener('submit', function (event) { 50 | event.preventDefault(); 51 | if (_submitedBy === 'animate') { 52 | _getMenuAnimationsSelectedValue(); 53 | _animate(); 54 | } else if (_submitedBy === 'reset') { 55 | _resetForm(); 56 | _resetPlayer(); 57 | } 58 | }.bind(this)); 59 | }, 60 | _resetForm = function () { 61 | _elmForm.reset(); 62 | }, 63 | _resetPlayer = function(){ 64 | if(_player){ 65 | _player.cancel(); 66 | _player = null; 67 | } 68 | }, 69 | _buttonAnimateListener = function () { 70 | _elmButtonAnimate.addEventListener('click', function (event) { 71 | _submitedBy = 'animate'; 72 | }.bind(this)); 73 | }, 74 | _buttonResetListener = function () { 75 | _elmButtonReset.addEventListener('click', function (event) { 76 | _submitedBy = 'reset'; 77 | }.bind(this)); 78 | }, 79 | _getCustomParameters = function () { 80 | var result = {}; 81 | for (var i = 0, len = _elmForm.length; i < len; i++) { 82 | var item = _elmForm[i]; 83 | var prop = item.dataset.prop; 84 | var value; 85 | if (prop) { 86 | if (prop === 'direction' || prop === 'fill') { 87 | value = item.value; 88 | } else { 89 | value = Number(item.value); 90 | } 91 | result[prop] = value; 92 | } 93 | } 94 | return result; 95 | }, 96 | _animate = function () { 97 | _resetPlayer(); 98 | var parameters = _getCustomParameters(); 99 | _player = window.animatelo[menuSelection](_targetId, parameters)[0]; 100 | }; 101 | init(); 102 | })(window) -------------------------------------------------------------------------------- /usage.md: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | To use Animatelo in your project, simply add two JavaScript files from CDN into your document's ``. 3 | 4 | ```html 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ``` 13 | 14 | # Installation via Bower of npm 15 | To install via Bower, simply do the following: 16 | 17 | ```bash 18 | $ bower install animatelo --save 19 | ``` 20 | or you can install via npm: 21 | 22 | ```bash 23 | $ npm install animatelo --save 24 | ``` 25 | 26 | and add a reference of your local `animatelo.min.js` file into your document's ``. 27 | 28 | # Supported animations 29 | Animatelo supports the following animations: 30 | 31 | * `bounce` 32 | * `flash` 33 | * `pulse` 34 | * `rubberBand` 35 | * `shake` 36 | * `headShake` 37 | * `swing` 38 | * `tada` 39 | * `wobble` 40 | * `jello` 41 | * `headShake` 42 | * `bounceIn` 43 | * `bounceInDown` 44 | * `bounceInLeft` 45 | * `bounceInRight` 46 | * `bounceInUp` 47 | * `bounceOut` 48 | * `bounceOutDown` 49 | * `bounceOutLeft` 50 | * `bounceOutRight` 51 | * `bounceOutUp` 52 | * `fadeIn` 53 | * `fadeInDown` 54 | * `fadeInDownBig` 55 | * `fadeInLeft` 56 | * `fadeInLeftBig` 57 | * `fadeInRight` 58 | * `fadeInRightBig` 59 | * `fadeInUp` 60 | * `fadeInUpBig` 61 | * `fadeOut` 62 | * `fadeOutDown` 63 | * `fadeOutDownBig` 64 | * `fadeOutLeft` 65 | * `fadeOutLeftBig` 66 | * `fadeOutRight` 67 | * `fadeOutRightBig` 68 | * `fadeOutUp` 69 | * `fadeOutUpBig` 70 | * `flipInX` 71 | * `flipInY` 72 | * `flipOutX` 73 | * `flipOutY` 74 | * `lightSpeedIn` 75 | * `lightSpeedOut` 76 | * `rotateIn` 77 | * `rotateInDownLeft` 78 | * `rotateInDownRight` 79 | * `rotateInUpLeft` 80 | * `rotateInUpRight` 81 | * `rotateOut` 82 | * `rotateOutDownLeft` 83 | * `rotateOutDownRight` 84 | * `rotateOutUpLeft` 85 | * `rotateOutUpRight` 86 | * `hinge` 87 | * `rollIn` 88 | * `rollOut` 89 | * `zoomIn` 90 | * `zoomInDown` 91 | * `zoomInLeft` 92 | * `zoomInRight` 93 | * `jackInTheBox` 94 | 95 | # The API 96 | 97 | Animatelo has a straightforward API, simply call: 98 | 99 | `window.animatelo.animation(selector, options);` 100 | 101 | # Usage 102 | Animatelo supports any valid CSS Selectors or one or more DOM nodes, so an animation can be applied to one element or simultaneously to different elements. 103 | 104 | [Try live example](//codepen.io/gibbok/pen/pRJXQq) 105 | ```js 106 | window.animatelo.flip('#hello'); 107 | ``` 108 | [Try live example](//codepen.io/gibbok/pen/ggaYgV) 109 | ```js 110 | window.animatelo.flash('p > span'); 111 | ``` 112 | [Try live example](//codepen.io/gibbok/pen/ZLQKvL) 113 | ```js 114 | var dom = document.getElementById('svg'); 115 | window.animatelo.rollIn(dom); 116 | ``` 117 | 118 | 119 | # Options 120 | It is possible to override the default behaviour for an animation, passing an Object containing one or more timing properties: 121 | 122 | `id` *Optional* 123 | 124 | A property unique to animate(): a DOMString with which to reference the animation. 125 | 126 | `delay` *Optional* 127 | 128 | The number of milliseconds to delay the start of the animation. Defaults to 0. 129 | 130 | `direction` *Optional* 131 | 132 | Whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal". 133 | 134 | `duration` *Optional* 135 | 136 | The number of milliseconds each iteration of the animation takes to complete. Defaults to 1000. keep in mind that your animation will not run if this value is 0. 137 | 138 | `fill` *Optional* 139 | 140 | Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "both". 141 | 142 | `iterations` *Optional* 143 | The number of times the animation should repeat. Defaults to 1, and can also take a value of Infinity to make it repeat for as long as the element exists. 144 | 145 | 146 | [Try live example](//codepen.io/gibbok/pen/vgNBpw) 147 | ```js 148 | var options = { 149 | duration: 1500, 150 | delay: 1000, 151 | iterations: Infinity, 152 | direction: 'alternate', 153 | fill: 'both', 154 | id: 'myAnimation' 155 | }; 156 | window.animatelo.zoomIn('#headline', options); 157 | ``` 158 | 159 | # Players 160 | Animatelo returns an Array of Animation Objects, each one represents a single animation player and provides playback controls and a timeline for an animation node or source. 161 | 162 | [See the W3C specification for more details.](//w3c.github.io/web-animations/#the-animation-interface) 163 | 164 | ```js 165 | var players = window.animatelo.wobble('#headline'); 166 | players[0].onfinish = (function() { 167 | console.log('Animation has ended and playState value is: ' + players[0].playState); 168 | }); 169 | ``` 170 | [Try live example](//codepen.io/gibbok/pen/jybNRL) 171 | 172 | 173 | ```js 174 | var anim1 = window.animatelo.shake('#headline1', { 175 | delay: 500, 176 | duration: 1500 177 | })[0]; 178 | anim1.onfinish = function() { 179 | var anim2 = window.animatelo.wobble('#headline2', { 180 | duration: 1500 181 | })[0]; 182 | }; 183 | ``` 184 | [Try live example](//codepen.io/gibbok/pen/ZLQBZJ/) 185 | 186 | # Extensibility 187 | Animatelo can be easily extended to support other animations using plugins. 188 | A plugin is a single JavaScript file which follows the [Namespacing Patterns](//addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing) conventions, and should be added into your project document's `` after `animatelo.min.js` file. 189 | 190 | Use the following boilerplate for your plugin: 191 | 192 | ```js 193 | /* 194 | Namespacing Patterns with Immediately-invoked Function Expressions. 195 | This plugin creates a very simple fade-in with a rotation effect animating 196 | opacity and transform properties of a DOM element. 197 | */ 198 | ; (function(animatelo) { 199 | 'use strict'; 200 | // add your plugin name 201 | animatelo.myAmazingPlugin = function(selector, options) { 202 | // add css properties to be animated 203 | var keyframeset = [ 204 | { 205 | opacity: 0, 206 | transform: 'rotate(-45deg)', 207 | offset: 0 // keyframe 0% 208 | }, { 209 | opacity: 1, 210 | transform: 'rotate(0deg) scale(1.5)', 211 | offset: 1 // keyframe 100% 212 | } 213 | ]; 214 | return animatelo._animate(selector, keyframeset, options); 215 | } 216 | })(window.animatelo = window.animatelo || {}); 217 | ``` 218 | and simply call it from your application code, for example: 219 | 220 | ```js 221 | // animate using your plugin! 222 | window.animatelo.myAmazingPlugin('#svg', { 223 | duration: 2000 224 | }); 225 | ``` 226 | [Try live example](//codepen.io/gibbok/pen/LxNpjq/) 227 | 228 | # Tools 229 | Keyframes-tool is a NodeJs command line tool which convert CSS Animations to a keyframes object suitable for Web Animations API. 230 | Objects returned from Keyframes-tool can be easily added to your Animatelo plugins facilitating moving animations from stylesheets to JavaScript. 231 | 232 | Visit [Keyframes-tool](//github.com/gibbok/keyframes-tool) project. 233 | --------------------------------------------------------------------------------