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



npm install @barba/core

Or, using yarn



yarn add @barba/core

or using a CDN:



<script src="https://unpkg.com/@barba/core"></script>

Create index.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.



<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.



<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



<ul class="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;
}

.transition li {
  width: 20%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  background: #fffffe;
}

Now, animating through GSAP in index.js

For page transition,



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,



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.



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



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

Blog

Barbajs with GSAP Animation

⚡ Nirazan Basnet ⚡

Install Barbajs,

Create index.html

Hooks for Barbajs

Code

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related