Gsap Text Reveal Animation Using Html Css And Gsap

GSAP Text Reveal Animation is used nowadays a lot in modern websites that can be used to create an awesome text reveal animation using Html Css and Gsap. It(Gsap) is a powerful library that you can use to create this effect. It(Gsap) works with html, css and various JavaScript libraries. It allows us to create more complex animations by using simple just CSS and JavaScript alone.

Most website developers know that GSAP is a JavaScript library for creating animations and interactive experiences. The text reveals animation is a great way to engage the user and make them feel excited about what they are reading or scrolling. "Text Reveal Animation With Gsap" can be created by using the following steps:

The text is initially hidden and appears gradually as the animation progresses.
The animation can be customized with various timing and easing options.
It is a visually appealing way to present text on a webpage.
It can be used to draw attention to important information or create a more dynamic user experience.

Interview Questions:

Text Reveal Animation is a technique used to animate text on a webpage using the Gsap library. This animation involves revealing text one line at a time, creating a dynamic and visually appealing effect. The animation can be created using html, css and the Gsap library, allowing for a wide range of customization options. This technique is often used to highlight important information or to add a touch of creativity to a webpage. Whether you're a web developer or a designer, Gsap Text Reveal Animation is a useful tool to have in your toolkit. So start this article without any further ado. If want to read more articles related to web development you can visit this playlist.

For more gsap animations you can follow the gsap playlist.

Read Also:

HTML:

Let's start with the boilerplate of html document. A boilerplate is just the basic code of html document that help us and the browser understand the structure of html document. Apart from this, it helps to place content and metadata in the right way. Which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Gsap Text Reveal Animation | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Body Content 

<script src="script.js"></script>
</body>
</html>

For this form development, we are using "font-family" that gave good look to contact us form design. We are using the "Playfair" font-family, the link is given below.

 <link href="https://fonts.googleapis.com/css?family=Chivo:300,700|Playfair+Display:700i,700,500,900" rel="stylesheet">

Now let's include the gsap javascript library. This library helps us to apply animation to the form element. The link to gsap is given below. You include this library using a script tag at the bottom of html document.

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

One by one we added all the dependencies of the HTML document now it's time to write HTML code. But before going to jump on Html code just go through the contact form design. So Let's try to understand the design of this contact form. First, we will divide this contact form into two parts.

Below is the complete Html code, there has been no css applied till now. In the next part, we will add css.

<!DOCTYPE html>
<html>
<head>
  <title>Gsap Text Reveal Animation | Rustcode</title>
  <link href="https://fonts.googleapis.com/css?family=Chivo:300,700|Playfair+Display:700i,700,500,900" rel="stylesheet">
  
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
  <button class="circle"></button>
  <h2 class="title">
    <span class="title-cover"></span>
    <p class="title-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </h2>
  <h2 class="title">
    <span class="title-cover"></span>
    <p class="title-text">Phasellus pellentesque elementum nunc quis pharetra.</p>
  </h2>
</div>

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

Output: Text reveal output without css.

Read Also:

CSS:

CSS beautifies the Html document, so now the basic design is already designed. Now we will add CSS to align contact form components like inputs, social media buttons, welcome messages and all.

html, body{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  overflow: hidden;
  color: whitesmoke;
  background: #1A1819;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  background: #1A1819;
 font-family: 'Playfair Display', serif;
 font-weight: 700;
 font-style: italic;
}

.container {
  position: relative;
  padding: 20px;
}

.title {
  position: relative;
  color: whitesmoke;
  font-size: 36px;
  display: table;
  font-weight: bold;
}

.title-text {
  opacity: 0;
  margin: 0;  
}

.title-cover {
  content: '';
  position: absolute;
  background-color: whitesmoke;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.circle {
  background-color: whitesmoke;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 0;
  left: -60px;
  top: 10px;
  transform: scale(0);
}

Output: Text reveal output after applying css.

Text and other elements are not visible because of css properties. Apart from this background will be black.

Read Also:

SCRIPT:

let $shape = document.querySelectorAll('.title-cover');
let $text = document.querySelectorAll('.title-text');
let $circle = document.querySelector('.circle');

let tl = new TimelineMax({ paused: 'true' });

tl.staggerTo($shape, .5, {
  scaleX: 1,
  delay: 1,
  ease: Power3.easeInOut 
},0.15);

tl.to($text, 0, {
  autoAlpha: 1 
});


tl.staggerTo($shape, .4, {
  transformOrigin: '0 100%',
  y: 5,
  scaleY: 0.1,
  ease: Power3.easeIn 
},0.15, '=-0.1');

tl.to($circle, .3, {
  scale: 1,
  ease: Back.easeOut 
});


tl.restart();

setTimeout(function () {
  tl.reverse();
}, 4000);

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Preloader Loading Animation Using Html, Css And Gsap", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Read Also:

Archive

Gsap Text Reveal Animation | Html, Css And Gsap

Gsap Text Reveal Animation Using Html Css And Gsap

Table Of Content

HTML:

CSS:

SCRIPT:

Output:

Youtube Video:

Source Code:

Comments

Post a Comment