Skip to content

Instantly share code, notes, and snippets.

@alaingalvan
Last active September 1, 2017 04:04
Show Gist options
  • Save alaingalvan/ffe771a3b3c526cfa6aa6d3cf4df08d5 to your computer and use it in GitHub Desktop.
Save alaingalvan/ffe771a3b3c526cfa6aa6d3cf4df08d5 to your computer and use it in GitHub Desktop.
import React from 'react';
import Anime from 'react-anime';
class PlaybackAnime extends React.Component {
constructor() {
this.state = { play: true };
this.anime = null;
}
toggleAnime = () => {
this.setState(({ play }) => ({ play: !play }));
if (typeof this.anime !== null) {
if (this.state.play)
this.anime.play();
else
this.anime.pause();
}
}
render() {
return (
<div>
<Anime begin={a => this.anime = a} translateX={[0, 100]}>
<p>Test</p>
</Anime>
<a onClick={this.toggleAnime}>{ this.state.play ? "Pause" : "Play" }</a>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment