Jump to content
Search Community

Refreshing page GSAP animations not working using BarbaJS

Giovanny7 test
Moderator Tag

Recommended Posts

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. 

 

 

// Main Scripts
function initScripts() {
    initNavAnimations();
    initMagneticButtons();
    initButtonsAnimations();
    initHomeAnimations();
  	//initWorkPageAnimations() --> it used to be here but I'm now calling it specifically on the barba view to see if something works.
}

// NOTE: data.next = current container
barba.init({
    sync: true,
    timeout: 7000,
    debug: true, // !IMPORTANT
    views: [{ // THIS IS WHERE I'M CALLING MANUALLY BUT NOTHING STILL WORKS
        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());
            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();
        },
    }]
})

 

The entire code can be found here you may fork my project and use liveserver: https://github.com/officialgio/officialgio.github.io

 

 

 

 

 

Link to comment
Share on other sites

This is not helpful. I've tried alraeady some of their methods but nothing seems to work. I uploaded a youtube video to see clearly what my issue is

 

LINK: 

 

Also once I refresh and go back to the main page all my animations are broken which I didn't include in the video. 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen, Stackblitz or CodeSandbox that demonstrates the issue? 

 

I strongly suspect the issue is related to LocomotiveScroll or Barba, neither of which we can support because they're not GreenSock products. But just make sure that you're firing things in the right order, like loading everything in so the elements exist in the DOM, then setting up your LocomotiveScroll stuff, and finally your ScrollTrigger stuff. If you are mounting/unmounting stuff, make sure you do proper cleanup so that you don't have animations/ScrollTriggers hanging around that are controlling elements that exited the DOM. gsap.context() makes that super easy. 

 

Please don't send us your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Hi, 

 

Thank you for responding I'm trying to upload everything to codesanbox but is acting weird. It doesen't read my images and gsap is not being defined. 

 

Please see: https://codesandbox.io/s/compassionate-wescoff-92sm2w?file=/app.js

 

 

Also, I've already tried using gsap.context() since it was suggested to revert the animations once I transition and I call the ctx.revert() in my barba transitions but nothing worked. I put all my animations inside the context such as my home animations. Maybe I'm calling the functions wrong?

 

So something like this: 

// 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(); // ----> REVERT or KILL?????
            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();
        },
    }]
})

 

let ctx;

