GSAPTransitionGroup for React.js

react-gsap.js

/*global module */
(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['React', 'gsap'], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory(require('React'), require('gsap'));
    } else {
        factory(root.React, root.TweenMax);
    }
})(this, function(React, TweenMax) {

    var funcOrObject = React.PropTypes.oneOfType([
        React.PropTypes.func,
        React.PropTypes.object
    ]);

    var GSAPTransitionGroup = React.createClass({

        displayName: 'GSAPTransitionGroup',

        propTypes: {
            enter: funcOrObject,
            leave: funcOrObject
        },

        _wrapChild: function (child) {
            return GSAPTransitionGroupChild(
                this.props,
                child
            );
        },

        render: function () {
            return (
                React.addons.TransitionGroup(
                    merge(this.props, {
                        childFactory: this._wrapChild
                    })
                )
            );
        }

    });

    var GSAPTransitionGroupChild = React.createClass({

        displayName: 'GSAPTransitionGroupChild',

        propTypes: {
            enter: funcOrObject,
            leave: funcOrObject
        },

        transition: function (animationType, finishCallback) {
            var node = this.getDOMNode();
            var config = this.getConfig(animationType);
            config.params.onComplete = finishCallback;

            TweenMax.to(node, config.time, config.params);
        },

        getConfig: function (animationType) {
            var node = this.getDOMNode();
            var config = this.props[animationType];

            if (typeof config === 'function') {
                config = config(
                    this.props.children.props,
                    Array.prototype.indexOf.call(node.parentNode.children, node)
                );
            }

            var params = merge({}, config);
            var time = params.duration;

            delete params.duration;

            return {
                params: params,
                time: time
            };
        },

        componentWillEnter: function (done) {
            if (this.props.enter) {
                var node = this.getDOMNode();
                var config = this.getConfig('leave');

                TweenMax.set(node, config.params);

                this.transition('enter', done);
            } else {
                done();
            }
        },

        componentWillLeave: function (done) {
            if (this.props.leave) {
                this.transition('leave', done);
            } else {
                done();
            }
        },

        render: function () {
            return this.props.children;
        }

    });

    var exports = {
        GSAPTransitionGroup: GSAPTransitionGroup
    };

    merge(React.addons, exports);

    function merge (one, two) {
        for (var key in two) {
            if (two.hasOwnProperty(key)) {
                one[key] = two[key];
            }
        }

        return one;
    };

    return exports;

});

hey! looks cool. would you provide an example about how do you pass the props commands (enter,leave) when used in the component ?