- NOTE: This package is not maintained anymore.
- If you want to help, please reach out to [email protected]

Meteor Template Animations

A simple API to animate DOM elements with Meteor.
Demo

Installation

meteor add gwendall:template-animations

Details

This package dynamically sets classes to DOM elements whenever they get inserted or removed.
Based on another simple wrapper for uihooks.

Example

Template.layout.animations({
  ".item": {
    container: ".container", // container of the ".item" elements
    insert: {
      class: "fade-in", // class applied to inserted elements
      before: function(attrs, element, template) {}, // callback before the insert animation is triggered
      after: function(attrs, element, template) {}, // callback after an element gets inserted
      delay: 500 // Delay before inserted items animate
    },
    remove: {
      class: "fade-out", // class applied to removed elements
      before: function(attrs, element, template) {}, // callback before the remove animation is triggered
      after: function(attrs, element, template) {}, // callback after an element gets removed
      delay: 500 // Delay before removed items animate
    },
    animateInitial: true, // animate the elements already rendered
    animateInitialStep: 200, // Step between animations for each initial item
    animateInitialDelay: 500 // Delay before the initial items animate
  }
});

That's it. All .item elements that are direct children of the .container element will be applied a fade-in class on insert, and a fade-out class before being removed from the DOM.

See the demo code for a complete example.

Note: you can dynamically transform the inserted elements and set their in and out animations by passing a function returning the desired class(es).

Template.layout.animations({
  ".item": {
    container: ".container", // container of the ".item" elements
    in: function(element, tpl) {
      // element is the element being animated
      // tpl is the template instance
      return "fade-in";
    }
  }
});