Rotate Through Text With A Typewriter Effect – jQuery writeText

Share Your Love

Here JQuery writeText is a simple, lightweight, and configurable text rotator plugin that rotates through a series of strings with typewriter-like typing and deleting effects.

Ideal for news tickers, testimonial carousels, quote rotators, and much more.

How to configure in the website?

Step-1 Create a series of sentences you want to rotate through.

<div class="tt-holder">
  <p class="tt">I LOVE JQUERYSCRIPT!</p>
  <p class="tt">I LOVE CSSSCRIPT!</p>
  <p class="tt">I LOVE VUESCRIPT!</p>
  <p class="tt">I LOVE REACTSCRIPT!</p>
  <h1 class="ttt"></h1>

Step-2: Hide the content on page load.

.tt {
  display: none;

Step-3: Append a blinking cursor to the end of the sentences while typing & deleting characters.

.ttt::after {
  content : "\0020";
  animation: pulse 1s infinite;
  color: transparent;
  border-right: 3px solid black;
  margin-left: 4px;

@keyframes pulse {
  0% {
     border-right: 3px solid  black;
  50% {
     border-right: 3px solid  transparent;
  100% {
     border-right: 3px solid  black;

Step-4: Load the main JavaScript after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/index.js"></script>

Step-5: Initialize the plugin and pass the following parameters to the writeText method:

  • contents: a container that holds the content
  • keep: number of characters to keep while typing & deleting
  • seconds: animation speed in seconds
  • delay: delay in milliseconds
  • iterations: number of iterations, 0 = infinity
  • ratio: inTransition & outTransition percent (0-1)
  • secondsout: animation speed for the second part
  • dev: enable dev mode
  • pausetarget: the element to pause the text rotator
  • stoptarget: the element to stop the text rotator
// writeText(contents, keep, seconds, delay = 20, iterations = 0, ratio, secondsout, dev = false, pausetarget, stoptarget);
let $elements = $(".tt-holder .tt");
$(".ttt").tickerText($elements, 8, 3, 30, 1, 0.5, 2, false, "timerpause", "timerstop");

Please comment and share this article if you find it helpful and wants to improve this article please WhatsApp us.

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 411

Newsletter Updates

Enter your email address below to subscribe to our newsletter