Skip to content

bekzod/ember-animatable

Repository files navigation

ember-animatable Ember Observer Score npm version

Ember Mixin which provides convenient way using animate.css animations in components. Demo

Mixin Method

  • animate(animationType:string, animationTarget:string): promise
    animationType: animation type bounce, full list can be found here
    animationTarget: css selector .class-name (optional if not provided component is the target)
    returns: promise which is resolved when animation finishes

Standalone Function

  • animate(animationTarget:string/element, animationType:string): promise
    animationTarget: css selector .class-name animationType: animation type bounce, full list can be found here
    returns: promise which is resolved when animation finishes

Import as mixin

import Ember from 'ember';
import AnimatableMixin from 'ember-animatable';

export default Ember.Component.extend(AnimatableMixin, {
    click() {
      let anim = this.animate('pulse', '.animation-target');
      anim.then(function() {
        console.log('animation complete')
      });
    }
});

Import as function

import Ember from 'ember';
import { animate } from 'ember-animatable';

export default Ember.Component.extend({
    click() {
      let anim = animate('.animation-target', 'pulse');
      anim.then(function() {
        console.log('animation complete')
      });
    }
});

Use what you need

By default addon will import all css animations provided by animate.css, but usually you don't need all css animations, so you can specify which once to import in app config.

 let app = new EmberApp(defaults, {
  'ember-animatable': {
    include: ['pulse', 'bounceIn'] // pulse and bounceIn animation will be imported
  }
});

Installation

  ember install ember-animatable