letter-animation

colours.js

class LetterDemo extends Component {
  constructor(props) { ... }

  componentWillMount() { ... }

  componentWillUnmount() { ... }

  onStart({entering, leaving}, node) {
    if (entering) {
      node.classList.add('enter');
    } else if (leaving) {
      node.classList.add('leave');
    } else {
      node.classList.remove('enter', 'leave');
    }
  }

  renderLetters() { ... }

  render() {
    const animations = { ... };

    return (
      <div className="letter-demo">
        <FlipMove {...animations} onStart={this.onStart}>
          {this.renderLetters()}
        </FlipMove>
      </div>
    );
  }
}

export default LetterDemo;