letter-animation

enter-exit-animation.js

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

  componentWillMount() { ... }

  componentWillUnmount() { ... }

  renderLetters() { ... }

  render() {
    const animations = {
      enterAnimation: {
        from: {
          transform: 'translateY(-30px)',
          opacity: 0,
        },
        to: {
          transform: 'translateY(0)',
          opacity: 1,
        },
      },
      leaveAnimation: {
        from: {
          transform: 'translateY(0)',
          opacity: 1,
        },
        to: {
          transform: 'translateY(30px)',
          opacity: 0,
        },
      },
    };
    
    return (
      <div className="letter-demo">
        <FlipMove {...animations}>
          {this.renderLetters()}
        </FlipMove>
      </div>
    );
  }
}

export default LetterDemo;