How to use the vendors/splitText.js function in vendors

generateTimelineMax() {

    // Title Timeline
    this.titleSplited = new SplitText( this.refs.titleName, {
      type: 'chars'
    });

    this.titleTl = new TimelineMax({ paused: true, onComplete: ()=> {
      this.props.ended();
      this.refs.container.style.display = 'none';
    } });

    this.titleTl
      .from( this.refs.titleDive, 1, { y: '200%', ease: Expo.easeOut })
      .from( this.refs.titleSep, 0.6, { scale: 0, ease: Expo.easeOut }, '-=0.3' )
      .staggerFrom( this.titleSplited.chars, 1.8, { opacity: 0, ease: Expo.easeOut }, 0.05, '-=0.6' )
      .from( this.refs.subtitle, 0.6, { opacity: 0, y: '100%', ease: Expo.easeOut }, '-=1.6' )
      .to( this.refs.container, 1.4, { opacity: 0, y: '-75%', ease: Expo.easeOut }, '-=0.3' );

  }

generateTimelineMax() {

    // Title Timeline
    this.titleSplited = new SplitText( this.refs.titleName, {
      type: 'chars'
    });

    this.titleTl = new TimelineMax({ paused: true, onComplete: ()=> {
      this.props.ended();
    } });

    this.titleTl
      .from( this.refs.titleDive, 1, { y: '200%', ease: Expo.easeOut }, 4 )
      .from( this.refs.titleSep, 0.6, { scale: 0, ease: Expo.easeOut }, '-=0.3' )
      .staggerFrom( this.titleSplited.chars, 1.8, { opacity: 0, ease: Expo.easeOut }, 0.05, '-=0.6' )
      .to( this.refs.titleStep, 2, { opacity: 0, y: '-75%', ease: Expo.easeOut });

  }

introAnimation() {

    this.enterTitleTl = new TimelineMax();

    this.titleSplited = new SplitText( this.refs.title, {
      type: 'chars'
    });

    this.catchphraseSplited = new SplitText( this.refs.catchphrase, {
      type: 'words'
    });

    this.enterTitleTl
      .staggerFrom( this.titleSplited.chars, 1.5, { opacity: 0, scale: 0.8, y: '70%', ease: Back.easeOut.config( 3 ), delay: 0.5 }, 0.1 )
      .staggerFrom( this.catchphraseSplited.words, 1.5, { opacity: 0, ease: Expo.easeOut }, 0.1, "-=1" );
  }

generateTimelineMax() {

    this.instructionsSplited = new SplitText( this.refs.instructions, {
      type: 'chars'
    });

    this.loadingSplited = new SplitText( this.refs.loadingMsg, {
      type: 'chars'
    });

    this.instructionsSplited.reverseChars = this.instructionsSplited.chars.slice( 0 ).reverse();

    this.loadingAnimTl = new TimelineMax({ paused: true, repeat: -1 });

    this.grabberPressTl = new TimelineMax({
      paused: true,
      onReverseComplete: ()=> {
        this.innerCircleLoopTl.play( 0 );
      }

introAnimation() {

    this.enterTitleTl = new TimelineMax();

    this.titleSplited = new SplitText( this.refs.title, {
      type: 'chars'
    });

    this.catchphraseSplited = new SplitText( this.refs.catchphrase, {
      type: 'words'
    });

    this.enterTitleTl
      .staggerFrom( this.titleSplited.chars, 1.5, { opacity: 0, scale: 0.8, y: '70%', ease: Back.easeOut.config( 3 ), delay: 0.5 }, 0.1 )
      .staggerFrom( this.catchphraseSplited.words, 1.5, { opacity: 0, ease: Expo.easeOut }, 0.1, "-=1" );
  }

generateTimelineMax() {

    this.instructionsSplited = new SplitText( this.refs.instructions, {
      type: 'chars'
    });

    this.loadingSplited = new SplitText( this.refs.loadingMsg, {
      type: 'chars'
    });

    this.instructionsSplited.reverseChars = this.instructionsSplited.chars.slice( 0 ).reverse();

    this.loadingAnimTl = new TimelineMax({ paused: true, repeat: -1 });

    this.grabberPressTl = new TimelineMax({
      paused: true,
      onReverseComplete: ()=> {
        this.innerCircleLoopTl.play( 0 );
      }
    });

    this.grabberDragTl = new TimelineMax({ paused: true });