Barba: When using footer menu links the page transitions to the bottom of the next page, not the top

Created on 28 Sep 2020 · 3Comments · Source: barbajs/barba

Hi,

I have a site using barba.js that has a footer menu. I'm using a simple GSAP Tween to fade the pages in and out which works OK, but if you use the footer menu links, when the next page is transitioned in you always start at the bottom of the page (footer) instead of the top?

I can't work out what the problem is — basic HTML and full JS below. Any help would be awesome.

The basic page HTML is

<body data-barba="wrapper">
    <div class="wrapper" data-barba="container">
        <header>
            // menu links
        </header>

            // content

        <footer>
            // menu links
        </footer>
    </div>
</body>

JAVASCRIPT

var animationEnter = (container) => {
return gsap.from(container, {autoAlpha: 0, duration: 1.2, ease:'none', clearProps: 'all', ease: 'power1.inOut'})
}

var animationLeave = (container, done) => {
    return gsap.to(container, {autoAlpha: 0, duration: .7, ease:'none', clearProps: 'all', ease: 'power1.inOut', onComplete: () => done()})
}

barba.init({
    transitions: [
        {
            once({next}){
                animationEnter(next.container)
            },
            leave({current}){
                console.log('leaving')
                var done = this.async();
                animationLeave(current.container, done)
            },
            enter({next}){
                console.log('entering')
                animationEnter(next.container)
            },

        }

    ]
})

duplicate question

Source