Relies on:
meteor add zeroasterisk:flow-dynamicsjs-animation
From your layout, wrap the dynamic template in a selector...
MainContent
is the default selector, but you can configure it to whatever you like.
<div id="MainContent">
<div class="container">
{{> Template.dynamic template=content}}
</div>
</div>
From FlowRouter
you can replace
BlazeLayout.render(<layout>, <regions>);
with
FlowDynamicsAnimation.render(<layout>, <regions>);
Or for less typing, you can just do:
FlowDA.render(<regions>);
(NOTE: to omit the <layout>
argument, you must have configured the layout,
see below).
The default Configuration can be retrieved via:
FlowDynamicsAnimation.confDefault();
{
layout: "MainLayout",
contentSelector: "#MainContent",
modCurrent: {
opacity: 1,
translateX: 0,
translateY: 0
},
modInFrom: {
opacity: 0.1,
translateX: +650,
translateY: -30
},
modOutTo: {
opacity: 0,
translateX: -650,
translateY: +30
},
movement: {
type: dynamics.spring,
duration: 500
}
}
There is a basic getter/setter config()
function:
FlowDynamicsAnimation.config(<name>, <config>);
You can change the default Configuration with something like:
var defaultConf = FlowDynamicsAnimation.confDefault();
defaultConf.movement.duration = 9999;
defaultConf.layout = "FunkyBlazeLayoutName";
defaultConf.contentSelector = "#WrapperForContentRegion";
FlowDynamicsAnimation.config("default", defaultConf);
NOTE: the above config assumes your BlazeLayout template name is
'FunkyBlazeLayoutName' and you have wrapped the dynamic template in <div id="WrapperForContentRegion">...</div>
You can create a new Configuration with:
var myConf = FlowDynamicsAnimation.confDefault();
myConf.layout = "FunkyBlazeLayoutName";
myConf.contentSelector = "#WrapperForContentRegion";
myConf.modInFrom = { translateX: -1000; translateY: -1000 };
myConf.modOutTo = { translateX: -1000; translateY: -1000 };
myConf.movement = {
type: dynamics.gravity,
duration: 1085,
bounciness: 434,
elasticity: 228
}
FlowDynamicsAnimation.config("myCustomConf", myConf);
NOTE: the above config assumes your BlazeLayout template name is
'FunkyBlazeLayoutName' and you have wrapped the dynamic template in <div id="WrapperForContentRegion">...</div>
Creating multiple configurations allows you to easily toggle between a variety of animations.
You can set the current Configuration name with:
FlowDynamicsAnimation.currentName = "myCustomConf";
Until you change this, we stick with "default" / so for many "basic" needs, you could just update the default Configuration
You can also use the render()
shortcut:
// this uses the currentName for config and the configured layout
FlowDynamicsAnimation.render(<regions>);
// this uses the <name> for config and the configured layout
FlowDynamicsAnimation.render(<regions>, <name>)
// this uses the <name> for config and <layout>
FlowDynamicsAnimation.render(<regions>, <name>, <layout>)