Skip to main content

How to create Page transition animation by Greensock (gsap)?

 Create Page transition animation by Greensock (gsap)



https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js



SOURCE CODE




HTML SOURCE_CODE:-
index .html

👇

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title> index Page </title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    
</head>
<body>
    <div class="header">
        <a href="#">
          <img class="logo"   src="img/Untitled-1.png" alt="">
        </a>
        <div class="loc">
        <ul>
          <li><a href="#" id="bu1" class="butt">Home</a></li>
          <li><a href="about.html" id="bu2" class="butt">About</a></li>
          
         
          
        </ul>
      
      </div>
    </div>
    <div class="cover">
      <div class="contan3"></div>
      <div class="contan4"></div>
<div class="contan">
    <div class="text">
        <p class="t1">
            Page transition 
        </p>
        <p>animation by GSAP</p>
    </div>
    <div class="text1">
      <p class="content__text">animation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAPanimation by GSAP</p>
    </div>
    <img class="img1" src="img/integration-5192458_1920.jpg" alt="">
    <div class="button" >
     button
  </div>
    </div>
    
     
       </div>
      </div>
    
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js" integrity="sha512-JO6JyFPJupQKZf7icgZkHwuq/rAQxH7COqvEd4WdK52AtHPedwHog05T69pIelI69jVN/zZbW6TuHfH2mS8j/Q==" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/CSSRulePlugin.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/EaselPlugin.min.js"></script>
<script src='main.js'></script>
</html>

about.html

👇


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>about page</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    
</head>
<body>
    <div class="header">
        <a href="#">
          <img class="logo"   src="img/Untitled-1.png" alt="">
        </a>
        <div class="loc">
        <ul>
          <li><a href="index.html" id="bu1" class="butt">Home</a></li>
          <li><a href="#" id="bu2" class="butt">About</a></li>
          
         
          
        </ul>
      
      </div>
    </div>
    <div class="cover">
      <div class="contan3"></div>
      <div class="contan4"></div>

    <div class="contan2">
      <div class="about">
<p class="about_text">about</p>

      </div>
     
       </div>
      </div>
    
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js" integrity="sha512-JO6JyFPJupQKZf7icgZkHwuq/rAQxH7COqvEd4WdK52AtHPedwHog05T69pIelI69jVN/zZbW6TuHfH2mS8j/Q==" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/CSSRulePlugin.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/EaselPlugin.min.js"></script>
<script src='main.js'></script>
</html>


CSS SOURCE_CODE:-


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
  
    font-family: sans-serif;
    font-weight: 500;
}

.logo{
    position: relative;
    max-width: 60px;
   transition: 0.4s;
border-radius: 50%;

  }
 
.header{
    position: absolute;
    top: 0;
    left: 0;
 width: 100%;
    padding:10px 100px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    z-index: 400;
    background-color:transparent;
    border-bottom: solid 1px #000000;
   
  
  }
 
 
  .header ul{
    position: relative;
    display: flex;
  }
  .header ul li{
    list-style: none;
  }
  .header ul li a{
  display: inline-block;
  color: rgb(255, 255, 255);
  font-weight: 400;
  margin-left: 40px;
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  transition: .5s;
  }
  .header ul li a:hover{
    
    color: rgb(0, 0, 0);
   
    }
    .text{
        position: absolute;
        top: 20%;
        left: 5%;
        font-size: 70px;
        color: rgb(255, 248, 248);
    }

   .contan img{
        position: absolute;
        left: 60%;
        top: 25%;
       height: 350px;
    }
    .text .t1{
      color: rgb(255, 242, 58);
      font-size: 79px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .text1{
      position: relative;
      top: 55%;
      left: 5%;
      width: 50%;
      font-size: 10px;
      color: rgb(255, 248, 248);
  }
  .contan{
    width: 100%;
    height:100%;
    z-index: 100;
    background-color: rgb(113, 144, 201);
    position: absolute;
    display: flex;
    justify-content: space-between;
   
  }
  .contan2{
    width: 100%;
    height: 100%;
    background-color: rgb(199, 201, 212);
    position: absolute;
    display: flex;
    justify-content: space-between;
   
  }
  .contan3{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 211, 65);
    position: absolute;
    display: flex;
    justify-content: space-between;
   z-index: 800;
 
  }
  .contan4{
    width: 100%;
    height: 100%;
    background-color: rgb(75, 43, 255);
    position: absolute;
    display: flex;
    justify-content: space-between;
   z-index: 700;
  }
  .about{
    top: 30%;
left: 5%;
    width: 500px;
    height: 100px;

    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150px;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;

  }
  .about_text{
opacity: 1;
  }
 .cover{
   overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
 }
 .button{
  position: absolute;
  padding: 15px 26px;
  background-color: rgb(32, 32, 241);
 transition: 0.5s;
  top: 450px;
  left: 5%;
  font-size: 13px;
  font-family: sans-serif;
  cursor: pointer;
  color: aliceblue;

}
.button:hover{
  box-shadow: 0 10px 9px  rgb(32, 32, 241) ;
  top: 445px;
  border-radius: 25px;
  background-color: rgb(49, 62, 250);
  color: #e4f00b;
}

