DEV Community

Cover image for You have never seen this text animation before

You have never seen this text animation before

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
・2 min read

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.


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=""></script>
Enter fullscreen mode Exit fullscreen mode


@import url('');

    margin: 0;
    padding: 0;
    box-sizing: border-box;

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

    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 = [
    "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

Discussion (2)

chrisgreening profile image
Chris Greening

Hey Kunaal, impressive work!! Keep it up 😄

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