animations not working - react-awesome-reveal

Question

I want to use react-awesome-reveal in my typescript project but the animations doesnt seem to work. However, it works when I use react-reveal. Please advice on what I am missing.

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { Fade } from "react-awesome-reveal";
import ReactRevealFade from "react-reveal/Fade";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <div>
        <Fade>
          <Hello name={this.state.name} />
        </Fade>
        <ReactRevealFade left>
          <Hello name={this.state.name} />
        </ReactRevealFade>
        <p>Start editing to see some magic happen :)</p>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Stackblitz Code: Link

Any help is appreciated.

Answer 1

Can be fixed by wrapping the component inside a div.