https://github.com/gadicc/famous-animate

provides #Animate plugin for famo.us integration in meteor
https://github.com/gadicc/famous-animate

Last synced: 11 months ago
JSON representation

provides #Animate plugin for famo.us integration in meteor

• Host: GitHub
• URL: https://github.com/gadicc/famous-animate
• Owner: gadicc
• License: mit
• Created: 2015-01-28T10:09:18.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-01-28T10:11:26.000Z (over 11 years ago)
• Last Synced: 2025-04-05T10:30:08.963Z (about 1 year ago)
• Language: JavaScript
• Size: 113 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
fview-animate

==============

Provides #Animate plugin for famo.us integration in meteor.

Animate allows to define enter/leave transitions using template helpers, or use transitions defined by name.

Demo: http://meteorpad.com/pad/rXrmAYnMtuP7rnFeD/#Animate proposal

    

      {{#Animate size='[200,undefined]' onEnter=enter onLeave=leave}}

        {{#Surface}}

          ...

        {{/Surface}}

      {{/Animate}}

    

    Template.example.helpers({

      enter : function() {

        return function(stateModifier, done) {

          stateModifier.setOpacity(0); // hide initially

          // fadeIn and invoke done() on completion

          stateModifier.setOpacity(1, { duration: 500, curve: 'easeOut' }, done);

        };

      },

      leave : function() {

        return function(stateModifier, done) {

          // fadeOut and invoke done() on completion

          stateModifier.setOpacity(0, { duration: 500, curve: 'easeOut' }, done);

        };

      }

    });

The `#Animate` view must be placed directly under e.g. `#famousEach` or `#famousIf` to allow the leave transition to work properly.

The enter/leave helpers must return a function which is invoked with a `StateModifier`, which allows all kind of complex transitions.

The enter/leave-functions has a 2nd param which is the done-handler which must be invoked at transition end.

## Global transitions

For global transitions the preferred approach is to register transitions by name.

Since most complex transition have multiple params e.g. durations, force etc. it's helpful to

create to create a transition-factory for your transition and bind it to a meaningful name.

    MySuperTransitionIn = function(duration, curve) {

      return function(stateModifier, done) {

          stateModifier.setOpacity(0); // hide initially

          // fadeIn

          stateModifier.setOpacity(1, { duration: 500, curve: 'easeOut' }, done);

      };

    }

    FView.registerTransition('in:super.fast',  MySuperTransitionIn(200, 'easeOut'));

    FView.registerTransition('in:super.slow',  MySuperTransitionIn(1000, 'easeOut'));

In the template your can now use your transitions by name.

    {{#Animate onEnter='in:super.fast' onLeave='out:super.slow'}} ... {{/Animate}}