├── .gitignore ├── LICENSE ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | index.min.js 3 | node_modules 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Luke Jackson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Actuate 2 | 3 | > ac·tu·ate /ˈak(t)SHəˌwāt/ : cause (a machine or device) to operate. 4 | 5 | A shiny new (~500b) vanilla implementation of what was previously [A tiny jQuery wrapper for animate.css](https://github.com/lukejacksonn/Actuate/releases/tag/v1.0.0) which allows for _one line easy_ actuation of CSS animation sequences with _thenable_ chaining. 6 | 7 | Check out this [example on CodePen](http://codepen.io/lukejacksonn/pen/dvaPPG). 8 | 9 | ![Actuate Banner](https://cloud.githubusercontent.com/assets/1457604/24648564/34adf08c-194e-11e7-9c12-dd97d85363b8.gif) 10 | 11 | ## Getting Started 12 | 13 | > Note: this library uses [promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) for which you [might need](http://caniuse.com/#feat=promises) a [polyfill](https://polyfill.io/v2/docs/) 14 | 15 | ### Include the library 16 | Directly in the `head` of your document from the CDN 17 | ```html 18 | 19 | ``` 20 | or require it in your source files after `npm install actuatejs` 21 | ```js 22 | import Actuate from 'actuatejs' // ES6 23 | ``` 24 | 25 | ### Define a CSS animation 26 | You can define your own or employ a library like [animate.css](https://github.com/daneden/animate.css) 27 | ```css 28 | @keyframes pulse { 29 | from { transform: scale(1) } 30 | 50% { transform: scale(1.05) } 31 | to { transform: scale(1) } 32 | } 33 | .pulse { 34 | animation-name: pulse; 35 | } 36 | ``` 37 | 38 | ### Run with javascript 39 | In a script tag before the closing `body` tag 40 | ```js 41 | Actuate('pulse')(document.body) 42 | .then($ => console.log('Finished animating', $)) 43 | .catch($ => console.log($, 'was already animating')) 44 | ``` 45 | 46 | ## Usage 47 | 48 | The API is intended to be as simple as possible providing low overhead syntax for animation sequencing, chaining of sequences and `animationEnd` detection. 49 | 50 | ### Single Animation 51 | 52 | To animate an HTML element, first pass the `Actuate` function the name of the CSS `animation` you would like to apply. This primes the animation ready to be bound to a `target` element (in this case `document.body`) which is passed as the second argument: 53 | 54 | ```js 55 | Actuate('tada')(document.body) 56 | ``` 57 | 58 | Once the function has received both arguments, the animation will initiate. You can pass in any single HTML element as the `target` element. For example using the native [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method: 59 | 60 | ```js 61 | Actuate('tada')(document.querySelector('.class')) 62 | Actuate('tada')(document.querySelector('#id')) 63 | Actuate('tada')(document.querySelector('input[type=text]')) 64 | ``` 65 | 66 | ### Sequential Animations 67 | 68 | Often it is desirable to run animations one after another. There is no native method that assists this behavior. The Actuate function accepts a space delimited list of named CSS animations as the first argument and handles this complexity for you: 69 | 70 | ```js 71 | Actuate('rollIn tada rollOut')(document.body) 72 | ``` 73 | 74 | You can also pass in an array of named animations if you prefer: 75 | 76 | ```js 77 | Actuate(['rollIn', 'tada', 'rollOut'])(document.body) 78 | ``` 79 | 80 | When one animation finishes the next one will start until there are no more to apply. 81 | 82 | ### Animation End 83 | 84 | The Actuate function returns a promise which means you can easily declare a `then` function which is guaranteed to execute once all the animations in a sequence have been applied. 85 | 86 | ```js 87 | Actuate('tada fadeOut')(document.body) 88 | .then($ => console.log('Finished Animating', $)) 89 | ``` 90 | 91 | The `then` function gets passed the `target` element. In the above case `$ === document.body`. 92 | 93 | ### Already Animating 94 | 95 | The only time Actuate will throw an _error_ is if you try animate an element that is already animating: 96 | 97 | ```js 98 | addEventListener('click', () => 99 | Actuate('tada')(document.body) 100 | .then($ => console.log('Finished')) 101 | .catch($ => console.log('Already Animating')) 102 | ) 103 | ``` 104 | 105 | ### Chaining sequences 106 | 107 | The Actuate function takes advantage of [partial appliction](https://en.wikipedia.org/wiki/Partial_application) which means that animation sequences can be defined without having to immediately specify a `target` element. 108 | 109 | ```js 110 | var intro = Actuate('rollIn') 111 | var showoff = Actuate('bounce tada bounce') 112 | var outro = Actuate('rollOut') 113 | ``` 114 | 115 | You can then provide a `target` element and let it flow through a chain of predefined animation sequences: 116 | 117 | ```js 118 | Promise.resolve(document.body) 119 | .then(intro) 120 | .then(showoff) 121 | .then(outro) 122 | ``` 123 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | const event = 'animationend' 3 | 4 | const Actuate = animations => $ => new Promise ((resolve, reject) => { 5 | 6 | const commands = Array.isArray(animations) ? 7 | animations : animations.split(' ') 8 | 9 | const done = _ => { 10 | $.classList.remove('animated') 11 | $.classList.remove(commands[0]) 12 | $.removeEventListener(event, done) 13 | commands.shift() 14 | commands.length ? animate() : resolve($) 15 | } 16 | 17 | const animate = _ => { 18 | $.addEventListener(event, done) 19 | $.classList.add('animated') 20 | $.classList.add(commands[0]) 21 | } 22 | 23 | $.classList.contains('animated') ? 24 | reject($) : animate() 25 | 26 | }); 27 | 28 | if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') 29 | module.exports = Actuate 30 | else window.Actuate = Actuate 31 | 32 | })() 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "actuatejs", 3 | "version": "1.0.1", 4 | "description": "One line easy actuation of CSS animation sequences.", 5 | "main": "index.min.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/lukejacksonn/Actuate.git" 9 | }, 10 | "keywords": [ 11 | "css", 12 | "animate", 13 | "animation", 14 | "sequencing", 15 | "promise" 16 | ], 17 | "author": "Luke Jackson ", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/lukejacksonn/Actuate/issues" 21 | }, 22 | "homepage": "https://github.com/lukejacksonn/Actuate#readme", 23 | "scripts": { 24 | "build": "babel index.js > index.min.js", 25 | "minify": "uglifyjs -c -m -o index.min.js -- index.min.js", 26 | "prepublish": "npm run build && npm run minify" 27 | }, 28 | "babel": { 29 | "presets": [ 30 | "env" 31 | ] 32 | }, 33 | "devDependencies": { 34 | "babel-cli": "^6.24.0", 35 | "babel-preset-env": "^1.3.2", 36 | "uglify-js": "^2.8.21" 37 | } 38 | } 39 | --------------------------------------------------------------------------------