i tried using barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) to no avail. the divs should cycle when clicking on the dialogue box. here is the full code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
<link rel="shortcut icon" href="https://files.catbox.moe/h33w19.png">
<link rel="stylesheet" href="/style.css">
<script src="https://kit.fontawesome.com/37b69e3f02.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"></script>
</head>
<body>
<div data-barba="wrapper">
<main data-barba="container" class="container">
<div class="icon"><img src="https://files.catbox.moe/v1ccbr.png" width="400"></div>
<div class="dialoguewrap">
<div class="arrowleft" style="visibility:hidden;"><a href="/index.html" data-direction="prev"><img src="https://files.catbox.moe/mosfgm.png"></a></div>
<div class="box">
<div class="inner">
<div class="header">1/6</div>
Gabriel jolts awake. "That dream again..."<br><br>
He's been having these strange nightmares.
<div class="footer"><i class="fa-solid fa-caret-down"></i></div>
</div>
</div>
<div class="box hidden">
<div class="inner">
<div class="header">2/6</div>
Each and every nightmare starts and ends the same way. He would be going about his daily life when suddenly abnormal occurrences would happen.
<div class="footer"><i class="fa-solid fa-caret-down"></i></div>
</div>
</div>
<div class="box hidden">
<div class="inner">
<div class="header">3/6</div>
Once it was the beginning of World War 3. Another time it was a world-ending meteor from space. The strangest had to be the one where aliens attacked.
<div class="footer"><i class="fa-solid fa-caret-down"></i></div>
</div>
</div>
<div class="box hidden">
<div class="inner">
<div class="header">4/6</div>
And every time, without fail, he would die at the end.
<div class="footer"><i class="fa-solid fa-caret-down"></i></div>
</div>
</div>
<div class="box hidden">
<div class="inner">
<div class="header">5/6</div>
He was tired of these nightmares.
<div class="footer"><i class="fa-solid fa-caret-down"></i></div>
</div>
</div>
<div class="box hidden">
<div class="inner">
<div class="header">6/6</div>
Gabriel decides to put it all past him for the time being. He gets up from bed and gets ready for school. It's his last year of high school. Only a few more weeks before he graduates.
<div class="footer"><i class="fa-solid fa-caret-down"></i></div>
</div>
</div>
<div class="arrowright"><a href="/pages/page2.html" data-direction="next"><img src="https://files.catbox.moe/mosfgm.png"></a></div>
</div>
<script src="/scripts/main.js"></script>
<script>barba.Pjax.start();</script>
<script>
barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {
var hints = $('.box');
var i = 0;
$('.inner').on('click', function(){
i = (i + 1) % hints.length;
hints.hide().eq(i).show();
});
}(barba, jQuery));
</script>
</main>
</div>
</body>
</html>
and here is a codepen. https://codepen.io/adilene/pen/ZEmEybM
i solved it myself! i had to add a hook to call the function after every new page. here's the code:
function shuffle(){
var hints = $('.box');
var i = 0;
$('.inner').on('click', function(){
i = (i + 1) % hints.length;
hints.hide().eq(i).show();
})
}
$(document).ready(function() {
shuffle();
});
barba.hooks.after(() => {
shuffle();
});
barba.init({
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
i'll update the codepen to reflect my answer.