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>
