Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time


Meteor Transitioner

Read more about it here:

NOTE: the above article uses outdated syntax.


Use meteorite. Then add via:

mrt add transitioner


Set up your routes using the Meteor Router in the usual way. Then there are two additional reactive variables you can access:

// the current page that should be drawn on the screen

// the page that is currently coming onto the screen (null most of the time)

Whilst the transition is happening, the <body> will have the class transitioning. The Transitioner waits for a transition on the body to finish so it knows when you've finished animating. So unless you have a legitimate animation to do on the body, set up a proxy animation. Here's an example:

body {
  /* assuming you want a transparent body */
  background: rgba(0, 0, 0, 0);

  /* you'll need the standard -moz- etc -- you are using a CSS preproc right? */
  transition: background 0 linear 1s;
body.transitioning {
  /* a different color that happens to also be transparent */
  background: rgba(1, 0, 0, 0);


Call Meteor.Transitioner.setOptions to set the transitioner's options. Current options:

  • before/after - Provide callbacks to be run just before / after the transition happens.


See /example/slider in this application. Run it with mrt.

Something went wrong with that request. Please try again.