<body data-barba="wrapper">
    <!-- Transition Screen -->
    <div id="trans">
        <h1 class="loadText">
            Naseem Shah
        </h1>        
    </div>
    <!-- End of Transition screen -->

    <!--
    Barba.js need a wrapper to inject code 
    dynamically. so use .wrapper class
    -->
    <div class="wrapper">
        
        <main data-barba="container" data-barba-namespace="home">
            <div class="left">
              <p>Codepen doesn't allow moving to other pages. To see the full working try this in local or <a href="https://naseemshah.dev/projects/page-transitions-barbajs-gsap/">Click here for the live demo :) (https://naseemshah.dev/projects/page-transitions-barbajs-gsap/)</a></p>
                <h1>👋 Hi! I am<br>Naseem Shah</h1>
                <p>Know more about me 👇</p>
                <a class="cta" href="about.html">About Me</a>                
            </div>
        </main>
    </div>
    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
  
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


html,body{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Montserrat';
    height: 100vh;
    background-color: antiquewhite;

}


.wrapper{
    padding: 2em;
}

a{
    text-decoration: none;
    color: black;
}

li a{
    margin-right: 2em;

}

h1{
    font-size: 3em;
    margin-top: 1.5em;
}

.cta{
    display: block;
    padding: 2em 2em 2em 2em;
    font-size: 1.4em;
    background-color: black;
    color: blanchedalmond;

}
main{
    display: flex;
    position: relative;
}

img{
    position: absolute;
    right: 10em;
}

#trans{
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    pointer-events: none;
    transform: scaleY(0);
    position: absolute;
    z-index: 100;


}

.loadText{
    position: absolute;
    transform-origin: center;
    transform: translateX(-50%) translateY(-50%);    
    left: 50%;
    top: 50%;
    z-index: 1000;  
    color: white;
    opacity: 1;
}

.left{
    width: 50%;
}


.social{
    -webkit-display: -webkit-box;
    -webkit-display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    
    
}

.link div{
    flex-direction: row;
    width: 100px;
    padding: 0px 10px 0px 10px;
    margin: 10px 10px 30px 0px;
    border: 1px black;
    border-radius: 30px;
    border-style: solid;
    font-weight: 600;
    text-align: center;
}

.link div:hover{
    background-color: black;
    color: white;
    transition: all 0.5s ease;
    
}


@media screen and (max-width: 780px){
    .left{
        width:  100%;
    }
}

@media screen and (max-width: 480px) {
    .left{
        width:  100%;
    }
    .loadText{
        font-size: 1.3em;
    }
    .social .link div{
        width: 15vw;
        padding: 0px 5px 0px 5px;
        margin: 5px;
        border: 1px black;
        border-radius: 20px;
        border-style: solid;
        font-weight: 600;
        font-size: 0.7em;
        text-align: center;

         
    }
  }

//Page transition  
function pagetransition(){
    var tl = gsap.timeline();
    tl.to("#trans", {duration: .5, scaleY: 1, transformOrigin: 'bottom', ease: Power3.easeInOut});
    tl.to(".left",{ x:-200, y:0, duration: 1, ease: Power3.easeInOut, opacity: 0  });
    tl.to("#trans", {duration: .5, scaleY: 0, transformOrigin: 'top', ease: Power3.easeInOut, delay: 0 })
    
}

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

   
}

//Initial Content ANimation
function contentAnimation(){
    var tl =  gsap.timeline();
    tl.from(".left",{ x:-200, y:0, duration: 1, ease: Power3.easeInOut, opacity: 0  });
    
}


//Here where magic Happens
barba.init({
    //we need sync
    sync: true,
    //the transitions array
    transitions: [{
        //When the user leaves the page
        async leave(data) {
            const done = this.async();
            //call page transition function
            pagetransition();
            //give a small delay
            await delay(500);
            done();
        }
    }],

    
});
//windows loads, call content animation
window.onload = ()=>{
    contentAnimation();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.