<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();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.