Text Easing
Text Easing

JavaScript allows us to create many types of animation on HTML elements. But, today we are going to create a text easing effect in javascript. Text Easing is an animation where one bar hides and shows the Easing Texts. For our animation, we will use GSAP JavaScript Library.

Table of Contents

Text Easing | Easing effect in JavaScript

What is GSAP?

GSAP stands for GreenSock Animation Platform, It is a powerful JavaScript library that enables front-end developers and designers to create robust timeline-based animations.

How to add GSAP in our project?

GSAP provides CDN to use it, you can simply insert the CDN link in your main file in the <head> tag as shown below.

<head>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
</head>


For creating this effect we need to create three files called index.html, style.css, and script.js. Here let’s start with our index.html file.

index.html

<!DOCTYPE html>
<head>
  <title>Text Easing</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
</head>
<body>
  <div class="container">
        <div class="slide-bar" id="slidebar">
            <div class="bar" id="bar"></div>
        </div>
        <div class="text-block" id="textone">
            <h1 style="font-size:40px;">CodeDesignerWorld</h1>
        </div>     
        <div class="text-block" id="texttwo">
            <h1 style="font-size:40px;" >Learn to Code!</h1>
        </div>
    </div>

    <button id="changeBtn">&nbsp;</button>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

style.css

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,[email protected],400;1,800&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --white: #ffffff;
  --black: #181717;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;

  background-color: var(--white);
}

.container {
  width: 100%;
  max-width: 800px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slide-bar {
  position: absolute;
  top: 50%;
  left: 100px;
  transform: translateY(-50%) rotateZ(15deg);
  width: 10px;
  height: 600px;
  z-index: 10;
}

.bar {
  width: 100%;
  height: 150px;
  border-radius: 100px;
  background-color: var(--black);
}

.text-block {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background-color: var(--white);
}
.text-block h1 {
  font-family: "Raleway", sans-serif;
  font-size: 5rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
  position: relative;
  perspective: 500px;
  transform-style: preserve-3d;
  color: var(--black);
}
.text-block h1::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0;
  background: radial-gradient(var(--black), transparent 70%);
  transform: translateY(100px) rotateX(-60deg);
  opacity: 0.3;
}

#textone {
  z-index: 6;
  clip-path: polygon(0 0, 18% 0, 8% 100%, 0% 100%);
  
}
#texttwo {
  z-index: 4;
  clip-path: polygon(0 0, 91% 0, 81% 100%, 0% 100%);
}

button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--black);
  background-color: var(--white);
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s;
}
button:hover {
  opacity: 1;
}

script.js

const root = document.documentElement;
const changeBtn = document.getElementById('changeBtn');
let mode = false;

let whiteColor = getComputedStyle(root).getPropertyValue("--white");
let blackColor = getComputedStyle(root).getPropertyValue("--black");

changeBtn.addEventListener('click', (e) => changeColor());

function changeColor() {
    mode = !mode;
    if(mode) {
        root.style.setProperty('--white', blackColor);
        root.style.setProperty('--black', whiteColor);
    } else {
        root.style.setProperty('--white', whiteColor);
        root.style.setProperty('--black', blackColor);
    }
}

const slideTL = gsap.timeline();
const maskTL = gsap.timeline();
const mainTL = gsap.timeline({ 
    repeat: -1, 
    onRepeat: () => {
        gsap.set('#texttwo', { opacity: 0 });
        gsap.set('#bar', { scaleY: 0.1 });
        gsap.set('#textone h1', { opacity: 1 });
    }
});

gsap.set('#texttwo', { opacity: 0 });
gsap.set('#bar', { scaleY: 0.1 });

slideTL
    .to('#bar', 1, { 
        y: 225, 
        scaleY: 1, 
        ease: "back.out" 
    })
    .to('#slidebar', 1.5, { 
        x: 600, 
        delay: 0.5, 
        ease: "back.inOut(0.8)" 
    })
    .to('#slidebar', 1.5, { 
        x: 0, 
        delay: 0.5, 
        ease: "back.inOut(0.8)" 
    })
    .to('#slidebar', 1.5, { 
        x: 600, 
        delay: 0.5, 
        ease: "back.inOut(0.8)" 
    })
    .to('#bar', 1, { 
        y: 500, 
        scaleY: 0.1, 
        ease: "back.in" 
    });

maskTL
    .to('#textone', 1.5, {
        ease: "back.inOut(0.8)", 
        "clip-path": "polygon(0 0, 91% 0, 81% 100%, 0% 100%)",
        onComplete: () => {
            gsap.set('#texttwo', { opacity: 1 });
        }
    })
    .to('#textone', 1.5, {
        delay: 0.5,
        ease: "back.inOut(0.8)", 
        "clip-path": "polygon(0 0, 18% 0, 8% 100%, 0% 100%)",
        onComplete: () => {
            gsap.set('#textone h1', { opacity: 0 });
        }
    })
    .to('#textone', 1.5, {
        delay: 0.5,
        ease: "back.inOut(0.8)", 
        "clip-path": "polygon(0 0, 91% 0, 81% 100%, 0% 100%)"
    }); 


mainTL
    .add(slideTL)
    .add(maskTL, 1.5);

Hope it is working on your PC, If you are having any issues with the code visit our GitHub link. Click Here!

Thank You!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply