Using Velocity.js with ReactTransitionGroup [SOLVED]

1

I am trying to animate items entering/leaving with Velocity in react, but i am getting

Velocity is not found or node.velocity() function is not found error, i have the velocityjs:velocityjs package installed and it works in blaze templates, is there something i have to do to make it work in react?

2 
const ReactTransitionGroup = React.addons.TransitionGroup;
const options = _.extend({}, options, {
    duration: 500,
    easing: [ 250, 15 ], //spring physics
    // easing: [ 0.17, 0.67, 0.83, 0.67 ] //bezier curve
  });

const GrowlTransitionGroupChild = React.createClass({
	componentWillEnter: function(done) {
		var node = this.getDOMNode();
		Velocity(
			node,
			{
				translateZ: 0,
				scale: [1, 0]
			},
			{
				easing: options.easing,
				duration: options.duration,
				queue: false,
				complete: done
			}
		);

		Velocity(node, "fadeIn", {
			duration: options.duration,
			queue: false,
			complete: done
		})
	},

	componentWillLeave: function(done) {
		var node = this.getDOMNode();
		Velocity.Utilities.removeData(node, ["velocity"]);
		Velocity(node, "fadeOut", {
			duration: options.duration,
			complete: done
		})
	},

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

GrowlTransitionGroup = React.createClass({
	_wrapChild: function(child) {
		return (
			<GrowlTransitionGroupChild>
				{child}
			</GrowlTransitionGroupChild>
		);
	},

	render: function() {
		return (
			<ReactTransitionGroup
				{...this.props}
				childFactory={this._wrapChild}
			/>
		);
	}
});
3

Nvm solved the problem, i had to use $(this.getDOMnode()) to convert it into a jquery object first and all .velocity on it

4

Hi sikanx, could you please post here the working solution? I can’t figure it out.
Thank you, Luca-

5

call ReactDOM.findDOMNode(this) and velocity on it

6

Thank you sikanx for your reply!

Maybe I’m missing something: if I try something like

ReactDOM.findDOMNode(this).velocity({
left: “500px”,
}, {
duration: 3000,
easing: “linear”
});

it seems that while velocity animates values as I should expect (I can say this by inspecting source with my browser’s development tools), someone else (React?) prevents DOM element from moving.

Thank you for your help,
Luca-

7

Ok, I left $(…).
Now if I use $( ReactDOM.findDOMNode(this) ).velocity(…stuff here…);

it works like a charm.

Thank you again, L-