Barbajs with GSAP Animation
Tags: javascript, css, webdev
Published: 2020-04-12 08:23:01

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.

![Barbajs Animation](https://nirajanbasnet.com.np/uploads/barbajs-animation.gif)

So, what is **GSAP**? - 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:
```html
npm install @barba/core
```

Or, using yarn
```html
yarn add @barba/core
```

or using a CDN:
```js
<script src="https://unpkg.com/@barba/core"></script>
```
---
## **Create index.html**
```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BarbaJs Demo | Home</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body data-barba="wrapper">
        <div class="wrapper">
            <header>
                <nav>
                    <ul>
                        ...
                    </ul>
                </nav>
            </header>
    
            <main data-barba="container" data-barba-namespace="home">
                ...
            </main>
        </div>
    
        <script src="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 a `wrapper` which is the main section that contains all your page structure and the **Barba container**.

```html
<body data-barba="wrapper">
...
</body
```
The container defines a section in which content is updated automatically when you navigate between pages. And the **namespace** which allows you to define a **unique** name for each page. Mainly used for transition rules and views.
```html
<main data-barba="container" data-barba-namespace="home">
...
</main>
```
That’s all for the initialization of the `barbajs`. 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 from **index.html** to **about.html**

```html
<ul class="transition">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```
**CSS**
```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;
}

.transition li {
  width: 20%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  background: #fffffe;
}
```
Now, animating through GSAP in **index.js**

For page transition,
```js
function pageTransition() {
    var tl = 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,
```js
function contentAnimation() {
    var tl = 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.
```js
barba.init({
    sync: true,

    transitions: [
        {
            async leave(data) {
                const done = this.async();
                pageTransition();
                await delay(1500);
                done();
            },

            async enter(data) {
                contentAnimation();
            },

            async once(data) {
                contentAnimation();
            },
        },
    ],
});
```
Here, delay function is the helper
```js
function delay(n) {
    n = n || 2000;
    return new Promise((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 common `this.async()` or returning a promise.

If you use `sync: 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 using `barba.hooks` and apply it to all your transitions.

---
## **Code**
Now, after mixing all the code you can get the final code in the GitHub [**here**](https://github.com/nirazanbasnet/barbajs-with-gsap-animation "Barba js and GSAP animation") 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**