Animation using MeteorJS packages with Velocity.js

There are a few packages that help us perform animation. In this section, we will see how to perform page transition on every route change. Also, we will see how to animate elements using a MeteorJS package.

Animation packages that support page transitions are mostly router-specific. We will use the ccorcos:transitioner package that is specific to iron-router. Let's resume our animation party.

Create a MeteorJS application, such as AnimationPartyTransition. Add the iron:router and ccorcos:transitioner packages to the application. Remove the hello template-related code totally from the .js and HTML files. We need a layout that will be rendered by iron-router. Add the following layout code to AnimationPartyTransition.html:

<template name="homeLayout">
  {{> yield}}
</template>

To demonstrate page transitions, we need two routes. Add the following routes to the client block inside AnimationPartyTransition.js:

  Router.map(function...