Can't get Barba.js working with GSAP - or CSS animations

158 Views Asked by At

I've spent a couple of days trying to get Barba.js working with a basic GSAP slide out menu with no success. I've followed their documentation, such as it is, and a couple of basic online tutorials but I'm getting nowhere fast!

What I'm trying to achieve is the page wipes from the left, whilst this happens, the opened slide out menu closes and then the new page is loaded.

I've created a Stackblitz of where I'm at at https://stackblitz.com/edit/web-platform-n7jjbk?file=index.html I hope that I'm not breaking any rules by using this rather than the Stackoverflow editor...? The example is ALMOST working (so near, but yet so far!), but as you can see it loads the same page (index.html) and the transition is cut short abruptly.

I've stripped it down to the basics, including without any JQuery (I would prefer not to use it) - it works fine with a conventional menu or simple button links, but breaks when I introduce the slide out menu and GSAP. I built the same thing in CSS animations with no luck either.

I've spent the last 15 hours going around in circles, I would be very appreciative of any help!

Andy

0

There are 0 best solutions below