function initHomeAnimations() {

    if (document.body.id === 'first-page') {
        ctx = gsap.context(() => {
            //Page 2
            const tlH = gsap.timeline({
                scrollTrigger: {
                    trigger: '.background',
                    // markers: { startColor: 'blue', endColor: 'blue' },
                    scrub: true,
                    start: '-40%',
                    end: '40%',
                },
            });
            tlH.fromTo(...)
          ....
}
Link to comment
Share on other sites

Hi,

 

I have zero experience with Barba so I'm not sure at how I should be looking in your example, which has some errors because you have some relative paths to some image files. Try replacing those with some unsplash links or something like that.

 

Basically what could be the problem here is that you refresh your work page and when the code runs something definitely is not working as expected. You should have markers in your development environment in order to see what happens there, also use the console and debugger in order to see what's happening.

 

The hooks from Barba are running when the page is refreshed? Are you 100% sure that this condition meets when you refresh the page?

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

}

Your work.html has this:

<body id="work-page" data-barba="wrapper">

Finally  you have this in your initWorkAnimations method:

const texts = gsap.utils.toArray('anim');

That selector is not pointing towards any class, ID or any other attribute of an HTML tag. You do have some elements with an anim class in your page so you should add the dot to that.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hey Rodrigo,

 

I've changed it to 'work-page' however once I do my transition to the work-page it doesn't work. It's not even being called once I transition in so I don't see WORK ANIMATIONS PLAYED!!! on my console. But, I see it being fired up once I refresh my page but the animations are broken.

 

function initWorkAnimations() {
    if (document.body.id === 'work-page') {
        console.log("WORK ANIMATIONS PLAYED!!!");
        const container = document.querySelector('.scrollx');
        const sections = gsap.utils.toArray('.scrollx section');
        // const texts = gsap.utils.toArray('anim');
        const mask = document.querySelector('.mask');
      . . .
}

Mind you that I'm firing up all my scripts in this function: 

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

And is being used in the barba hooks

barba.init({
    sync: true,
    timeout: 7000,
    debug: true, // !IMPORTANT
    views: [{
        namespace: 'work-page',
        beforeEnter() {
          // THIS VIEW MIGHT BE USELESS 
            console.log('WORRRRRRK PAFGE ENTER');
        },
    }],
    transitions: [{
        name: 'default',
        async once(data) {
            // Once page loads
            initSmoothScroll(data.next.container);
            initScripts(); // FIRE ALL SCRIPTS ONCE PAGE LOADS 

        },
        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());
            console.log('destroying everything');
            locoScroll.destroy(); // Optional!
            initSmoothScroll(data.next.container);
            initScripts(); // FIRE ALL BEFORE ENTERING THE NEW TRANSITIONED PAGE
            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();
        },
    }]
})

 

Link to comment
Share on other sites

I tried something else 

 

I removed the condition from the initWorkAnimations() and now everything works as expected but....

if (document.body.id === 'work-page') 

 

Once I transition I get a ton of 

rollTrigger.min.js:10 Element not found: .intro
K @ ScrollTrigger.min.js:10
ScrollTrigger.min.js:10 Element not found: .background
K @ ScrollTrigger.min.js:10
gsap.min.js:10 GSAP target .highlight not found. https://greensock.com
R @ gsap.min.js:10
gsap.min.js:10 GSAP target  not found. https://greensock.com
R @ gsap.min.js:10
ScrollTrigger.min.js:10 Element not found: .background
K @ ScrollTrigger.min.js:10
gsap.min.js:10 GSAP target .highlight not found. https://greensock.com
R @ gsap.min.js:10
ScrollTrigger.min.js:10 Element not found: .work
K @ ScrollTrigger.min.js:10
ScrollTrigger.min.js:10 Element not found: .background
K @ ScrollTrigger.min.js:10
gsap.min.js:10 GSAP target .work-images not found. https://greensock.com
R @ gsap.min.js:10
gsap.min.js:10 GSAP target  not found. https://greensock.com
R @ gsap.min.js:10
gsap.min.js:10 GSAP target .work__description not found. https://greensock.com
R @ gsap.min.js:10
gsap.min.js:10 GSAP target  not found. https://greensock.com
R

that's because I transitioned and I'm calling the initScripts() each time, correct? But I kept my condition for the initHomeAnimations() so I don't know why is being entered. 

if (document.body.id === 'first-page')

 

Now, going back to the old issue, assuming that I'm not refreshing from the workpage.html the animations work as expected but once I DO REFRESH ON THE workpage.html all my animations break even on the index.html.

 

You can check the live site here: https://officialgio.github.io/

Link to comment
Share on other sites

Hi,

 

As I mentioned I don't know anything about Barba and it seems to me that this is more related to when your code is executed and not what is executed. The fact that you have reported that your animations work in some situations is a clear indication of that. The main issue is that the elements are not in the DOM when the code runs, since you're not getting the console logs you're expecting.

 

Once again, Barba is not a GSAP product and we can't offer full support for these type of situations since is not a GSAP related issue. In another thread I linked a collection of videos by @Ihatetomatoes where Peter shows how to use GSAP with Barba. Maybe you should use some time to watch them and perhaps catch what could be not working in your case.

 

The only advice I could offer you now is to run your code in the enter hook, or perhaps try different combinations and check the Barba API for that. The point is when the transition animation starts and once the content of the previous page is not visible anymore, you should kill all your GSAP instances, that is what GSAP Context can do for you super easy, that's why I suggested it. Then once the new page is in place and the DOM structure is what you're expecting to be on that page, run all your GSAP code and put it in a GSAP Context instance for easy cleanup when you go to another route. This approach should work when you refresh as well.

 

At this point I strongly suggest you to ditch GSAP entirely, yep that's right, forget about animations, ScrollTrigger and all that stuff and focus on when you have the DOM you expect to have so GSAP can do it's work. When you have that, then plug GSAP back in and finally when your GSAP animations are working as expected add ScrollTrigger in order to get your animations to be controlled by the scroll position.

 

Good luck with your project!

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...