Barbajs

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body data-barba="wrapper">
        <div class="load-container">
            <div class="loading-screen"></div>
        </div>
        <main data-barba="container" data-barba-namespace="about-section">
            <div class="header">
                <h1 class="title animate-this">
                    about page
                </h1>
                <div class="animate-this button">
                    <a href="index.html">go back to home</a>
                </div>
            </div>
        </main>
    </body>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- <script src="https://unpkg.com/@barba/core"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" integrity="sha512-7b1FfB2MGnB65aK6jrbS8k3REB+8bEE8UfP/TEwacejD0g02nLLI1VL4IPcKyiLk2lf7HJWaUYEUWc65aqaXQg==" crossorigin="anonymous"></script>
    <script
        type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"
    ></script>
    <script src="main.js"></script>
</html>


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

function pageTransition() {
    var tl = gsap.timeline();
    tl.to(".loading-screen", {
        duration: 1.2,
        width: "100%",
        left: "0%",
        ease: "Expo.easeInOut",
    });

    tl.to(".loading-screen", {
        duration: 1,
        width: "100%",
        left: "100%",
        ease: "Expo.easeInOut",
        delay: 0.3,
    });
    tl.set(".loading-screen", { left: "-100%" });
}

function contentAnimation() {
    var tl = gsap.timeline();
    tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}


$(function () {
    barba.init({
        debug:true,
        sync: true,
        transitions: [
            {
                async leave(data) {
                    const done = this.async();

                    pageTransition();
                    await delay(1000);
                    done();
                },

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

                async once(data) {
                    contentAnimation();
                },
            },
        ],
    });
});