Jump to content
Search Community

Flip Plugin doesnt work properly after page transition with barba js

Ali Dakoumi test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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,
        });
      },
    },
  ],
});

 

Link to comment
Share on other sites

  • Solution

Hello Ali,

 

I tinkered around with your code a bit, and I don't think any of what you are experiencing is related to GSAP but rather to the logic of how barba works and your code having some flaws with regard to that, the following being the biggest I think:

 

When both containers are in the DOM at the same time, they are not stacked above each other on the z-axis but rather like this

 

rect846.png.eee9422c366e6788e04417d9bfa2975f.png

 

 

...which you can test by logging out their .offsetTop first thing in the enter-hook e.g.

 

Here's how I see it:

Since you are not waiting for a promise to be fulfilled in the enter-hook, barbas lifecycle will continue the moment your tween starts, but in between the afterEnter and the after hooks of barba, the current-container will be removed...

 

lifecycle-diagram.png

 

[ that image is from the barba docs, but also to be found in this very helpful tutorial: ]

https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ ]

 

 

 

...thus there will be a layout shift in the DOM. So the values that you recorded by getting the state of the image before the tween started will probably not be correct anymore just a moment later. Although I used bit of a different logic than you did, I got it to work with one of the key-elements being setting the next-container to position fixed (and aditionaly inset 0 and zIndex -1) and in the onComplete callback of the tween, clearing it again.

 

gsap.set(next.container, { position: "fixed", inset: "0", zIndex: "-1" })

 

I'm not sure how much that will help you, but you can try tinkering with your code with the afore-mentioned in mind and see where it gets you.

 

I hope that will help a bit though.

 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...