Skip to content

Instantly share code, notes, and snippets.

@SanderSpies
Last active August 29, 2015 14:14
Show Gist options
  • Save SanderSpies/dc4e2a5ca1f95b3d2b26 to your computer and use it in GitHub Desktop.
Save SanderSpies/dc4e2a5ca1f95b3d2b26 to your computer and use it in GitHub Desktop.
Rough touch support idea for React Magician
/**
* @jsx React.DOM
*/
'use strict';
var React = require('react');
var Animation = require('react-magician');
class Foo extends React.Component {
constructor() {
this.animations = {
fooBarAnimation: Animation.create({
'0px': {
blockA: {
left: 0,
top: 0
},
blockB: {
left: 0,
top: 0
}
},
'100px': {
blockA: {
easing: 'easeInQuad',
left: 100,
top: 200
},
blockB: {
left: 10,
top: 60
}
}
})
};
}
render() {
var fooBarAnimationValues = this.animations.fooBarAnimation.values(this);
return <div onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}>
<div style={fooBarAnimationValues.blockA}></div>
<div style={fooBarAnimationValues.blockB}></div>
</div>;
}
onTouchStart() {
// register start position
}
onTouchMove() {
// how far are we from the start position? set the animation to that position
// force update
}
}
React.render(<Foo />, document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment