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

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 & JavaScript | Planets Website Design Full Video

artspider designerhttps://www.youtube.com/channel/UCD10SZSEyZCFAR4DFx_uNyg How To Make A Website Using HTML CSS & JavaScript | Planets Website Design Full Video 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>PlanetBook Home Page</title>     <meta name='viewport' content='width=device-width, initial-scale=1'>     <link rel='stylesheet' type='text/css' media='screen' href='style2.css'>      </head> <body>     <div class="header">         <a href="#" class="logo">             <img src="img/planetbooklogo.png" alt="">            </a>            <div class="loc">      ...
Post a Comment
Read more