vue-text-transition

The component to animate your text letter by letter. You can bind different classes to each letter using css selectors.

Live demo

Installation

npm install vue-text-transition

Import component and register it locally

import VueTextTransition from 'vue-text-transition'
export default {
  components: {
    VueTextTransition
  }
}

Or register the component globally in your app entry point (main.js or as you called it)

import Vue from 'vue'
import VueTextTransition from 'vue-text-transition'
Vue.component('vue-text-transition', VueTextTransition)

Basic usage

Put the component into your template

<VueTextTransition tag="h1" name="fade" :show="displayСonditions" :interval="40"
  >Text to animate</VueTextTransition
>

Add some styles

.v--vtt-fade {
  will-change: transform, opacity;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
 
.v--vtt-fade_visible {
  opacity: 1;
  transform: translateY(0);
}
 
.v--vtt-fade_hidden {
  opacity: 0;
  transform: translateY(20px);
}

Props

Property	Type	Default	Description
tag	string	div	Tag in which text will be wrapped
name	string	-	Name of class that will be added to each letter. it will be transformed in v--vtt-fade (base class), v--vtt-fade_hidden (when show = false) and v--vtt-fade_visible (when show = true)
show	boolean	false	Condition for changing class from hidden to visible and back
interval	number	100	It will be set for transition-delay and animation-delay for each letter im ms
custom-class	array	null	array of objects implementing following interface {selector: string, class: string}

<VueTextTransition
  tag="h1"
  name="fade"
  :show="displayСonditions"
  :interval="40"
  :custom-class="[{selector: ':nth-child(odd)', class: 'odd-class'}]"
  >Text to animate</VueTextTransition
>

.v--vtt-fade,
.v--vtt-odd-class {
  will-change: transform, opacity;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
 
.v--vtt-fade_visible,
.v--vtt-odd-class_visible {
  opacity: 1;
  transform: translateY(0);
}
 
.v--vtt-fade_hidden {
  opacity: 0;
  transform: translateY(20px);
}
 
.v--vtt-odd-class_hidden {
  opacity: 0;
  transform: translateY(-20px);
}

❗️ every letter will be transitioned or animated, it can cause performance issues, do not use this package for large paragraphs of text to avoid lags

LICENSE

The MIT License (MIT). Please see License File for more information.