Finally, animations between routes! This package is tightly integrated with Iron Router and VelocityJS.
Check out the live demo.
waitOn
?meteor add ccorcos:transitioner
First you need to add Iron Router and make some routes. Then you'll need to wrap the {{>yield}}
in your iron layout with the transitioner block helpers:
{{#transitioner}}
{{> yield}}
{{/transitioner}}
Then you can specify transitions between routes using the following:
Transitioner.transition({
fromRoute: 'fromRouteName',
toRoute: 'toRouteName',
velocityAnimation: {
in: animation,
out: animation
}
})
An animation
can be one of three things.
The easiest is to pass a VelocityJS UI Pack pre-registered effect as a string. For example, 'transition.swoopIn', 'transition.whirlOut', 'transition.slideLeftIn', etc. A you can find a demo of these effects in the dropdown of the "Effects: Pre-Registered" section. You can also check out the source to see how to register your own effects. For example:
$.Velocity.RegisterEffect 'transition.pushLeftIn',
defaultDuration: 500,
calls: [
[{translateX: ['0%', '-100%'], translateZ: 0, easing: "ease-in-out", opacity: [1, 1]}]
]
Setting translateZ
enforces GPU usage and the opacity: [1, 1]
dummy variable prevents a flash at the beginning of the animation.
If you want to pass options like easing or duration, you pass an array of velocity arguements.
You can create custom animations just like you would with _uihooks.insertElement
and _uihooks.removeElement
. For example:
slideRight =
in: (node, next) ->
$node = $(node)
$.Velocity.hook($node, "translateX", "100%");
$node.insertBefore(next)
.velocity {translateX: ['0%', '100%']},
duration: 500
easing: 'ease-in-out'
queue: false
out: (node) ->
$node = $(node)
$node.velocity {translateX: '-100%'},
duration: 500
easing: 'ease-in-out'
queue: false
complete: ->
$node.remove()
You can also set a default animation between all routes using Transitioner.defualt
. For example:
Transitioner.default
in: 'transition.fadeIn'
out: 'transition.fadeOut'
Build your app such that every page has it's own self-contained style. You'll also need every div up to your transitioner to have a specified height and width, typically 100%.