problem with scrolltrigger on mobile

[ludogou]

Hello, I'm trying to use scrolltrigger for my site (in vuejs) but I have a problem when I try on mobile, the site crashes. here is a video to show you:

I do not know where the problem comes from, if you have an idea to advise me,here is the code.
Thanks in advance,
Ludovic

 

<template>
  <div id="presentation">
    <div class="image">
      <div class="titre">
        <h1>Kerebel Réalité Virtuelle</h1>
        <p>Un interieur comme si vous y étiez !</p>
      </div>
    </div>
    <div class="scroll">
    <div class="qui">
      <h2>Qui nous sommes ?</h2>
      <div class="texte">
        <img
          src="../assets/presentation/logo.png"
          alt="logo Kerebel réalité virtuelle"
        />
        <p>
          Kerebel Réalité Virtuelle est une société de
          <a href="/realisations"> visite virtuelle</a> en 3D, qui
          fait parti du réseau mondial Matterport Service Partners pour vous
          offrir de la numérisation de votre espace professionnelle.<br /><br />
          Nous effectuons des expériences immersives uniques qui prennent en
          compte toutes vos attentes et vous apportent la meilleure solution.
        </p>
      </div>
    </div>
   
    

    <div class="pourquoi">
      <h2>Pourquoi ?</h2>
      <div class="texte">
        <img class="imageCard"
          src="../assets/presentation/appareil.jpg"
          alt="camera 3D"
        />
        <p>
          <a href="/realisations">Les visites virtuelles</a> permettent de faire
          découvrir vos biens, commerces ..., comme s'y vous y étiez, sans se
          déplacer.<br /><br />
          Grâce à la visite virtuelle, vous pouvez accéder à tout moment et où
          vous voulez, sur un support électronique: ordinateur, tablette ou
          smartphone. Cette technologie est donc accessible à tous.
        </p>
      </div>
    </div>
    <div class="backColor">
      <div class="comment">
        <h2>Comment ?</h2>
        <div class="texte">
          <p>
            <span> 1 </span> Vous nous <a href="/contact">contactez</a> pour
            prendre un rendez-vous. <br />
            <br />
            <span> 2 </span> Nous fixons une date et une heure ensemble pour
            effectuer un repérage des lieux.<br /><br />
            <span> 3 </span> Nous revenons pour effectuer la
            <a href="/realisations">visite virtuelle</a> grâce à la technologie
            Matterport, l'espace est scanné en 3 dimensions. 
            <br />
            <br />
            <span> 4 </span> Nous effectuons le montage de la visite.<br /><br />
            <span> 5 </span> Nous vous envoyons la visite virtuelle.
          </p>
          <img class="imageCard"
            src="../assets/presentation/matterport.jpeg"
            alt="matterport"
          />
        </div>
        </div>
      </div>
       <div class="backColor">
      <div class="pourQui">
        <h2>Pour qui ?</h2>
        <p>
          La visite virtuelle Matterport est adaptée à tout types d'activités :
        </p>
        </div>

        <div class="container">
          
          <div class="card cardHot">
            <h3>Restauration</h3>
            <p>
              Vous tenez un restaurant, hôtel, bar ? <br> Nous sommes là pour faire
              visiter votre établissement !
            </p>
            <img src="../assets/presentation/kitchen.jpg" alt="cuisine" />
          </div>
          <div class="card cardBat">
            <h3>Bâtiment public</h3>
            <p>
              Vous êtes directeur d'une école ou d'un musée ? <br> Nous sommes là pour
              faire visiter votre établissement !
            </p>
            <img src="../assets/presentation/school.jpeg" alt="école" />
          </div>
          <div class="card cardImm">
            <h3>Location saisonnière</h3>
            <p>
              Vous avez un bien immobiler à louer pour la saison ?<br> Nous sommes
              là pour faire visiter votre ou vos maison(s)/appartement(s) !
            </p>
            <img src="../assets/presentation/location.jpg" alt="location" />
          </div>
          <div class="card cardEv">
            <h3>Evénementiel</h3>
            <p>
              Vous organisez des évenements et vous aimeriez faire découvrir le
              lieu ?<br> Nous sommes là pour faire visiter votre événement !
            </p>
            <img src="../assets/presentation/evenement.jpg" alt="événement" />
          </div>
          <div class="card cardBtp">
            <h3>BTP</h3>
            <p>
              Vous travaillez dans le btp et vous aimeriez mettre en avant votre
              travail ?<br>Réalisation d'une visite virtuelle avant/après<br> Nous sommes là pour faire visiter vos travaux !
            </p>
            <img src="../assets/presentation/btp.jpeg" alt="batiment" />
          </div>
          <div class="card cardComm">
            <h3>Commerces</h3>
            <p>
              Vous tenez un commerce et vous aimeriez faire visité votre magasin
              ? <br> Nous sommes là pour faire visiter votre établissement !
            </p>
            <img src="../assets/presentation/shop.jpeg" alt="magasin" />
          </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import { gsap } from 'gsap'
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger); 

