Refreshing page GSAP animations are not working using BarbaJS

[officialgio]

The problem

When I enter the main page (index.html) and navigate to the work page everything works as expected. But once I refresh the page in the workpage and not the initial page everything stops working -- what could be the reason for this?

I've tried refreshing animations in the barbajs code and it seems that it doesn't work even with the usage of Barba views to reinitialize the animations explicitly. Perhaps I'm calling my animations in the wrong barbaHook? I've already made issues with GSAP and I was told that this issue could be related to barba and not gsap itself but I'm still trying to figure it out with GSAP as well.

For full code: https://github.com/officialgio/officialgio.github.io
Visual: https://www.youtube.com/watch?v=FbkBvcjlCYI

// NOTE: data.next = current container
barba.init({
    sync: true,
    timeout: 7000,
    debug: true, // !IMPORTANT
    views: [{
        namespace: 'work-page',
        afterEnter() {
            initWorkAnimations();
            ScrollTrigger.refresh();
            console.log('WORRRRRRK PAFGE ENTER');
        },
    }],
    transitions: [{
        name: 'default',
        async once(data) {
            // Once page loads
            initSmoothScroll(data.next.container);
            initScripts();

        },
        async leave(data) {
            pageTransitionIn(data, this)
            await delay(1200)
            data.current.container.remove();
        },
        async enter(data) {
            pageTransitionOut(data, this);
        },
        async beforeEnter(data) {
            ScrollTrigger.getAll().forEach((x) => x.kill());
            // ctx.revert(); something I tried doing but nothing worked
            console.log('destroying everything');
            locoScroll.destroy(); // Optional!
            initSmoothScroll(data.next.container);
            initScripts();
            ScrollTrigger.refresh(); // IMPORTANT!
        }
    },
    {   // Optional
        name: 'to-home',
        from: {
        },
        to: {
            namespace: ['first-page']
        },
        once(data) {
            // do something once on the initial page load
            initSmoothScroll(data.next.container);
            initScripts();
        },
    }]
})

Expected behavior

No matter where the page refreshes all animations should be working even when transitioning from page to page at any page.

Actual behavior

Animations break once is refreshed at any other page (not being the index.html) meaning the animations stop working for my workpage.html and the rest.

ADDITIONAL BUG (MIGHT NOT BE RELATED)

I'm also having another weird issue where I want to run all my animations at the same time by setting an id on each body tag and checking if it exist then execute that animation. This works except once I get to the initWorkAnimations() stuff also breaks except the first page.

For example:

function initHomeAnimations() {

    if (document.body.id === 'first-page') { // WORKS !!

        //Page 2
        const tlH = gsap.timeline(
   . . . .
}

function initWorkAnimations() {

    if (document.body.id === 'work-page') { // WORKS !! BUT NOW initHomeAnimations() doesn't work

        //Page 2
        const tlH = gsap.timeline(
   . . . .
}

If I see 'work-page' to'first-page' everything works even the initHomeAnimations() which is weird but not when I set it to 'work-page'.

NOTE: I'm calling all my animations in my initScripts() but I excluded the initWorkAnimations() since it didn't work so I tried doing it explicitly with views.

// Main Scripts
function initScripts() {
    initNavAnimations();
    initMagneticButtons();
    initButtonsAnimations();
    initHomeAnimations();
    // initWorkAnimations();
}

barba.init({
    sync: true,
    timeout: 7000,
    debug: true, // !IMPORTANT
    views: [{
        namespace: 'work-page',
        afterEnter() {
            initWorkAnimations(); // WORKS
            ScrollTrigger.refresh();
            console.log('WORRRRRRK PAGE ENTER');
        },
    }],

[xavierfoucrier]

Hi @officialgio,

This issue is more related to how your code is running than Barba v2 issue...

For this kind of question/help, please use the Slack workspace in order to ask the whole community for support.
Join using the invite link here: https://barba.js.org/docs/getstarted/useful-links/#Developer.