├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── index.js └── package.json /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | test: 7 | name: Run tests 8 | strategy: 9 | matrix: 10 | node-version: 11 | - '6.x' 12 | - '8.x' 13 | - '10.x' 14 | - '12.x' 15 | - '14.x' 16 | - '16.x' 17 | - '18.x' 18 | - '20.x' 19 | - '22.x' 20 | runs-on: ubuntu-latest 21 | steps: 22 | - name: Checkout sources 23 | uses: actions/checkout@v4 24 | - name: Install Node.js ${{matrix.node-version}} 25 | uses: actions/setup-node@v4 26 | with: 27 | node-version: ${{matrix.node-version}} 28 | - name: Install dependencies 29 | run: npm install 30 | - name: Run tests 31 | run: npm test 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | tmp/ 4 | dist/ 5 | npm-debug.log* 6 | .DS_Store 7 | .nyc_output 8 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Yoshua Wuyts 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 | # nanoanimation 2 | [![npm version][2]][3] [![build status][4]][5] 3 | [![downloads][8]][9] [![js-standard-style][10]][11] 4 | 5 | Safety wrapper around the Web Animations API. Allows animations to safely be 6 | defined in Node, and browsers that don't support the Web Animation API. Default 7 | behavior is to do nothing. 8 | 9 | ## Usage 10 | ```js 11 | var animation = require('nanoanimation') 12 | var css = require('sheetify') 13 | var html = require('bel') 14 | 15 | css('tachyons') 16 | 17 | var el = html` 18 |
move.play()}> 19 | Hello planet 20 |
21 | ` 22 | 23 | var keyFrames = [ 24 | { transform: 'translateY(0%)' }, 25 | { transform: 'translateY(100%)' } 26 | ] 27 | 28 | var timingProperties = { 29 | duration: 1000, 30 | fill: 'forwards' 31 | } 32 | 33 | var animate = animation(keyFrames, timingProperties) 34 | var move = animate(el, function () { 35 | console.log('event ended') 36 | }) 37 | document.body.appendChild(el) 38 | ``` 39 | 40 | ## API 41 | ### `animate = animation(keyFrames, timingProperties)` 42 | Create a new animation. 43 | 44 | ### `WebAnimation = animate(el, [done])` 45 | Apply an animation to an element, calls `done` when finished. Returns the 46 | nativate Web Animation object. 47 | 48 | ## See Also 49 | - [Using the Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) 50 | 51 | ## License 52 | [MIT](https://tldrlegal.com/license/mit-license) 53 | 54 | [0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square 55 | [1]: https://nodejs.org/api/documentation.html#documentation_stability_index 56 | [2]: https://img.shields.io/npm/v/nanoanimation.svg?style=flat-square 57 | [3]: https://npmjs.org/package/nanoanimation 58 | [4]: https://img.shields.io/travis/choojs/nanoanimation/master.svg?style=flat-square 59 | [5]: https://travis-ci.org/choojs/nanoanimation 60 | [6]: https://img.shields.io/codecov/c/github/choojs/nanoanimation/master.svg?style=flat-square 61 | [7]: https://codecov.io/github/choojs/nanoanimation 62 | [8]: http://img.shields.io/npm/dm/nanoanimation.svg?style=flat-square 63 | [9]: https://npmjs.org/package/nanoanimation 64 | [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square 65 | [11]: https://github.com/feross/standard 66 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var assert = require('nanoassert') 2 | 3 | var placeholder = { 4 | cancel: noop, 5 | finish: noop, 6 | pause: noop, 7 | play: noop, 8 | reverse: noop, 9 | finished: { 10 | then: Promise.resolve // Animations can be chained with promises or property definitions 11 | } 12 | } 13 | 14 | module.exports = animate 15 | 16 | function animate (keyframes, timingProperties) { 17 | assert.equal(typeof keyframes, 'object', 'nanoanimation: keyframes should be an array or an object') 18 | assert.ok(typeof timingProperties === 'object' || typeof timingProperties === 'number', 'nanoanimation: timingProperties should be type object or number') 19 | 20 | return function (element, _done) { 21 | var done = _done || noop 22 | assert.equal(typeof element, 'object', 'nanoanimation: element should be type object') 23 | assert.equal(typeof done, 'function', 'nanoanimation: done should be type function') 24 | 25 | if (typeof window === 'undefined' || !('AnimationEvent' in window)) { 26 | done() 27 | return placeholder 28 | } 29 | 30 | var animation = element.animate(keyframes, timingProperties) 31 | animation.pause() 32 | animation.onfinish = done 33 | return animation 34 | } 35 | } 36 | 37 | function noop () {} 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nanoanimation", 3 | "description": "Safety wrapper around the Web Animation API", 4 | "repository": "choojs/nanoanimation", 5 | "version": "2.1.0", 6 | "scripts": { 7 | "deps": "dependency-check . && dependency-check . --extra --no-dev", 8 | "start": "node .", 9 | "test": "standard && npm run deps" 10 | }, 11 | "dependencies": { 12 | "nanoassert": "^1.1.0" 13 | }, 14 | "devDependencies": { 15 | "dependency-check": "^2.9.1", 16 | "standard": "^10.0.3", 17 | "tape": "^4.8.0" 18 | }, 19 | "keywords": [ 20 | "animate", 21 | "web", 22 | "nano" 23 | ], 24 | "license": "MIT" 25 | } 26 | --------------------------------------------------------------------------------