We highly suggest starting using https://github.com/artf/grapesjs-cli for your new plugin projects
This is a plugin for grapejs users to implement and manipulate lottie animation on their browsers. Lottie airbnb animations can be found in the lottie market place. For more information, see Lottie. Lottie is not affliated with airbnb, but users all over the world create amazing svg animations.
- Clone this repository
git clone https://github.com/khalifagates/grapejs-lottie-plugin.git Lottie-plugin
- Install dependencies
npm i
and run the local servernpm start
- Start creating your plugin from
src/index.js
- Update README
- When you're ready, build your source with
npm run build
- Enjoy
- Plugin name:
Lottie-plugin
- Components
lottie-player
- Blocks
lottie-player
...
Option | Description | Default |
---|---|---|
src |
Source URL of the lottie animation | null |
- CDN
https://unpkg.com/lottie-plugin.min.js
- NPM
npm i lottie-plugin.min.js
- GIT
git clone https://github.com/khalifagates/grapejs-lottie-plugin.git
Directly in the browser
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="path/to/lottie-plugin.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
// ...
plugins: ['lottie-plugin'],
pluginsOpts: {
'lottie-plugin': { /* options */ }
}
});
</script>
Modern javascript
import grapesjs from 'grapesjs';
import yourPluginName from 'lottie-plugin';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [lottie-plugin],
pluginsOpts: {
[lottie-plugin]: { /* options */ }
}
// or
plugins: [
editor => lottie-plugin(editor, { /* options */ }),
],
});
Clone the repository
$ git clone https://github.com/khalifagates/grapejs-lottie-plugin.git
$ cd grapejs-lottie-plugin
Install dependencies
$ npm i
Start the dev server
$ npm start
BSD 3-Clause