Jump to content


GSAP and Barba.js

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)


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


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

  • Like 3
Link to comment
Share on other sites



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 :)



Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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


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:

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


                	await delay(1000);



  • Like 1
Link to comment
Share on other sites

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 :)



Link to comment
Share on other sites

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 :)

  • Like 1
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.