'Barba js not transitioning my page, How do I fix not defined?

I am trying to at a page transition with Barba.js not using an animator just Css Keyframes, I just cant seem to get the transition working. the only error im getting is barba not defined but I don't see where ?

installed Barba via npm used the cdn script link attached both html pages to each the css and the js page initiated the DOM. still not having any luck . VERY STUCK

there is a second html page called page two formatted exactly like the first TIA

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/index.css">
    <script src="Index.js" defer></script>
    <title>Document</title>
</head>
<body>
    
    <body data-barba="wrapper">
            <main data-barba="container" data-barba-namespace="home">
                <!-- put here the content you wish to change
                between your pages, like your main content <h1> or <p> -->
            
               <div class="Page1">
                 <h1>Welcome home</h1>
                 <a href="/index2.html">to my network projects</a>
              </div>
           </main>
       </body>
  
     <script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" integrity="sha512-7b1FfB2MGnB65aK6jrbS8k3REB+8bEE8UfP/TEwacejD0g02nLLI1VL4IPcKyiLk2lf7HJWaUYEUWc65aqaXQg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://unpkg.com/@barba/core"></script>
</body>
</html>

    {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}



.Page1, .Page2{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    position: absolute;

}
a{


    




    color: antiquewhite;
    text-decoration: none;
    margin-top: 50px;
    padding: 10px 30px;
    border: 2px solid  black;
}

.Page1{
    background-color: pink;
}

.Page2{
    background-color: antiquewhite;
}

.slide-in {
    animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
        visibility: visible;
    }
    to{
        transform: translateX(0%);
    }
}


    (function (Barba) {
    document.addEventListener("DOMContentLoaded", function (event) {
        console.log('pjax start');
        // Barba init
        Barba.Pjax.start();
        // Barba prefetch init
        Barba.Prefetch.init();
        var FadeTransition = Barba.BaseTransition.extend({
            start: function () {
                /**
                 * This function is automatically called as soon the Transition starts
                 * this.newContainerLoading is a Promise for the loading of the new container
                 * (Barba.js also comes with an handy Promise polyfill!)
                 */
                // As soon the loading is finished and the old page is faded out, let's fade the new page
                Promise
                    .all([this.newContainerLoading, this.fadeOut()])
                    .then(this.fadeIn.bind(this));
            },
            fadeOut: function () {
                /**
                 * this.oldContainer is the HTMLElement of the old Container
                 */
                
            },
            fadeIn: function () {
                /**
                 * this.newContainer is the HTMLElement of the new Container
                 * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
                 * Please note, newContainer is available just after newContainerLoading is resolved!
                 */
                   this.newContainer.classList.Add('slide-in');
                   this.newContainer(animationend,function(){

                   var that = this

                   this.newContainer.classList.remove('slide-in');
                   that.done

                   });
            }
        });
        /**
         * Next step, you have to tell Barba to use the new Transition
         */
        Barba.Pjax.getTransition = function () {
            /**
             * Here you can use your own logic!
             * For example you can use different Transition based on the current page or link...
             */
            return FadeTransition;
        };
    });
}(Barba));

javascript barbajs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Barba js not transitioning my page, How do I fix not defined?

Sources

Related Questions