https://github.com/zeroasterisk/meteor-flow-dynamics-animation

Simple transitions/animations for FlowRouter using DynamicsJS
https://github.com/zeroasterisk/meteor-flow-dynamics-animation

Last synced: about 1 year ago
JSON representation

Simple transitions/animations for FlowRouter using DynamicsJS

• Host: GitHub
• URL: https://github.com/zeroasterisk/meteor-flow-dynamics-animation
• Owner: zeroasterisk
• Created: 2016-01-12T17:18:25.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-01-29T14:32:45.000Z (over 10 years ago)
• Last Synced: 2023-03-11T05:08:11.437Z (over 3 years ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Flow Router transition animations based on DynamicsJS

Relies on:

* [kadirahq:flow-router](https://github.com/kadirahq/flow-router)

* [zeroasterisk:dynamicsjs](http://dynamicsjs.com/)

 * [dynamicsjs](http://dynamicsjs.com/)

## Install

    meteor add zeroasterisk:flow-dynamicsjs-animation

## Simple Usage

From your layout, wrap the dynamic template in a selector...

`MainContent` is the default selector, but you can configure it to whatever you like.

    


      


        {{> Template.dynamic template=content}}

      

    


From `FlowRouter` you can replace

`BlazeLayout.render(, );`

with

`FlowDynamicsAnimation.render(, );`

Or for less typing, you can just do:

`FlowDA.render();`

(NOTE: to omit the `` argument, you must have configured the layout,

see below).

## Configuration & Advanced Usage

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(, );

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 `
...
`_


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 `
...
`_


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();

    // this uses the  for config and the configured layout

    FlowDynamicsAnimation.render(, )

    // this uses the  for config and 

    FlowDynamicsAnimation.render(, , )