[Flip Plugin doesnt work properly after page transition with barba js]

IT WORKS !!

thanks a lot man, i tried it and it works, and what matters is now i unsterstand more the barba lifcycle!

the next container should be cleared after the flip work is done...

now i need to fix the zIndex of the img element, i want it to be on top of everything...

 

thanks again.

[Flip Plugin doesnt work properly after page transition with barba js]

Hello everyone,

I faced a problem using gsap Flip plugin, in the leavebarba hoook works fine, also when i leave the home page, but after a page transition from about page to home, something doesnt work properly, the item moves from the original container to a different postion from the desired container...

i tried a lot of solutions, using barba global hooks, also the async await, i used the flip.fit and also the flip.to, and i read the answers in this forum about this topic, honestly nothing worked for me.

 

here is a github link of the project: https://github.com/Ali-Dakoumi/Page-Transition-Gsap-Flip-Plugin

you can see it live here : https://ali-dakoumi.github.io/Page-Transition-Gsap-Flip-Plugin/about.html

 

 

the leaving home animation works fine,

But after leaving the about page with a simple fade out animation, the problem is when i used a flip animation while entering home, it doesnt work...

 

const leavingHome = (container) => {
  const state = Flip.getState(about);
  about.classList.add("bigimage");
  return Flip.fit(about, ".fullscreen", {
    duration: 3,
    ease: Expo.easeInOut,
    absolute: true,
    clearProps: "all",
  });
};


barba.init({
  debug: true,
  sync: true,
  transitions: [
    {
      name: "from-home-transition",
      to: {
        namespace: ["about"],
      },
      async leave({ current }) {
        const hometitle = document.querySelector(".hometitle");
        const infos = document.querySelectorAll(".info");
        const img = document.querySelector(".item > img");
        const tl = gsap.timeline();
        await tl.to(hometitle, 0.5, { opacity: 0 }).to(
          infos,
          0.5,
          {
            opacity: 0,
          },
          "-=0.5"
        );
        await leavingHome(current.container);
      },

      enter({ next }) {
        enterAnimation(next.container, 0);
      },
    },
    {
      name: "to-home-transition",
      to: {
        namespace: ["home"],
      },
      async leave({ current }) {
        await leaveAnimationAbout(current.container);
      },
      enter({ next }) {
        const fullscreen = document.querySelector(".fullscreen");
        const item = document.querySelector(".item");
        const img = document.querySelector(".img");
        gsap.to(next.container, 0, {
          opacity: 1,
        });
        const newstate = Flip.getState(img);
        (img.parentNode === item ? fullscreen : item).appendChild(img);
        Flip.to(newstate, {
          duration: 1,
          ease: "power1.inOut",
          delay: 1,
          absolute: true,
        });
      },
    },
  ],
});