How to use scrollreveal - 10 common examples

initialScrollReveal() {
    const { repositoriesLoaded, commitLoaded, hotmapLoaded } = this.props
    if (!repositoriesLoaded || !commitLoaded || !hotmapLoaded) return
    if (this.scrollRevealLoaded) return

    this.scrollRevealLoaded = true
    const sr = ScrollReveal({ reset: true })
    try {
      sr.reveal('#reposChartDOM', { duration: 150 })
      sr.reveal('#skillChartDOM', { duration: 150 })
      sr.reveal('#commitsChartDOM', { duration: 150 })
      // sr.reveal('#commitsWrapperDOM', { duration: 150 })
      sr.reveal('#reposWrapperDOM', { duration: 150 })
      // sr.reveal('#languageWrapperDOM', { duration: 150 })
    } catch (e) {
      console.error(e)
    }
  }

const activateScrollReveal = () => {
  const ScrollReveal = require('scrollreveal').default
  const sr = ScrollReveal({ duration: 800 }) // eslint-disable-line no-undef
  sr.reveal('.reveal')
}

const activateScrollReveal = () => {
  const ScrollReveal = require('scrollreveal').default
  const sr = ScrollReveal({ duration: 800 }) // eslint-disable-line no-undef
  sr.reveal('.reveal')
}

const activateScrollReveal = () => {
  const ScrollReveal = require('scrollreveal').default
  const sr = ScrollReveal({ duration: 800 }) // eslint-disable-line no-undef
  sr.reveal('.reveal')
}

componentDidMount() {
    const sr = (window.sr = ScrollReveal());
    sr.reveal(".hero .title, .card, .subtitle");

    sr.reveal(".route", {
      duration: 750,
      distance: "40px",
      easing: "cubic-bezier(0.5, -0.01, 0, 1.005)",
      interval: 64,
      origin: "bottom",
      viewFactor: 0.32
    });
  }

mounted() {
            const sr = ScrollReveal({
                duration: 400,
                delay: 200
            })
            sr.reveal('.home-hero', { delay: 0, origin: 'top' }, 200)
            sr.reveal('.features', 200)
        }
    }

componentDidMount() {
    ScrollReveal().reveal(".card", { reset: true })
  }

this.runSRTimeout = setTimeout( () => {
                    const $element = $( `[id="block-${ this.props.clientId }"]` );
                    const element = $element[ 0 ];

                    if ( element ) {
                        const config = parseSRConfig( attributes.ghostkitSR );

                        config.container = '.editor-styles-wrapper';

                        ScrollReveal().clean( element );
                        ScrollReveal().reveal( element, config );
                    }
                }, 150 );
            }