This package is deprecated, use meteor-transitioner instead.

Bender is a package that empowers your application with page transitions. There is an example app and you can click here to see it in action.

Dependencies

• Meteor 1.0

Getting Started

To install Bender add it to meteor

meteor add gabrielpoca:bender

To use Bender you need to initialize it with the page container as an argument.

Template.layout.rendered = function() {
  Bender.initialize(this.find('#content-container'));
};

You also need some css to make the animations work. Most animations need your pages to use position: absolute. Here is some css to get you started. You can see the app on the example folder for more information.

.layout {
  height: 100%;
  /* to prevent the scrollbars from showing during an animation */
  overflow: hidden;
  width: 100%;
}

.page {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  vertical-align: top;
  width: 100%;
}

/* to make sure the page being animated is on top */
.velocity-animating {
  z-index: 99;
}

Animating elements

By default Bender will have no animation after being initialized. You can change this by calling the animate function.

Bender.animate('slideRight');

It is also possible to use with Iron.Router, but instead of Router.go use Bender.go and pass in the animation as an option. Everything else should work as expected with the Iron.Router.

Bender.go('trips.show', { _id: this.id }, { animation: 'slideDown' });

List of available animations

Name	Description
slideLeft	Slides the current page left
slideRight	Slides the current page right
slideOverDown	Slides the new page over the current from bellow
slideOverUp	Slides the new page over the current from above
fadeIn	Slides the new page over the current from above
fadeOut	Slides the new page over the current from above
none	Removes animations

Roadmap

• More transition animations
• Make bender more configurable (animation duration, easing, etc...)

License

Bender is © 2014-2015 GB-Software As A Service, Lda. It is free software and may be redistributed under the terms specified in the LICENSE file.