├── .gitignore ├── LICENSE ├── changelog ├── cloudbuild.yaml ├── index.js ├── package.json ├── readme.md ├── test ├── index.spec.js └── setup.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | package-lock.json 14 | 15 | # Directory for instrumented libs generated by jscoverage/JSCover 16 | lib-cov 17 | 18 | # Coverage directory used by tools like istanbul 19 | coverage 20 | 21 | # nyc test coverage 22 | .nyc_output 23 | 24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 25 | .grunt 26 | 27 | # Bower dependency directory (https://bower.io/) 28 | bower_components 29 | 30 | # node-waf configuration 31 | .lock-wscript 32 | 33 | # Compiled binary addons (https://nodejs.org/api/addons.html) 34 | build/Release 35 | 36 | # Dependency directories 37 | node_modules/ 38 | jspm_packages/ 39 | 40 | # TypeScript v1 declaration files 41 | typings/ 42 | 43 | # Optional npm cache directory 44 | .npm 45 | 46 | # Optional eslint cache 47 | .eslintcache 48 | 49 | # Optional REPL history 50 | .node_repl_history 51 | 52 | # Output of 'npm pack' 53 | *.tgz 54 | 55 | # Yarn Integrity file 56 | .yarn-integrity 57 | 58 | # dotenv environment variables file 59 | .env 60 | 61 | # next.js build output 62 | .next 63 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Ben Hammond 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 | -------------------------------------------------------------------------------- /changelog: -------------------------------------------------------------------------------- 1 | ### 2.1.1 2 | Adds unit tests and a flexible import that detects `default` 3 | 4 | ### 2.1.0 5 | Updates the minor version to change to the new animejs default export usage 6 | 7 | ### 2.0.0 8 | Updates the major version to map to a new version of animejs 9 | 10 | ### 1.0.2 11 | Refactors the code for IE compatibility 12 | 13 | ### 1.0.1 14 | Adds the this.$anime injection 15 | 16 | ### 1.0.0 17 | Initial release -------------------------------------------------------------------------------- /cloudbuild.yaml: -------------------------------------------------------------------------------- 1 | steps: 2 | - name: 'gcr.io/cloud-builders/npm' 3 | args: ['install'] 4 | - name: 'gcr.io/cloud-builders/npm' 5 | args: ['test'] -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | var anime = require('animejs'); 5 | if (anime.default) { 6 | anime = anime.default; 7 | } 8 | 9 | function install(Vue) { 10 | Vue.directive('anime', { 11 | bind: function bind(targets, binding) { 12 | var opts = Object.assign({}, binding.value, { targets: targets }); 13 | anime(opts); 14 | }, 15 | update: function bind(targets, binding) { 16 | var opts = Object.assign({}, binding.value, { targets: targets }); 17 | anime(opts); 18 | } 19 | }); 20 | Vue.prototype.$anime = anime; 21 | } 22 | 23 | module.exports = { 24 | install: install 25 | }; 26 | })(); 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-animejs", 3 | "version": "2.1.2", 4 | "description": "A simple Vue plugin for binding Anime.js", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/BenAHammond/vue-anime.git" 12 | }, 13 | "keywords": [ 14 | "vue", 15 | "anime", 16 | "animejs", 17 | "vuejs", 18 | "animation", 19 | "css" 20 | ], 21 | "author": "Ben Hammond", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/BenAHammond/vue-anime/issues" 25 | }, 26 | "homepage": "https://github.com/BenAHammond/vue-anime#readme", 27 | "dependencies": { 28 | "animejs": "~3" 29 | }, 30 | "devDependencies": { 31 | "@vue/test-utils": "^1.0.0-beta.28", 32 | "chai": "^4.2.0", 33 | "jsdom": "^13.2.0", 34 | "jsdom-global": "^3.0.2", 35 | "mocha": "^5.2.0", 36 | "mocha-webpack": "^2.0.0-beta.0", 37 | "preload-webpack-plugin": "^3.0.0-beta.3", 38 | "svgdom": "0.0.18", 39 | "vue": "^2.5.22", 40 | "vue-template-compiler": "^2.5.22", 41 | "webpack": "^4.29.0", 42 | "webpack-node-externals": "^1.7.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### Vue-Anime 2 | 3 | Simple Vue bindings for [Anime.js](https://github.com/juliangarnier/anime/) 4 | 5 | #### Install 6 | 7 | ```bash 8 | $ npm install --save vue-animejs 9 | ``` 10 | 11 | ```js 12 | import VueAnime from 'vue-animejs'; 13 | 14 | Vue.use(VueAnime) 15 | ``` 16 | 17 | #### Usage 18 | 19 | > Adds a simple directive named `v-anime` that passes all arguments directly to [anime.js](https://github.com/juliangarnier/anime/) 20 | ```html 21 |
22 | ``` 23 | 24 | > Also adds this.$anime to your components 25 | ```js 26 | export default { 27 | name: "my-component", 28 | data() { 29 | return {}; 30 | }, 31 | mounted() { 32 | const targets = this.$el; 33 | this 34 | .$anime 35 | .timeline() 36 | .add({ 37 | targets, 38 | translateX: 250, 39 | easing: 'easeOutExpo', 40 | }) 41 | .add({ 42 | targets, 43 | translateX: 250, 44 | easing: 'easeOutExpo', 45 | }); 46 | /* ... etc ... */ 47 | }, 48 | } 49 | ``` 50 | -------------------------------------------------------------------------------- /test/index.spec.js: -------------------------------------------------------------------------------- 1 | import { createLocalVue, shallowMount, Component } from '@vue/test-utils' 2 | import VueAnime from '../index.js' 3 | import Vue from 'vue'; 4 | 5 | describe('VueAnime', () => { 6 | it('should export the expected properties on the component', (done) => { 7 | const testComp = 'hello-world'; 8 | const testCompBody = { 9 | template: '
', 10 | mounted() { 11 | expect(typeof this.$anime).to.equal('function'); 12 | done(); 13 | } 14 | }; 15 | const localVue = createLocalVue(); 16 | 17 | localVue.use(VueAnime) 18 | Vue.component(testComp, testCompBody); 19 | const wrapper = shallowMount(localVue.component(testComp), { localVue }); 20 | }) 21 | }) -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | // test setup here 2 | var window = require('svgdom') 3 | var document = window.document; 4 | require('jsdom-global')() 5 | 6 | 7 | global.expect = require('chai').expect; 8 | // global.Vue = { 9 | // directive: (a, b) => { 10 | // console.log('Directive invoked with', a, b); 11 | // } 12 | // } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // webpack.config.js 2 | const nodeExternals = require('webpack-node-externals') 3 | 4 | module.exports = { 5 | devtool: 'inline-cheap-module-source-map', 6 | externals: [nodeExternals()], 7 | mode: 'development', 8 | output: { 9 | // ... 10 | // use absolute paths in sourcemaps (important for debugging via IDE) 11 | devtoolModuleFilenameTemplate: '[absolute-resource-path]', 12 | devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' 13 | } 14 | } --------------------------------------------------------------------------------