Javascript (.js file) SOURCE_CODE:-




$(".butt").click(function() {
    $('.container').attr("color-center", this.id);
    if (this.id == "bu1") page1();
    if (this.id == "bu2") page2();
   
   
   
 
 });

 function page1() { 
    var tl = new TimelineMax()
   .to(".contan2",1,{xPercent:0,},0)
   .to(".contan",1,{xPercent:0,},0)
   .from(".contan3",2,{xPercent:100,},0)
   .to(".contan3",1,{xPercent:-100,},)
   .from(".contan4",1,{xPercent:100,},0)
   .to(".contan4",1,{xPercent:-100,},1)
   .from(".contan",1,{ opacity: "0",yPercent:10 },3)
   .from(".contan2",1,{ opacity: "0",yPercent:10 },3)
   .from(".header",1,{ opacity: "0",yPercent:-50 },4)
   .from(".text1",1,{ opacity: "0",yPercent:10 },6)
   .from(".text",1,{ opacity: "0",yPercent:10 },5)
   .from(".img1",1,{ opacity: "0",xPercent:10 },7)
   .from(".button",1,{ opacity: "0",yPercent:20 },8)
   .from(".about_text",1,{ opacity: "0",yPercent:10 },5)

 }
 
 
 
 

   

 $(function() {
    page1();
 })

web design video My YOUTUBE channel






 

Labels:

Comments

Post a Comment

Popular posts from this blog

Create A Pizza Website Using HTML And CSS and GSAP| Page transition animation by gsap. Artspider

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js SOURCE CODE HTML  SOURCE_CODE:- index .html 👇 <! DOCTYPE   html > < html > < head >      < meta   charset = 'utf-8' >      < meta   http-equiv = 'X-UA-Compatible'   content = 'IE=edge' >      < title > home page transion </ title >      < meta   name = 'viewport'   content = 'width=device-width, initial-scale=1' >      < link   rel = 'stylesheet'   type = 'text/css'   media = 'screen'   href = 'main.css' >      </ head > < body   >          < div   class = "cover" >          < img   src = "img/logo.png"   alt = ""   class = "logo" >      ...
Post a Comment
Read more

How To Make A Website Using HTML CSS & Bootstrap | Personal Portfolio Website Design Tutorial

How To Make A Website Using HTML CSS & Bootstrap | Personal Portfolio Website Design Tutorial SOURCE CODE HTML  SOURCE_CODE:- index .html 👇 <!DOCTYPE html> <html> <head>     <meta charset='utf-8'>     <meta http-equiv='X-UA-Compatible' content='IE=edge'>     <title>Page Title</title>     <meta name='viewport' content='width=device-width, initial-scale=1'>     <!-- Google Fonts -->   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">   <!-- Vendor CSS Files -->   <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">   <link href="assets/v...
Post a Comment
Read more