DEV Community

Cover image for Barbajs with GSAP Animation
⚡ Nirazan Basnet ⚡ for IntegridSolutions

Posted on • Updated on

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.

Barbajs 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


Enter fullscreen mode Exit fullscreen mode

Or, using yarn



yarn add @barba/core


Enter fullscreen mode Exit fullscreen mode

or using a CDN:



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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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,
    });
}


Enter fullscreen mode Exit fullscreen mode

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"
    );
}


Enter fullscreen mode Exit fullscreen mode

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();
            },
        },
    ],
});


Enter fullscreen mode Exit fullscreen mode

Here, delay function is the helper



function delay(n) {
    n = n || 2000;
    return new Promise((done) => {
        setTimeout(() => {
            done();
        }, n);
    });
}


Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
rajeshgrgdesign profile image
rajeshgrgdesign

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.