DEV Community

Cover image for You have never seen this text animation before
Modern Web
Modern Web

Posted on

You have never seen this text animation before

Hello, glad you are here. I am kunaal and today we will see how to make an awesome text animation which you have never seen before. You can see demo below.

Demo

Video Tutorial -

For better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Inside HTML file under <body> tag write

<h1 class="text"></h1>
<script src="https://cdn.jsdelivr.net/npm/glitched-writer/lib/index.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

CSS

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap');

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

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'dosis', sans-serif;
    background: rgb(27, 27, 27);
}

.text{
    text-transform: capitalize;
    font-size: 100px;
    -webkit-text-stroke: 1px #fff;
    color: transparent;
    text-shadow: -3px -2px #fff;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

And Js

const text = document.querySelector('.text');

const writer = GlitchedWriter.create(text);

let phrases = [
    "hello",
    "welcome to my channel",
    "techy programmers",
    "today we will make this effect",
    "with glitch writer JS library",
    "so without wating time",
    "let's get started"
];

writer.queueWrite(phrases, 2000, false);
Enter fullscreen mode Exit fullscreen mode

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Source Code, My youtube Channel, Instagram

Top comments (2)

Collapse
 
chrisgreening profile image
Chris Greening

Hey Kunaal, impressive work!! Keep it up 😄

Collapse
 
matsuuu profile image
Info Comment hidden by post author - thread only accessible via permalink
Matsuuu

"you have never seen before" is quite a overstatement. A basic glitch effect is all that is.

And achieving it by using a library instead of writing it yourself makes the post more lackluster

Some comments have been hidden by the post's author - find out more