Why does transition begin wrong direction?

Question

My page transition keeps starting on the left to the bottom, instead of top to bottom?

I changed the css position and javascript positions to top, but when I click to the next page, it keeps starting on the left first before going from top to bottom. What do I need to change in JS or css to get the page transition to default from the top?

first page html

<!doctype html>
<html>
    
<head>
<meta charset="utf-8">
<title>scale transitions</title>
<link  rel="stylesheet" href="babramain.css">
</head>

<body data-barba="wrapper">
    <div class="load-container">
        <div class="loading-screen"></div>
    </div>  
    
    <main data-barba="container" data-barba-namespace="home-section">
        <div class="header">
            <h1>First Page</h1>
            <div class="animate-this button">
                <a href="babrasecond.html">Go to Second Page</a>
            </div>
                
        </div>
    </main>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="babramain.js"></script>
    

</body>
    
</html>

second page html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>scale transitions</title>
<link  rel="stylesheet" href="babramain.css">
</head>

<body data-barba="wrapper">
    <div class="load-container">
        <div class="loading-screen"></div>
    </div>  

    <main data-barba="container" data-barba-namespace="home-section">
        <div class="header">
            <h1>Second Page</h1>
            <div class="animate-this button">
                <a href="babrafirst.html">Go to First Page</a>
            </div>
                
        </div>
    </main>
    <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/gsap/3.2.4/gsap.min.js"></script>
    <script src="babramain.js"></script>
    
    
</body>
    
</html>

css page

html, body{
    margin: 0;
    padding: 0;
    background: black;
    color: orange;

}

.loading-screen{
    position:relative;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    padding-bottom:0;
    background-color:deepskyblue;
    width:0%;
    height:100%;
}
.load-container{
position: fixed;
top:0%;
width:100%;
height:100%;
overflow: hidden;
z-index:10;
pointer-events: none;
}

h1{
    position: absolute;
    top:38%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size:80px;
}

.button{
    position:absolute;
    top: 60%;
    left:50%;
    transform:translate(-50%,-50%);
}

.button a{
    text-decoration: none;
    color:white;
    border: 1px solid white;
    padding: 24px 40px;
    text-transform: uppercase;
    transition: .3s;
}

.button:hover a{
    background: white;
    color: black;
    transition:.3s;
}

JS page

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%",
        top: "0%",
        ease: "Expo.easeInOut",
    });

    tl.to(".loading-screen", {
        duration: 1,
        width: "100%",
        top: "100%",
        ease: "Expo.easeInOut",
        delay: 0.3,
    });
    tl.set(".loading-screen", { top: "-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({
        sync: true,

        transitions: [
            {
                async leave(data) {
                    const done = this.async();

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

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

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

Why does transition begin wrong direction?

0 Answers0