Barba and GSAP duplicate elements after page transaction in certain pages or disappear

[janivibe]

Hi there, I'm working on a project as a new freelancer. I've completed building a website for a project, but after finishing it, I realized I needed to add page transitions. For page transitions, I used barba.js and gsap.js. However, I'm currently learning barba.js and struggling with its correct usage. I consulted barba.js documentation and ChatGPT for help, and I've written code for page transitions that is working correctly in principle.

However, the issue I'm facing is that after page transitions, some elements either duplicate in certain pages or disappear. I've spent a lot of time trying to understand this issue, but I'm unable to figure it out. I'm providing the barba.js code below, but I can't share the any demo or code of the website because, as mentioned, this is a freelance project. I hope you understand.

Another thing, all functions like a1, a2, a3... are wrapped inside $(document).ready(function() {...}), and I cannot remove it from any section; otherwise, my animations won't work.  So I have to use $(document).ready(function() {...}) or document.addEventListener("DOMContentLoaded", () => {...}) in any section/function I hope you understand my situation.

 

This is a short demo for your understanding of what I mean by $(document).ready(function() {...}) or document.addEventListener("DOMContentLoaded", () => {...}) , 

 

/* ------------------------------- PAGE LOADER ------------------------------ */
function a2 (){
$(document).ready(function() {
const Loadertimeline = gsap.timeline();
Loadertimeline.to(".loader-text span", {
y: 100,
stagger: 0.05,
duration: 2,
delay: 1,
ease: "expo.inOut",
// skewX: 50,
});

Loadertimeline.to(".loader", {
height: 0,
duration: 1,
delay: -1.3,
ease: "expo.inOut",
});

Loadertimeline.to(".loader-sec", {
height: 0,
duration: 1,
delay: -1,
ease: "expo.inOut",
});

Loadertimeline.to(".loader-sec-1", {
height: 0,
duration: 1,
delay: -0.9,
ease: "expo.inOut",
});



/* ------------------------------ HERO HEADING ------------------------------ */
new SplitType(".hero-headings-wrap h1", {
types: "lines, words, chars",
tagName: "span",
});
Loadertimeline.from(
".hero-headings-wrap h1 .char",
{
y: "200%",
duration: 1.5,
ease: "circ.out",
stagger: 0.02,
delay: -0.8,
},
"hero"
);

Loadertimeline.from(
".hero-image",
{
height: "0rem",
duration: 1.5,
ease: "circ.out",
},
"hero"
);

document.querySelectorAll("nav *").forEach(function (navItem) {
navItem.style.pointerEvents = "auto";
});


});
}

 

/* -------------------------------------------------------------------------- */
/* WORK SECTION */
/* -------------------------------------------------------------------------- */
function a8(){
$(document).ready(function() {
document.querySelectorAll(".project-image img").forEach((img, i) => {
gsap.to(img, {
y: "-15%",
duration: 6,
ease: "power1.inOut",
scrollTrigger: {
trigger: img,
start: "top 150%",
end: "bottom top",
scrub: true,
// markers: true
},
});
});
});
};

 

Like that,  And here is the barba.js code I wrote lastly:

  

function initGsapAnimations() {
a1();
a2();
a3();
a4();
a5();
a6();
a7();
a8();
a9();
a10();
a11();
a12();
a13();
a14();
a15();
a16();
a17();
a18();
a19();
a20();
a21();
a22();
a23();
a24();
a25();
a26();
a27();
}


initGsapAnimations();
// Barba.js initialization
document.addEventListener("DOMContentLoaded", () => {
// Initial load animations and Lenis initialization
initGsapAnimations();
initLenis();

// Initialize Barba.js
barba.init({
transitions: [{
async leave(data) {
const done = this.async();

// Animate out current page
gsap.to(data.current.container, {
opacity: 0,
duration: 1,
onComplete: done
});
},
async enter(data) {
// Animate in new page
gsap.from(data.next.container, {
opacity: 0,
duration: 1
});

// Re-initialize GSAP, ScrollTrigger, Lenis or other scripts
initGsapAnimations();
initLenis();
},
async once(data) {
// This runs once when the page loads
initGsapAnimations();
initLenis();
}
}]
});
});

 

Please help me fix this issue; I'm stuck because of this problem.

[Cassie]

Hi there!

I'm afraid that without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue?

No need to worry about NDA or 'sharing the project' - We don't need to see your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a working example using barba that you can start from.
https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files.
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

You can watch this tutorial series by  @Ihatetomatoes about using Barba and GSAP:

 

Happy Tweening!