title: Material-UI & React: Using the Fade component onScroll
body: <p>I'm new to using Material-UI. I want to use it's <a href="https://material-ui.com/api/fade/" rel="nofollow noreferrer">Fade component</a> to fade in an element. I'm able to do that like this:</p>
  
  <pre><code>&lt;Fade in timeout={3000}&gt;
      &lt;Typography variant="h3" className={classes.h3} gutterBottom&gt;About Me&lt;/Typography&gt;
  &lt;/Fade&gt;
  </code></pre>
  
  <p>The Fade component works properly but executes immediately when the page is loaded. How can I delay the animation until the user scrolls down to where the element is on the page? I don't see any <code>onScroll</code> property in the documentation. Does Material-UI provide a way to execute Fade on scroll or would I have to use another library in conjunction with Material-UI?</p>