@fiddle-digital/string-split

StringSplit Library

Overview

StringSplit is an advanced text processing and animation library designed for web developers who wish to create interactive and visually compelling text effects. It offers a powerful API to split text into individually styled HTML elements, enabling detailed customizations, dynamic content updates, and eye-catching animations.

Features

• Text Splitting: Splits text into spans for individual styling and animation.
• Customizable Alignments: Offers control over text alignment within split elements.
• Animation Support: Facilitates complex text animations with CSS and JavaScript.
• Dynamic Content Handling: Seamlessly integrates with dynamic web applications, supporting content updates.
• Randomization and Effects: Allows for text randomization and application of custom effects for unique visual presentations.
• Accessibility: Ensures that split text remains accessible and semantically correct.

Installation

Install StringSplit using npm:

npm install @fiddle-digital/string-split

Then, import it in your project:

import StringStorage from '@fiddle-digital/string-split';

Initialization

To start using StringStorage:

const stringSplit = StringSplit.getInstance();

Basic Text Splitting

Split text into individual characters for animation:

<div data-string-split data-string-split-align="center">
  Your text here
</div>

<div data-string-split data-string-split-global-align="center">
  Your text here
</div>

<div data-string-split data-string-split-abs data-string-split-align="center">
  Your text here
</div>

<div data-string-split data-string-split-mode="random">
  Your text here
</div>