v-splitter

Inspired by the library Splitting JS and the easy animation it provides as shown in this Courstro video.

The VSplitter component takes just one "prop" called text and will split (into <span>s) the passed text into words, characters and spaces. In addition it provides the following css variables that might be useful for css styling:

  --word-index: index of the <span> of the word
  --char-index: index of the character within the given word
  --abs-index: index of the character across all words

as well as classes:

  v-splitter__word: <span> containing a word
  v-splitter__char: <span> containing a char
  v-splitter__space: <span> containing a space (also has 'char')

The solution to the dynamic CSS variables was figured out via this post.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.