为什么 GSAP 输入不透明度 animation 无法正常工作？

Question

I'm using GSAP with barba.js to create smooth page transitions but I have a bug that I can't debug. The transition itself is working as expected, the page fades, a pjax call occurs, the page content is updated and then the new page content fades in.

However, once the page has faded back in, if I repeat the transition by going to another page, the fade-in opacity gets stuck before reaching it's final value of '1'. I have tested this across pages and the first transition is always correct, regardless of which enter/leave pages are being used.

My question is why? Here is my barba.js using GSAP:

barba.init({

transitions: [{

    name: 'test-transition',

    leave(data) {
        return gsap.to(data.current.container, {
            opacity: 0 // works correctly
        });
    },

    afterLeave() {
        reinitModal(); // works correctly
    },

    beforeEnter: ({ next }) => {
        window.scrollTo(0, 0); // works correctly
        reinitCounter(); // works correctly
        reinitScripts(); // works correctly, note this doesn't reinitialise this jS file
    },

    enter(data) {
        return gsap.from(data.next.container, {
            opacity: 0 // problem child, only on cycles after the first one
        });
    }
    
}]

});

See below the image of console showing the opacity stopping on a random percentage on second page load.

Has anyone come across this before, is there a known solution?

Answer 1

Update

Workaround solution:

Despite asking around on several forums and several more hours of debugging I have been unable to get to the bottom of this, so I have created a little workaround solution which produces no noticeable performance lag etc.

Instead of using gsap.from we use gsap.to in combination with a separate jS function to reset the opacity to 0 in the middle of the transition. Below is the workaround transition:

barba.init({
    // debug: true,
    // logLevel: 'error',
    transitions: [{
        name: 'test-transition',

        leave(data) {
            reinitProjectDetails();
            return gsap.to(data.current.container, {
                opacity: 0
            });
        },

        afterLeave() {
            reinitModal();
        },

        beforeEnter: ({ next }) => {
            window.scrollTo(0, 0);
            reinitTitleScene();
            reinitScripts();
            reinitOpacity(); // this is calling our external opacity reset script
            reinitHeader();
        },

        enter(data) {
            return gsap.to(data.next.container, { // note gsap.to instead of gsap.from
                opacity: 1, // animating Opacity value to '1' rather than from '0'
                delay: 0.45, // makes for a smoother transition
            });
        }
        
    }]
}); 

Outside of the transition script is the opacity reset/reinit function which looks like this:

function reinitOpacity() {
    $('main').css("opacity", "0"); // note see below
}

Note that the 'main' container is whichever container has the 'barba-container' class. I hope this helps someone in need.