DEV Community

Sascha Manns
Sascha Manns

Posted on • Originally published at saschamanns.de on

9

Animated Typing Utility with JavaScript

Ever wished a animated typing effect in your webproject? If yes, you should definitive check out the typit.js library. Last days i stumbled upon that interesting library.

The effect looks like:

How could you implement it?

Let we say, you would like to use this effect to show others your different job experiences.

First place a tag inside your code like that one:

<p id="replaceJobs"></p>

Then create a typeit.js file with the content

new TypeIt('#replaceJobs', {
    strings: ["Job1", "Job2", "Job3"],
    speed: 200,
    cursorSpeed: 1000,
    nextStringDelay: 750,
    loop: true,
    breakLines: false,
    waitUntilVisible: true
}).go();

Now add the JavaScript to your Layout Section:

<script src="https://cdn.jsdelivr.net/npm/typeit@VERSION_NUMBER/dist/typeit.min.js"></script>

and refer your typeit.js to that page, where your "replaceJobs" tag is placed. Now your type effect will start :-)

More on: https://typeitjs.com/

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (1)

Collapse
 
alexmacarthur profile image
Alex MacArthur

Great, straightforward instructions on getting up & running with TypeIt. Thx, Sascha!

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay