├── .gitignore
├── LICENSE.md
├── README.md
├── build
└── rollup.config.js
├── package-lock.json
├── package.json
└── src
├── LottieAnimation.vue
└── wrapper.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # lottie-vuejs
3 | 
4 | 
5 | 
6 | 
7 |
8 | 
9 | **lottie-vuejs is currently in development! Use in production environment at your own risk**
10 |
11 | lottie-vuejs is a simple VueJS wrapper for [lottie-web](https://github.com/airbnb/lottie-web).
12 | It encompasses critical lottie-web functionality into an vue component plugin.
13 | Utilize lottie-vuejs to quickly and almost effortlessly bring lottie functionality into your VueJS project.
14 |
15 | ## Why Lottie?
16 | Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively!
17 |
18 | Designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:
19 |
20 | #### Flexible After Effects features
21 | Lottie supports solids, shape layers, masks, alpha mattes, trim paths, and dash patterns.
22 |
23 | #### Manipulate your animation any way you like
24 | You can go forward, backward, and most importantly you can program your animation to respond to any interaction.
25 |
26 | #### Small file sizes
27 | Bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.
28 |
29 | [Learn more](http://airbnb.design/introducing-lottie/) › http://airbnb.design/lottie/
30 |
31 | Looking for lottie files › https://www.lottiefiles.com/
32 |
33 | ## Install
34 | Add to lottie-vuejs to your project
35 | ```bash
36 | npm install --save lottie-vuejs
37 | ```
38 |
39 | Install lottie-vuejs globally
40 | ```bash
41 | # Install globally (recommended)
42 | npm install -g lottie-vuejs
43 | ```
44 | Add to global scope
45 | ```js
46 | import Vue from 'vue'
47 | import LottieAnimation from "lottie-vuejs/src/LottieAnimation.vue"; // import lottie-vuejs
48 |
49 | Vue.use(LottieAnimation); // add lottie-animation to your global scope
50 |
51 | new Vue({
52 | render: h => h(App)
53 | }).$mount('#app')
54 |
55 | ```
56 | **OR**
57 | ```html
58 |
70 | ```
71 |
72 | ## Usage
73 | Basic
74 | ```html
75 |
78 | ```
79 |
80 | Advanced
81 | ```html
82 |
93 | ```
94 | Configuration
95 | * **path**:
96 | The relative path to the animation object (starts in your public folder) e.g. `animations/my-cool-animation.json` or an absolute path e.g. `http://www.mysite.com/animations/my-cool-animation.json`.
97 | * **speed**:
98 | type: Number
99 | required: false
100 | default: 1
101 | * **width**:
102 | type: Number
103 | required: false
104 | default: -1 //defaults to 100%, Number is in pixels
105 | * **height**:
106 | type: Number
107 | required: false
108 | default: -1 //defaults to 100%, Number is in pixels
109 | * **loop**:
110 | type:Boolean
111 | required: false
112 | default: true
113 | * **autoPlay**:
114 | type:Boolean
115 | required: false
116 | default: true
117 | * **loopDelayMin**:
118 | type: Number
119 | required: false
120 | default: 0
121 | * **loopDelayMax**:
122 | type: Number
123 | required: false
124 | default: 0
125 | * **@AnimControl**:
126 | type: Event
127 | required: false
128 | Returns the lottie-web animation controller for custom event hookup & direct access to the lottie instance. [Read the lottie-web usage section for more info](https://github.com/airbnb/lottie-web)
129 |
130 | ## build
131 | Running the build script results in 3 compiled files in the `dist` directory, one for each of the `main`, `module`, and `unpkg` properties listed in your package.json file. With these files generated, you're ready to go!
--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from 'rollup-plugin-commonjs'; // Convert CommonJS modules to ES6
2 | import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
3 | import buble from 'rollup-plugin-buble'; // Transpile/polyfill with reasonable browser support
4 | import pkg from '../package.json';
5 |
6 | export default {
7 | input: 'src/wrapper.js', // Path relative to package.json
8 | external: ['axios', 'lottie-web'],
9 | output: [
10 | { file: pkg.main, format: 'umd', exports: 'named', name: 'LottieAnimation', globals: { 'lottie-web':'lottie-web', 'axios':'axios'} },
11 | { file: pkg.module, format: 'es', exports: 'named', name: 'LottieAnimation', globals: { 'lottie-web':'lottie-web', 'axios':'axios'} },
12 | { file: pkg.unpkg, format: 'iife', exports: 'named', name: 'LottieAnimation', globals: { 'lottie-web':'lottie-web', 'axios':'axios'} }
13 | ],
14 | plugins: [
15 | commonjs(),
16 | vue({
17 | css: true, // Dynamically inject css as a