Skip to content

Instantly share code, notes, and snippets.

@SanderSpies
Last active August 29, 2015 14:14
Show Gist options
  • Save SanderSpies/0b2963e8e2d5eb2ca359 to your computer and use it in GitHub Desktop.
Save SanderSpies/0b2963e8e2d5eb2ca359 to your computer and use it in GitHub Desktop.
React Animation prototyping
/**
* @jsx React.DOM
*/
'use strict';
var React = require('react');
var ReactAnimation = require('react-animation');
var Animation = ReactAnimation.Animation;
class Foo extends React.Component {
constructor() {
this.animations = {
fooBarAnimation: Animation.create({
'0ms': {
blockA: {
left: 0,
top: 0,
width: 0
},
blockB: {
left: 0,
top: 0
}
},
'100ms': {
blockA: {
easing: 'easeInQuad'
left: 200
}
}
})
};
}
render() {
var fooBarAnimationValues = this.animations.fooBarAnimation.values(this);
return <div>
<div className="simple1" style={fooBarAnimationValues.blockA} ref="foo">
</div>
<div className="simple2" style={fooBarAnimationValues.blockB}>
</div>
</div>;
}
componentDidUpdate() {
if (this.animations.fooBarAnimation.isPlaying) {
var self = this;
requestAnimationFrame(function(){
self.forceUpdate();
});
}
}
componentDidMount() {
this.animations.fooBarAnimation.play(this);
}
}
React.render(<Foo />, document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment