Vue Animated typing in ~400 bytes of JavaScript

by Vue.js Examples

vue-typical

Vue Animated typing in ~400 bytes of JavaScript. Based on awesome typical library by @camwiegert.

View Demo View Github

Install

You can install vue-typical via npm:

npm install vue-typical

Or use it directly in browser via cdn service:

<script src="https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/typical.umd.min.js"></script>

Usage

<typical
  :steps="['Hello', 1000, 'Hello world!', 500]"
  :wrapper="'h2'"
></typical>
<typical
  class="typicalWrapper"
  :steps="['Fucking', 1000, 'Fucking Awesome!', 500, 'Fucking Awesome! Aha :-) ?', 1000]"
  :loop="3"
  :wrapper="'h3'"
></typical>

Properties

Prop Required Type Eg. Default
steps True Array ['Hello', 1000, 'Hello world!', 500] -
wrapper False String 'p' 'div'
loop False Number 3 or 'Infinity' 1

Style

Add the blink cursor effect with typicalWrapper classname.

.typicalWrapper::after {
  content: "|";
  animation: blink 1s infinite step-start;
}

@keyframes blink {
  50% { opacity: 0; }
}

Contributing

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

GitHub