export default {
   mounted: function(){
      this.startAnimations();
    },
  data: function() {
    return {};
  },
  methods: {
  startAnimations : function(){
 let tl = gsap.timeline({
 scrollTrigger: {
   trigger:".scroll",
   pin:true,
   start : "top top",
    end: "1000%",
  scrub : 1,     
 } 
 });

 
 tl.addLabel("start")
 .to(".qui",{opacity: 0, })
 .to(".pourquoi",{ opacity : 1,})
 .to(".pourquoi", { opacity :0,})
 .to(".comment",{ opacity : 1,})
 .to(".comment",{ opacity : 0,} )
 .to(".pourQui",{ opacity : 1,} )
 .to(".cardHot",{opacity: 1, })
 .to(".cardHot",{opacity: 0, })
 .to(".cardBat",{opacity: 1, })
  .to(".cardBat",{opacity: 0, })
  .to(".cardImm",{ opacity : 1,} )
  .to(".cardImm", { opacity :0,})
  .to(".cardEv",{ opacity : 1,} )
  .to(".cardEv", { opacity :0,})
   .to(".cardBtp", { opacity :1,})
  .to(".cardBtp",{ opacity : 0,} )
   .to(".cardComm", { opacity :1,})
.to(".pourQui",{ opacity : 0,} )
 
     
},

  },
};
</script>

<style scoped>
#presentation {
  color: white;
   overflow-y: hidden;
}
#presentation p {
  font-size: 25px;
}
.image {
  height: 100vh;
  width: 100%;
  background-image: url("../assets/presentation/qui.webp");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titre {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 70px;
  color: #ffd75f;
  letter-spacing: 10px;
}
h2 {
  padding-bottom: 60px;
  font-size: 40px;
  color: #d3b24c;
  letter-spacing: 5px;
}
.scroll{
  width: 100%;
  height:100vh;
  justify-content: center;

 
}

.qui {
  position :absolute;
  padding: 50px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 1;
}

.pourQui {
  position :absolute;
  padding: 50px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  opacity:0;
}
.container {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bouton {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  margin: 45px;
}
i {
  font-size: 50px;
  cursor: pointer;
  color: #d3b24c;
}
.surligne:hover {
  opacity: 0.8;
  border-bottom: 2px solid #d3b24c;
}

.card {
  display: flex;
  flex-direction: column;
  padding:150px 0 0 0 ;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
}
.card p {
  width: 50%;
  padding-bottom: 20px;
}
h3{
  padding-top:30px;
  font-size:30px;
  color:#d3b24c;
}
.cardHot{
  position: absolute;
  opacity: 0;
}
.cardBat{
  position: absolute;
  opacity: 0;
}
.cardImm{
  position: absolute;
  opacity: 0;
}
.cardEv{
  position: absolute;
  opacity: 0;
}
.cardBtp{
  position: absolute;
  opacity: 0;
}
.cardComm {
  position: absolute;
  opacity: 0;
  
}

.pourquoi {
  position :absolute;
  padding: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity:0;
}

.comment {
  position :absolute;
  padding: 50px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 0;
}

.texte {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  text-align: left;
}
.texte p {
padding:20px;
width: 80%;
order: 2;

}

.backColor {
  background-color: #111616;
}
a {
  text-decoration: none;
  color: #d3b24c;
}
span {
  color: #d3b24c;
  font-weight: bold;
}

@media screen and (max-width: 504px) {
  .image {
    height: 120vh;
    margin-bottom: 20px;
  }
  .titre h1 {
    font-size: 50px;
    padding-bottom: 10px;
  }
  #presentation p {
    font-size: 20px;
  }
  .qui,
  .pourQui,
  .pourquoi,
  .comment {
  
  height: 100%;
  padding:50px 0 50px 0;
  width: 100%;
  }
  img{
    padding:50px 0 50px 0;
  }
  .imageCard{
    width: 100%;
  }
  
  .texte p {
    width: 100%;
  }
  img {
    height: 40%;
  }
  .bouton {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .card {
    flex-direction: column;
    width: 100%;
    height: 80%;
  }
  .card img {
    width: 100%;
  }
  .card p {
    width: 100%;
    padding: 50px 0 0 0;
  }

  .comment .texte p {
    order: 2;
  }
}
@media screen and (min-width: 505px) and (max-width: 959px) {
  #presentation p {
    font-size: 20px;
  }
  .pourQui {
    height: 200%;
    padding: 20px 0 60px 0;
  }
  .texte {
    flex-direction: column;
  }
  .texte p {
    width: 100%;
  }
  img {
    height: 50%;
  }
  .bouton {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .card {
    flex-direction: column;
    width: 100%;
    height: 80%;
  }
  .card p {
    width: 100%;
  }
  .comment .texte p {
    order: 2;
  }
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
   .qui,
  .pourQui,
  .pourquoi,
  .comment {
    height: 100%;
    padding:50px 0 50px 0;
  }
  img{
    padding: 50px;
  }
  .card{
      flex-direction: column;
    width: 100%;
    height: 80%;
  }

  .texte {
    flex-direction: column;
  }
  .texte p {
    width: 100%;
  }

  .bouton {
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .card p {
    width: 100%;
  }
  .comment .texte p {
    order: 2;
  }
}
</style>

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[ludogou]

you are right when trying to redo I found the problem in the css where I had put an "overflow-x: hidden;", I removed it and my screen does not stop anymore. Thank you !