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);
}

:exclamation: 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.