Animate Routes with IronRouter and VelocityJS

readme.md

Let's animate our Meteor sites!

Using VelocityJS and IronRouter.

• Inspired by comicsans.ro | GitHub

layout.html

<template name="layout">
  <div class="container">
    {{> yield}}
  </div>
</template>

layout.js

Template.layout.events({
  'click .btn': function () {
    // this is the transition out
    $('.transition').velocity('transition.bounceUpOut', { 
      stagger: 500 / 3,
      duration: 500,
      'complete': function () {
        Router.go('someOtherTemplateName');
      }
    });
  }
});

router.js

Router.configure({
  layoutTemplate: 'layout'
});

Router.map(function() {
  this.route('uniqueTemplateName', {
    path: '/',
    template: 'uniqueTemplateName'
  });
});

style.css

.transition {
  opacity: 0
}

uniqueTemplate.html

<template name="uniqueTemplateName">
  <div class="transition">
    <div class="content">
      lorem ipsum ....
    </div>
  </div>
</template>

uniqueTemplate.js

//This will control the entry transition
Template.uniqueTemplateName.rendered = function () {
  $('.transition').velocity('transition.bounceUpIn', { //you can use any velocity action
    stagger: 500 / 3,
    duration: 500
  });
};