MUI - добавить несколько переходов на колесо. Как сделать так, чтобы один элемент входил, когда предыдущий элемент выходил на колесо?

Question

Я использую переходы пользовательского интерфейса материала для ввода и выхода текста при прокрутке пользователя вверх или вниз.

Как изменить код перехода, чтобы он работал, как в следующем примере: когда пользователь прокручивает вверх, Я хочу, чтобы «Текст 1» скользил по экрану. Когда пользователь снова прокручивает вверх, я хочу, чтобы «Текст 2» скользил по экрану И «Текст 1» скользил по экрану. Когда пользователь прокручивает страницу вниз, я хочу, чтобы «Текст 1» отодвинулся назад на экран, а «Текст 2 отодвинулся от экрана». По сути, я хочу переключаться между «Текст 1» и «Текст 2», когда пользователь прокручивает вверх или вниз.

В настоящее время, когда пользователь прокручивает вверх или вниз, оба текста сдвигаются вместе. Кроме того, текст очень нервный в зависимости от того, как долго пользователь прокручивает пальцы. См. ссылка , например.

Вот мой код компонента:

import React, { Component } from 'react';
import SearchBar from '../SearchBar.jsx';
import Header from '../Header.jsx';
import Footer from '../Footer.jsx';
import { Typography } from '@material-ui/core';

import Paper from '@material-ui/core/Paper';
import Slide from '@material-ui/core/Slide';
import { withStyles } from '@material-ui/core/styles';

const styles =(theme) => ({
  paper: {
    zIndex: 1,
    position: 'relative',
    margin: theme.spacing(3),
    backgroundColor: 'transparent',
    boxShadow: "none",
  },
});

class Homepage extends Component {
    constructor (props) {
        super (props)
        this.state = {
            checked: false
        }
        this.handleChange = this.handleChange.bind(this);
    };

    handleChange () {
        let checkedIt = !this.state.checked
        this.setState({
            checked: checkedIt
        })    
    }

    render () {
        let { classes } = this.props
        let checked = this.state.checked
        return (
            <div className='homepage' onWheel={this.handleChange}>
                <div>
                    <Header/>
                    <div>
                        <div>
                            <Slide direction="left" in={checked} mountOnEnter unmountOnExit>
                            <Paper elevation={4} className={classes.paper}>
                                <Typography variant="h1">
                                    Text 1
                                </Typography>
                            </Paper>  
                            </Slide>

                            <Slide direction="left" in={checked} mountOnEnter unmountOnExit>
                            <Paper elevation={4} className={classes.paper}>
                                <Typography variant="h1">
                                    Text 2
                                </Typography>
                            </Paper>
                            </Slide>
                        </div>
                    </div>
                    <SearchBar/>
                    <Footer/>
                </div>
            </div>
        )
    }
}
export default withStyles(styles)(Homepage);