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