Elegant automated typing, for your text rotation needs.

We've actually improved our CTR on the Get Started Now and Discover More buttons by nearly 40% since Typist explained that Positionly is for more than just people, but for more specific types of business.

Typist is fully compatible with responsive layouts.

You can install Typist via Bower with bower install Typist or download typist.js and include it the old-fashioned way.

You can also preview and install Typist directly on your website with Eager.

<script src="https://install.eager.io/embed.js"></script>

typist = document.querySelector "#typist-element"
new Typist typist,
  letterInterval: 60
  textInterval:   3000

JavaScript is <strong id="typist-element" data-typist="ugly,not as good an CoffeeScript">great</strong>

.selectedText {
  background: #f00;
}

typist = document.querySelector "#typist-element"
new Typist typist,
  letterInterval: 60
  textInterval:   3000
  onSlide: (text, options) ->
    suffix = options.typist.getAttribute "data-typist-suffix"
    log "#{text} #{suffix}" # ugly since it's JS

JavaScript is <strong id="typist-element" data-typist="ugly,not as good an CoffeeScript" data-typist-suffix="since it's JS">great</strong>

@keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

#typist-element {
  &:after {
    content: " ";
    display: inline-block;
    height: 47px;
    position: relative;
    top: 10px;
    margin-left: 3px;
    margin-right: 7px;
    width: 4px;
    background: #06a44d;
    animation: blink 1s step-start 0s infinite;
    -webkit-animation: blink 1s step-start 0s infinite;
  }
}

.selectedText {
  display: none;
}

Typist is framework-agnostic. No need for jQuery.

All efforts have been made to keep the source as clean and readable as possible.

Typist is released under an MIT License, so do with it what you will.