I have a transitions I'm trying to perform that works. But when I change page I should reset my javascript but I can't. Someone to help me? Thanks
My code:
function delay(n){
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n)
})
}
function pageTransition(){
let tl = gsap.timeline();
tl
.to(fermerTest, {display:'none', duration:0.01})
.to(ouvrirTest, {display:'block'}, '<')
.to('.loading-screen', {
duration:1.2,
height:"100%",
top:'0%',
ease:'Expo.easeInOut',
},'<')
.to('.loading-screen', {
duration:1,
height:"100%",
top:"100%",
ease:'Expo.easeInOut',
delay:0.3,
})
.to('.ul-navbar', {
y:'-100%',
duration:0.1,
}, '-=0.90')
.to('.deuxieme-slide', {
y:'-100%',
duration:0.1
}, '<');
}
function contentAnimation(){
document.querySelector('body').classList.remove('overflow')
document.querySelector('body').classList.remove('open')”
}
barba.hooks.enter(() => {
window.scrollTo(0,0);
})
barba.init({
sync:true,
transitions:[{
async leave(data){
let done = this.async();
pageTransition();
await delay(1500);
done();
},
async enter(data){
contentAnimation()
},
async once(data){
contentAnimation()
},
}],
})
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/6434cb6a94.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<title>Martin Manderveld</title>
</head>
<body data-barba="wrapper">
<div class="load-container">
<div class="loading-screen"></div>
</div>
<div class="cursor"></div>
<div class="scrollbar"></div>
<div class="clickScrollbar"></div>
<div class="div-loader">
<div class="div-gauche">
<div class="div-animation-loader">
<div class="rond-loader rond1"></div>
<div class="rond-loader rond2"></div>
<div class="rond-loader rond3"></div>
<div class="rond-loader rond4"></div>
</div>
</div>
</div>
@include('partial/navbar')
<div data-barba="container" data-barba-namespace="home-section">
@include('page/home')
<div class="div-cache">
@include('page/about')
@include('page/projet')
@include('page/service')
@include('page/contact')
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
{{-- <script src="https://unpkg.com/@barba/core"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script class="main-script" src="{{asset('js/main.js')}}"></script>
</body>
</html>
