I have a transition from one page to another using barba.js, after visiting that next page if you hit the back button it doesn't go back to the first page. The URL quickly updates to the first, then back the second URL and then it just refreshes the second page.
After one (or more) clicks of the back button, it returns to the first page.
const mainOverlay = document.querySelector("#main-overlay");
if (history.scrollRestoration) {
history.scrollRestoration = "manual";
}
barba.init({
transitions: [
{
name: "home",
leave(data) {
// Move target element
const target = data.trigger.closest(".transition-target");
if (target) {
const yDistance = target.getBoundingClientRect().top;
var tl = gsap.timeline();
tl.to(target, {
top: -(yDistance - 31) + "px",
left: "0",
width: "100%",
zIndex: 100,
duration: 0.9,
ease: "expo.out",
});
return tl.play();
}
},
enter(data) {
window.scrollTo(0, 0);
const newTarget =
data.next.container.querySelector(".transition-target");
var tl = gsap.timeline();
tl.to(window, { scrollTo: { y: 0 }, duration: 0 })
.to(newTarget, {
zIndex: 5,
duration: 0,
});
},
},
],
});
The expected behaviour is on clicking the back button it just returns to the first page. No transition is expected during that.
HTML if needed:
<body>
<div data-barba="wrapper">
<div class="relative" data-barba="container" data-barba-namespace="home">
<div id="main-overlay" class="fixed w-full h-full z-40 bg-white hidden opacity-0"></div>
...
</div>
</div>
</body>