GSAP and Barba.js

[StudioProjects 4 Likes (Newbie)]

HI Folks!

 

I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled.  It may be something silly that I've overlooked due to being so tired.

 

Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead.

 

I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well.

 

Thanks so much!

 

Andy :)

about.html contact.html index.html projects.html main.js transitions.js main.css

See the Pen QWmOBzo by StudioProjects (@StudioProjects) on CodePen

[StudioProjects 4 Likes (Newbie)]

I just noticed that all of the namespaces were set to "home", I've corrected this, but it's made no difference.

[thehaes 14 Likes (Newbie)]

I'm not sure if this is what you're going after, as you didn't explain it that well what you're trying to achieve (sorry for being straightforward :P), but from what I can see you're using sync mode, so probably you want both animations happen at same time, and you see some annoying flicker, and other animation doesn't play correctly, right?

 

In sync mode, you neeed to handle the positions absolute/fixed of barba containers yourself, as they will show at the same time in static position, the next page container will be next to the old one (which will be out of screen), until the previous page container disappears (after first transition is complete) and the new container will show in position of old one - just imagine two divs, that have width of 100% viewport next to each other, and you change display of the first one to "none" - it's similar behaviour.

 

So long story short, you need to add class .fixed (you can name it  whatever), set position to fixed and higher z-index

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

Then on your barba leave hook, you need to add (with jQuery, I tried to do it with vanilla js but for some reason it doesn't work for me)

$(data.next.container).addClass('fixed');

And lastly, on your enter, afterEnter, or after hook (depending on your setup), you have to remove it

$(data.next.container).removeClass('fixed');

Then the transitions should work. Hope it works for your case!

[StudioProjects 4 Likes (Newbie)]

Hi!

 

Thanks so much for your response!

 

I added the .fixed selector to the css and the jquery on the hooks but the transitions still aren't working, the transition fires, and the slide-in menu is now retracted, but every page now directs to the about.html page. I've uploaded the site to www.frontenddevelopment.com.au/barba so you can see what's happening in-situ.

 

If you click on the about button, there is no transition at all and the UI loads about.hml - if you click on any of the other buttons in the slide-in nav, the transition  fires, but only partially, and the UI loads the about.html page on every button. The slide-in nav is now closed after the transition, so I'm definitely a step closer, but it's still not functioning as one would expect. The console is throwing any errors, so I can only assume that this is some kind of caching issue caused by Barba. To be honest, this library is sketchy and difficult to use and I'm nor a React dev so I'm not used to using hooks. I'll give it another day and if I can't get it working, I'll refactor everything for Swup and give that a go - its architecture appears to be far more stable and it appears to be far more user friendly than Barba. My apologies if my frustrations with this library are evident.

 

What I'm trying to achieve is a simple transition between pages that is seamless, with the slide-in nav retracted after the transition fires.

 

Thanks again for taking the time time to help me, it really is appreciated.

 

Andy

 

 

[thehaes 14 Likes (Newbie)]

I noticed you're using barba from unpkg cdn, I remember I had some issue with it and it wasn't working for me until I changed to this one:

https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.min.js

 

Can you replace it and give it a go? 

[StudioProjects 4 Likes (Newbie)]

Hi TheHaus!

 

Thanks so much for your super quick response!

 

I've changed to the new minified core, but the same problem applies, although its now changing to the projects.html page rather than the about.html page! I've uploaded it to https://www.frontenddevelopment.com.au/barba - you should now see a working css hamburger menu, rather than the white box, if not, please clear your cache.

 

Andy

[thehaes 14 Likes (Newbie)]

Hmm, it's really hard to inspect the code from devtools and troubleshoot. There's a nice working example of barba & gsap here:

https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js

If you could make a demo of your site on stackblitz that would be so much easier. Also you can check that example above and see if it helps to adjust your code to look similar.

 

Another thing I noticed you have "sync: false" in wrong line, it should be inside transition object like this:

barba.init({
	transitions: [
		{
			sync: true,
			async leave(data) {
                	const done = this.async();

                	$(data.next.container).addClass('fixed');

                	pageTransition();
                	await delay(1000);
                	done();
            },

        },
    ],
});

 

[StudioProjects 4 Likes (Newbie)]

Hi again!

 

I've uploaded it to github at https://github.com/StudioProjects/barba also to Stackblitz at https://stackblitz.com/edit/web-platform-n7jjbk?file=index.html

 

A huge thanks again for your valuable time in helping me with this! It's about time that I started using github, I've got a couple of hundred small projects and websites from when I was a Flash Dev 15 years ago...I've just returned to coding after an 11 year break and pretty much had to start from scratch over the last 12 months!

 

My 57 year old brain is a bit overwhelmed, but I've made good progress

 

Andy

[mdelp 14 Likes (Newbie)]

@StudioProjects, I made a simple Codesandbox you could use as a starting point to integrate Barba, see https://codesandbox.io/s/scrollsmoother-barba-js-3dwykz?file=/index.html:328-387. You technically only need a leave and enter animation and setup Barba correctly, you should be good to go in to time.

[StudioProjects 4 Likes (Newbie)]

Thanks Matthew

 

I think what's causing me grief is the slide-in navigator that I've built...

I'll experiment with using your example as a template as you've suggested.

 

Andy