3

I'm new to using Material-UI. I want to use it's Fade component to fade in an element. I'm able to do that like this:

<Fade in timeout={3000}>
    <Typography variant="h3" className={classes.h3} gutterBottom>About Me</Typography>
</Fade>

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 onScroll 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?

Nick Kinlen
  • 1,356
  • 4
  • 30
  • 58
  • Use other conditions (third-party libs for scroll check for example) to set the boolean value of props `in` of `` would be fine. – keikai Apr 24 '20 at 04:21

1 Answers1

7

You can utilize in property of Fade component and only set to true conditionally.

So in your case you need to do something like this -

import VizSensor from 'react-visibility-sensor'; // or use any other 3rd party plugin or define your own

function comp=(props) => {

    let [active, setActive] = useState(false);

    return (
        <VizSensor
            onChange={(isVisible) => {
                setActive(isVisible);
            }}
        >
            <Fade in={active} timeout={3000}>
                <Typography variant="h3" className={classes.h3} gutterBottom>About Me</Typography>
            </Fade>
        </VizSensor>
    )

}
Varun Goel
  • 435
  • 2
  • 7