Как реализовать подобный переход с помощью barba.js?

https://www.reed.be/

Нужно чтобы с того же места линка на какой нажимаем, розъезжалась новая страница Вот пример, того что я пытался сделать

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)
            }
        }

Ответы (0 шт):