
Barbajs with GSAP Animation
I always wanted my simple web application to have a badass fluid and smooth transitions between the pages and act like a Single Page Application (SPA). So, I encountered Barbajs which is a progressive enhancement library to create fluid and smooth transitions between your website’s pages.
Barba js also helps to reduce the delay between the pages, minimize browser HTTP requests and enhance users’ web experience.
So, I had built a simple landing page where there is a usage of Barba js and for page transition animation, I had used GSAP animation. Today I will explain how we can create this slick animation through barbajs and GSAP animation.
So, what isGSAP? - In a simple language think of GSAP as the Swiss Army Knife of javascript animation.. .but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, React, Vue, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.
So, Let’s get started,
Install Barbajs,
Using npm:
npm install @barba/core
Or, using yarn
yarn add @barba/core
or using a CDN:
<scriptsrc="https://unpkg.com/@barba/core"></script>
Create index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>BarbaJs Demo | Home</title><linkrel="stylesheet"href="./style.css"></head><bodydata-barba="wrapper"><divclass="wrapper"><header><nav><ul> ...</ul></nav></header><maindata-barba="container"data-barba-namespace="home"> ...</main></div><scriptsrc="https://unpkg.com/@barba/core"></script></body></html>
We need to import the Barba js core file and structure the layout according to Barba js documentation, You can see, there is awrapper
which is the main section that contains all your page structure and theBarba container.
<bodydata-barba="wrapper">...</body
The container defines a section in which content is updated automatically when you navigate between pages. And thenamespace which allows you to define aunique name for each page. Mainly used for transition rules and views.
<maindata-barba="container"data-barba-namespace="home">...</main>
That’s all for the initialization of thebarbajs
. Now, we can add the transition part through GSAP. Let’s first initialize the transition div. I have created the.transition div where we implement the animation effect as the page layout changes fromindex.html toabout.html
<ulclass="transition"><li></li><li></li><li></li><li></li><li></li></ul>
CSS
.transition{position:absolute;z-index:99;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100vh;top:0;left:0;margin:0;padding:0;pointer-events:none;}.transitionli{width:20%;-webkit-transform:scaleY(0);transform:scaleY(0);background:#fffffe;}
Now, animating through GSAP inindex.js
For page transition,
functionpageTransition(){vartl=gsap.timeline();tl.to(".transition li",{duration:0.5,scaleY:1,transformOrigin:"bottom left",stagger:0.2,});tl.to(".transition li",{duration:0.5,scaleY:0,transformOrigin:"bottom left",stagger:0.1,delay:0.1,});}
For content like heading tag, image tag, let’s create another function,
functioncontentAnimation(){vartl=gsap.timeline();tl.from(".headline",{duration:1.5,translateY:50,opacity:0,});tl.to("img",{clipPath:"polygon(0 0, 100% 0, 100% 100%, 0% 100%)",},"-=.1");}
Now, let’s add the GSAP animation on the Barba js lifecycle.
barba.init({sync:true,transitions:[{asyncleave(data){constdone=this.async();pageTransition();awaitdelay(1500);done();},asyncenter(data){contentAnimation();},asynconce(data){contentAnimation();},},],});
Here, delay function is the helper
functiondelay(n){n=n||2000;returnnewPromise((done)=>{setTimeout(()=>{done();},n);});}
Hooks for Barbajs
leave, enter, once are the hooks and are the methods. Hooks can be run either synchronously or asynchronously using the commonthis.async()
or returning a promise.
If you usesync: true
, as leave and enter will be concurrent, the order will differ: all before, then enter/leave, then all after.
Note that you can define global hooks usingbarba.hooks
and apply it to all your transitions.
Code
Now, after mixing all the code you can get the final code in the GitHubhere and play around the animation. I hope you will create an awesome animation.
Conclusion
By coming this far I hope you get a basic understanding of the Barba js and it’s advantages So, I suggest you give it a try on your project and enjoy it!
Till then,
Keep on Hacking, Cheers
Top comments(1)

Nice one! I am currently working on a project using Barba.js, GSAP ScrollTrigger and Locomotive Scroll (locomotivemtl.github.io/locomotive...). Going well so far and might get delay function from above.
For further actions, you may consider blocking this person and/orreporting abuse