Как реализовать подобный переход с помощью barba.js?
Нужно чтобы с того же места линка на какой нажимаем, розъезжалась новая страница Вот пример, того что я пытался сделать
barba.init({
transitions: [{
name: 'fromProductsToItem',
from: {
namespace: ['home','products']
},
to: {
namespace: ['prod']
}, afterLeave: ({current, next}) => {
return new Promise( resolve => {
const zoom = () => {
let tl = gsap.timeline();
let left = lastClicked.getBoundingClientRect().left;
let top = lastClicked.getBoundingClientRect().top;
let width = lastClicked.clientWidth;
let height = lastClicked.clientHeight;
let clonedElement = lastClicked.cloneNode(true);
clonedElement.classList.add('is-cloned');
current.container.appendChild(clonedElement);
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
tl.set(clonedElement, { x: left, y: top, width: width, height: height});
tl
.fromTo(clonedElement, {
x: left,
y: top,
width: width,
height: height,
duration: 1.5,
},
{
height: screenHeight,
width: screenWidth,
onComplete: function () {
resolve();
}
})
}
zoom();
});
},
once({next, current}) {
enterPageProduct(next.container)
},
enter({next}) {
enterPageProduct(next.container)
}
}