Fade In - scroll example

app.js

import React from 'react'
import clsx from 'clsx'
import { AppBar, Toolbar, Link, Container, IconButton, Typography, Divider, Grid, Button, TextareaAutosize, Drawer } from '@material-ui/core'

import {
  Menu as MenuIcon,
  Close as CloseIcon
} from '@material-ui/icons'

import useStyles from './style'
import constans from './contants'

// import Facebook from '../sources/icons/Facebook'
import LinkedIn from '../sources/icons/LinkedIn'
// import Twitter from '../sources/icons/Twitter'
// import YouTube from '../sources/icons/YouTube'

import logo from '../sources/logo.svg'
import mapa from '../sources/mapa.svg'
import marcas from '../sources/marcas.svg'
import logoColor from '../sources/logo-color.svg'

import banner1 from '../sources/banner1.png'
import banner2 from '../sources/banner2.png'
import banner3 from '../sources/banner3.png'

import CardService from '../Components/CardService'
import InputText from '../Components/InputText'
import Circle from '../Components/Circle'
import Point from '../Components/Point'

const banners = [ banner1, banner2 ,banner3 ]

function App() {
  const [ language, setLanguage ] = React.useState('es')
  const [ point, setPoint ] = React.useState(0)
  const [ isOpenDrawer, setIsOpenDrawer ] = React.useState(false)
  const classes = useStyles()

  const {
    home,
    menus,
    terminos,
    payment,
    contact,
    services,
    form
  } = constans[language]

  const onScroll = () => {
    const elements = document.querySelectorAll('.fadeInUp')

    Array.from(elements).forEach(element => {
      const position = element.getBoundingClientRect()

      if(position.top < window.innerHeight && position.bottom >= 0 && !element.classList.contains('animated'))
        element.classList.add('animated')
    })
  }

  React.useEffect(() => {
    window.addEventListener('scroll', onScroll)

    return () => {
      window.removeEventListener('scroll', onScroll)
    }
  }, [])

  const _handleChangeLanguage = lang => () => {
    if(language !== lang) setLanguage(lang)
  }

  const _handleClickPoint = index => () => {
    setPoint(index)
  }

  const _handleToggleDrawer = () => {
    setIsOpenDrawer(prevState => !prevState)
  }

  return (
    <>
      <Drawer
        classes={{
          paper: classes.rootDrawer
        }}
        open={isOpenDrawer}
        transitionDuration={500}
        variant='persistent'>
        <div className={classes.contentDrawer}>
          <div>
            <IconButton
              color='inherit'
              onClick={_handleToggleDrawer}>
              <CloseIcon />
            </IconButton>
          </div>
          <div className={classes.drawerContentMenu}>
            {
              menus.map(({ label, tag }, index) => (
                <Link
                  color='inherit'
                  href={`#${tag}`}
                  key={`menu-${index + 1 }`}
                  onClick={_handleToggleDrawer}
                  underline='none'>
                  {label}
                </Link>
              ))
            }
          </div>
          <div style={{ marginBottom: '2rem', textAlign: 'center' }}>
            <Button
              className={
                clsx({
                  [classes.languageActive]: language === 'es'
                })
              }
              color='inherit'
              onClick={_handleChangeLanguage('es')}
              size='large'>
              ES
            </Button>
              /
            <Button
              className={
                clsx({
                  [classes.languageActive]: language === 'en'
                })
              }
              color='inherit'
              onClick={_handleChangeLanguage('en')}
              size='large'>
              EN
            </Button>
          </div>
        </div>
      </Drawer>
      <AppBar
        color='transparent'
        elevation={0}
        position='absolute'>
        <Container disableGutters>
          <Toolbar style={{ marginTop: 20 }}>
            <IconButton
              aria-label='open drawer'
              className={classes.toolbarMenuButton}
              color='inherit'
              edge='start'
              onClick={_handleToggleDrawer}>
              <MenuIcon />
            </IconButton>
            <div className={classes.logo}>
              <img alt='ALPS' src={logo} />
            </div>
            <div className={classes.toolbarMenu}>
              {
                menus.map(({ label, tag }, index) => (
                  <Link
                    color='inherit'
                    href={`#${tag}`}
                    key={`menu-${index + 1 }`}
                    underline='none'>
                    {label}
                  </Link>
                ))
              }
            </div>
          </Toolbar>
        </Container>
      </AppBar>
      <main className={classes.overflowHidden}>
        <div className={classes.home} id='home'>
          <Container className={classes.bannerContainer}>
            <Grid container>
              <Grid
                container
                direction='column'
                item
                lg={5}
                md={5}
                style={{ height: '100%' }}
                xs={12}>
                <div className={classes.bannerContentTitle}>
                  {
                    home.banners.map(({ title, subtitle }, index) => (
                      <Typography
                        className={
                          clsx(
                            {
                              [classes.bannerAnimationTitleActive]: point === index
                            },
                            classes.bannerTitle,
                            classes.bannerAnimationTitle
                          )
                        }
                        key={`banner-text-${index}`}>
                        <strong>{title}</strong> {subtitle}
                      </Typography>
                    ))
                  }
                </div>

                <div className={classes.bannerContentPoints}>
                  <Point active={point === 0} onClick={_handleClickPoint(0)} />
                  <Point active={point === 1} onClick={_handleClickPoint(1)} />
                  <Point active={point === 2} onClick={_handleClickPoint(2)} />
                </div>
              </Grid>
              <Grid item lg={1} md='auto'>
              </Grid>
              <Grid
                alignItems='center'
                className={classes.hiddenIsMobile}
                container
                item
                justify='center'
                lg={6}
                md={7}
                xs='auto'>
                <div className={classes.bannerContentImage}>
                  {
                    banners.map((banner, index) => (
                      <img
                        alt={`banner-${index}`}
                        className={
                          clsx(
                            {
                              [classes.bannerAnimationImageActive]: point === index
                            },
                            classes.bannerImage,
                            classes.bannerAnimationImage
                          )
                        }
                        key={`banner-image-${index}`}
                        src={banner} />
                    ))
                  }
                </div>
              </Grid>
            </Grid>
            <Circle
              horizontal={-120}
              left={0}
              rotate={300}
              size={200}
              top={0}
              vertical={-120} />
            <Circle
              bottom={0}
              horizontal={-160}
              left={0}
              size={250}
              vertical={80} />
          </Container>
          <div className={classes.languages}>
            <Button
              className={
                clsx({
                  [classes.languageActive]: language === 'es'
                })
              }
              color='inherit'
              onClick={_handleChangeLanguage('es')}
              size='large'>
              ES
            </Button>
              /
            <Button
              className={
                clsx({
                  [classes.languageActive]: language === 'en'
                })
              }
              color='inherit'
              onClick={_handleChangeLanguage('en')}
              size='large'>
              EN
            </Button>
          </div>
        </div>
        <div className={classes.section} id='services'>
          <Circle
            className={classes.hiddenIsMobile}
            horizontal={230}
            right={0}
            size={500}
            top={0}
            vertical={-300} />
          <Container>
            <Typography className={clsx(classes.sectionTitle, classes.maxWidthTitle, classes.spacingBottom8, classes.spacingTop4)} color='primary'>
              {services.title}
            </Typography>
            <Grid
              container
              item
              xs={12}>
              {
                services.data.map(({ title, subtitle, description }, index) => (
                  <CardService
                    description={description}
                    key={`service-${index + 1}`}
                    position={index}
                    subtitle={subtitle}
                    title={title} />
                ))
              }
            </Grid>

          </Container>
        </div>
        <Container>
          <Divider />
        </Container>
        <div id='payment'>
          <Container>
            <Grid className={classes.section} container>
              <Grid
                className='fadeInUp'
                item
                md={5}
                xs={12}>
                <Typography className={clsx(classes.sectionTitle, classes.maxWidthTitle)} color='primary'>
                  {payment.title}
                </Typography>
                <Typography className={clsx(classes.spacingVertical2, classes.familyHeebo)} color='textSecondary'>
                  {payment.description}
                </Typography>
                <Typography className={clsx(classes.fontSize22, classes.spacingVertical2)} color='primary'>
                  {payment.subtitle}
                </Typography>
                <img alt='marcas' src={marcas} style={{ width: '100%' }} />
                <Typography align='right' color='primary'>
                  {payment.more}
                </Typography>
              </Grid>
              <Grid item md={1} xs='auto' />
              <Grid
                className='fadeInUp'
                container
                item
                justify='center'
                md={6}
                xs={12}>
                <img alt='Payment' className={classes.maxWidth} src={mapa} />
              </Grid>
            </Grid>
          </Container>
        </div>
        <div className={clsx(classes.section, classes.sectionContact)} id='contact' style={{ overflow: 'hidden' }}>
          <Container>
            <Grid container>
              <Grid item md={5} xs={12}>
                <Typography className={classes.fontSize28}>{contact.title}</Typography>
                <Typography className={classes.familyHeebo}>{contact.subtitle}</Typography>
              </Grid>
              <Grid item md={1} />
              <Grid
                container
                item
                justify='center'
                md={6}
                xs={12}>
                <Grid
                  className={classes.formContent}
                  container
                  spacing={1}
                  style={{ zIndex: 1 }} >
                  <Grid item xs={6}>
                    <form>
                      <InputText label={form.name} />
                    </form>
                  </Grid>
                  <Grid item xs={6}>
                    <InputText label={form.lastName} />
                  </Grid>
                  <Grid item xs={12}>
                    <InputText label={form.email} />
                  </Grid>
                  <Grid item xs={12}>
                    <InputText label={form.company} />
                  </Grid>
                  <Grid item xs={12}>
                    <TextareaAutosize
                      className={classes.formTextArea}
                      placeholder={form.message}
                      rows={10} />
                  </Grid>
                  <Grid item xs={12}>
                    <Button
                      className={classes.formButton}
                      fullWidth
                      variant='contained'>
                      {form.send}
                    </Button>
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
          </Container>
          <Circle
            bottom={0}
            horizontal={100}
            right={0}
            size={300}
            vertical={100} />
        </div>
      </main>
      <footer className={classes.footer}>
        <Container>
          <div className={clsx(classes.flexJustify, classes.flexRemoveMobile)}>
            <div>
              <Typography className={clsx(classes.footerLabels, classes.familyHeebo)} color='textSecondary'>sales@apls.cl</Typography>
              <Typography className={clsx(classes.footerLabels, classes.familyHeebo)} color='textSecondary'>Chile / Perú / Ecuador / Colombia / México</Typography>
              <Typography className={clsx(classes.footerTerms, classes.footerLabels, classes.familyHeebo)} color='textSecondary'>{terminos}</Typography>
            </div>
            <div className={classes.footerLogo}>
              <img alt='ALPS' src={logoColor} />
            </div>
          </div>
          <Divider className={classes.footerDivider} />
          <div className={clsx(classes.flexJustify, classes.footerCopyright)}>
            <Typography className={clsx(classes.footerTerms, classes.familyHeebo)} color='textSecondary'>{terminos}</Typography>
            <div>
              {/* <IconButton size='small'>
                <Facebook color='action' />
              </IconButton> */}
              <IconButton size='small'>
                <LinkedIn color='action' />
              </IconButton>
              {/* <IconButton size='small'>
                <Twitter color='action' />
              </IconButton>
              <IconButton size='small'>
                <YouTube color='action' />
              </IconButton> */}
            </div>
          </div>
        </Container>
      </footer>
    </>
  )
}

export default App