Scrollmagi c с React. js скрывает контент в мобильной версии при прокрутке

Question

Я создал список, который преобразует вертикальную прокрутку в горизонтальную прокрутку, когда достигается какой-то раздел, я сделал это с помощью React. js и библиотеки scrollmagi c и gsap, в веб-версии все работало нормально но когда я проверяю свой код и переключаю вид на мобильную версию, появляется заголовок, который скрывается, и прокрутка не срабатывает, пока горизонтальный список не достигает верхней части экрана, тогда как я хочу, чтобы заголовок продолжал отображаться, когда происходит горизонтальная прокрутка.

Вот что я сделал до сих пор:

JS:

import './App.css';
import React, { Component } from 'react';
import ReactDOM from 'react-dom'

import * as ScrollMagic from "scrollmagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems
import { TweenMax, TimelineLite, TweenLite, Linear } from "gsap"; // Also works with TweenLite and TimelineLite
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import Image from './components/images/Image'

ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineLite);


class App extends Component {


  componentDidMount (){
    TweenLite.defaultEase = Linear.easeNone;
    var titles = ReactDOM
                .findDOMNode(this.refs['title1'])
                .getBoundingClientRect()
    console.log(titles)
    var controller = new ScrollMagic.Controller();
    var tl = new TimelineLite();
    tl.to("#js-slideContainer", 1, {x:'-130%'})

    new ScrollMagic.Scene({
      triggerElement: "#js-wrapper",
      triggerHook: "onLeave",
      duration: "3000"
    })
      .setPin("#js-slideContainer")
      .setTween(tl)
      .addTo(controller);


  }
  render() {
    return (


      <div >
        <div style={{height:'100vh'}}></div>
        <div className="wrapper" id="js-wrapper" >

          <div className="sections " id="js-slideContainer">
          <div style={{height:'30vh'}}>TITLE IN HERE</div>
            <div className="listCards bigContainer" >
                <div className='childCardH section' ref='title1'>
                  <div className='sectionTitle'>
                    <Image width='30vw' srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
                  </div>
                </div>
                <div className='childCardH section' ref='title1'>
                  <div className='sectionTitle'>
                    <Image width='30vw' srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
                  </div>
                </div>
                <div className='childCardH section' ref='title1'>
                  <div className='sectionTitle'>
                    <Image width='30vw' srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style={{height:'100vh'}}></div>
          <div style={{height:'100vh'}}></div>

      </div>

    );
  }
}


export default App;

CSS

body {
  font-family: 'Fauna One', serif;
}


.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-perspective: 1000;
          perspective: 1000;
  margin-left: 30%;

}

.section {
  height: 100%;
  width: calc( 100% / 3);
  float: left;
  position: relative;

}
.sections {
  width: 100%;
  height: 100vh;
}
.section__title {
  position: absolute;
  margin-right: 50vw;

  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 30px;
  color: #fff;
  margin-top: 200px;
}

Как это отображается в веб-версии при прокрутке (я хочу, чтобы это отображалось в мобильной версии так же):

Как это отображается в мобильной версии, когда я прокручиваю