Skip to main content

Archive

Show more

Page Loading With Intro Using GSAP

by Rustcode
Page-Loading-With-Intro-Using-GSAP

Page Loading With Intro Using html css and GSAP

We already created a lot of loader animations using css, javascript and jquery. You can check out the playlist. But this animation is slightly different from those animations. Because we are using gsap to create this effect. Of course, there will an animation, after the completing loading intro text animation.

So let's take brief ideas about this animation. When you load the browser window an intro text will be show with some animation and after that intro text become fade out and then a page reveal effect will be run then the main page will be shown.

We have already created a lot of animation using javascript and css, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Page Loading With Intro Using GSAP</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

This loading is using GSAP animation library, you can read GSAP full documentation from official website. Always include JavaScript at the bottom of the document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>



<!DOCTYPE html>
<html>
  <head>
    <title>Page Loading With Intro Using GSAP</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="intro">
        <h1>apple macbook</h1>
      </div>
    </div>
    <div class="content">
      <section class="one">
        <img src="macbook1.jpg">
      </section>
      <section class="two">
        <img src="macbook2.jpg">
      </section>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body{
  margin: 0px;
  padding: 0px;
  font-family: "Poppins";
  overflow: hidden;
}

section{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section > img{
  width: 500px;
  max-width: 100%;
  border-radius: 6px;
}

.one{
  background: #FFEFD3;
}

.two{
  background: #C4EED9;
}

.container{
  position: fixed;
  top: 0px;
  bottom: 0px;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  overflow: hidden;
}



04. GSAP

var text = gsap.timeline({
  paused: false
});

text.from(".intro h1", 1,{
  opacity: 0,
  ease: "easeInOut",
  y: 50
});

text.to(".intro h1", 1,{
  opacity: 0,
  ease: "easeInOut",
  y: -50,
  delay: 1,
  onComplete: function(){
    TweenLite.delayedCall(1, myFunction);
  }
});

function myFunction() {
  var body = document.querySelector('body');
      body.style.overflow = "auto";
}

text.to(".container", 1,{
  y:"-100%",
  ease: "power4.out"
});


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download from here and change this according to your need.





Comments

Post a Comment