[![NPM][npm-badge-img]][npm-badge-link]
[![downloads][downloads-badge]][npmcharts]
[![Circle CI Status][circle-ci-badge]][circle-ci-url]
[![Code Climate][codeclimate-badge]][codeclimate-url]
[![Coverage Status][coverage-badge]][coverage-url]
[![Ember Observer Score][ember-observer-badge]][ember-observer-url]

ember-cli-bodymovin

A little wrapper for Bodymovin, an After Effects plugin for exporting animations to svg/canvas/html + js.

Installation

ember install ember-cli-bodymovin

Usage

Rendering your animation out of AE using the bodymovin extension will generate a json representation of your animation. COol.

All you need to do is drop your animation file into your app's public dir public/animations/coolFileName.json and it's ready to use.

##### Basic usage
{{body-movin path='coolFileName'}}

##### External Files

Sometimes you may need or want to host your animation json somewhere else. No problem, just set external=true and include the full path.
``
{{body-movin
path='https://jklb-os.s3.amazonaws.com/bodymovin/menu.json'
external=true}}
`

Interacting with your animation

#### Reverse
Reverse the play direction on click. This is useful for menu animations. It simply will flip the play direction on click.
`hbs
{{ body-movin path='menu' clickAction='reverse' loop=false autoplay=false }}
`
!reverse preview

#### Play / Pause

Toggling the play state seems like a thing people would want to do. I think? Idk but here it is:
`hbs
{{ body-movin path='reel' clickAction='playPause' }}

`
!playPause preview

#### Create your own
You have the power to create your own actions- just hook into the click event.

`hbs
{{!-- templates/component/playPause-animation.hbs --}}

{{ body-movin path='reel' setup=(action setup) click=(action playPause) }}

`

`javascript
// component/playPause-animation.js

import Ember from 'ember';

export default Ember.Component.extend({
animation: null,
state: {
playing: true
},

actions: {
setup(data) {
this.set('animation', data);
},

playPause() {
let state = this.get('state');
let animation = this.get('animation');

if (state.playing) {
animation.pause();
this.set('state.playing', false);
} else {
animation.play();
this.set('state.playing', true);
}
}

}

});

`

Options

`
{{body-movin
path='loading'
renderStyle='canvas'
autoplay=false
autorender=true
rendererSettings=myRendererSettings
clickAction="playPause" // playPause or reverse
click=(action 'submit') // Handle in your component/controller
setup=(action 'mySetup') // Handle in your component/controller
}}
`

#### animation (String)
The file name OR url of your animation.

#### external (Boolean)
Set this to true if you're including an external source as your path.

#### renderType (String)
Set to 'svg' / 'canvas' / 'html' to set the renderer. If you leave it of, we'll default to our favorite- SVG.

#### rendererSettings (Object)
Some additional renderer settings for max control.
`
rendererSettings: {
context: canvasContext, // the canvas context
scaleMode: 'noScale',
clearCanvas: false,
progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
}
`


#### loop (String)
true / false / number

#### autoplay (Boolean)
true / false

Contributing

Hook it up!

Running

* ember serve
* Visit your app at http://localhost:4200.

Running Tests

* npm test (Runs ember try:each to test your addon against multiple Ember versions)
* ember test
* ember test --server

Building

* ember build`

For more information on using ember-cli, visit http://ember-cli.com/.

[npm-badge-img]: https://badge.fury.io/js/ember-cli-bodymovin.svg
[npm-badge-link]: http://badge.fury.io/js/ember-cli-bodymovin
[ember-observer-badge]: http://emberobserver.com/badges/ember-cli-bodymovin.svg
[ember-observer-url]: http://emberobserver.com/addons/ember-cli-bodymovin
[codeclimate-badge]: https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin/badges/gpa.svg
[codeclimate-url]: https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin
[coverage-badge]: https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin/badges/coverage.svg
[coverage-url]: https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin/coverage
[circle-ci-badge]: https://img.shields.io/circleci/project/github/jakeleboeuf/ember-cli-bodymovin.svg
[circle-ci-url]: https://circleci.com/gh/jakeleboeuf/ember-cli-bodymovin
[npmcharts]: http://npmcharts.com/compare/ember-cli-bodymovin
[downloads-badge]: https://img.shields.io/npm/dw/ember-cli-bodymovin.svg