🔡 Amazing Text & Letter Animations

glyphfx.js plugin is a lightweight, CSS-only enhancement script that brings letter-by-letter, word-by-word, and line-by-line animations to your projects. It's designed to work seamlessly with cssanimation, for robust and customizable text effects.

Key Features

• Highly customizable: Control animations directly with HTML attributes.
• Animate Letters, Words, and Lines: Independent control for precise effects.
• Custom CSS Animation Classes: Use any cssanimation class you like.
• Sequential Animation Logic: Units wait for the previous one to complete.
• Random & Reverse Effects: Get creative with animation order.
• Smart Handling: Safely handles whitespace and provides animation class fallbacks.

Letter Animation Installation

Via NPM

npm install glyphfx

For plain HTML, include the glyphfx.js, plugin just before your closing </body> tag:

JS Initialization

import glyphfx from "glyphfx";

glyphfx.init();
// or with debug mode
glyphfx.init({ dev: true });

<script src="https://cdn.jsdelivr.net/npm/glyphfx@latest/dist/glyphfx.min.js"></script>

GlyphFX requires @hellouxpavel/cssanimation to function. It provides the actual animation classes (like ca__fx-fadeIn) used in the HTML examples.

npm install @hellouxpavel/cssanimation

Letter Animation Usage

Every animated text block needs the .cssanimation class along with a gf__* attribute to define how it animates.

1. Letter-by-Letter Animation

Animate text one letter at a time with different sequencing styles:

➜ Sequential (in order): gf__sequence

<h1 class="cssanimation" gf__sequence="ca__fx-fadeIn">Letters Animate</h1>

➜ Randomized order gf__random

<p class="cssanimation" gf__random="ca__fx-bounceInTop">Randomized entry!</p>

➜ Reverse (last letter first) gf__reverse

<h3 class="cssanimation" gf__reverse="ca__fx-moveFromTop">Backwards Flow</h3>

2. Word-by-Word Animation gf__word

<h2 class="cssanimation" gf__word="ca__fx-fadeIn">
  Each word animates uniquely
</h2>

3. Line-by-line Animation gf__line

<p class="cssanimation" gf__line="ca__fx-fadeIn">
  First line<br />
  Second line<br />
  Third line
</p>

Split lines by periods "." or by <br> / \n. Use gf__separator="dot" for period separation.

<p class="cssanimation" gf__line="ca__fx-fadeIn" gf__separator="dot">
  Step 1. Step 2. Step 3.
</p>

You don't need to add gf__separator for <br> or newlines, this is the default behavior.

🔥You can assign different animation classes and delays to each word and line! Space-separate your class names and delay values.

<h2
  class="cssanimation"
  gf__word="ca__fx-fadeIn ca__fx-moveFromTop ca__fx-moveFromBottom ca__fx-moveFromRight">
  Each word animates uniquely
</h2>

<p
  class="cssanimation"
  gf__line="ca__fx-blurIn ca__fx-bounceFromTop ca__fx-bounceX">
  First line<br />
  Second line<br />
  Third line
</p>

Check out this Text & Letter Animations Preview Tool to easily generate the animation code for your text.

gf__delay in Detail

The gf__delay attribute specifies the delay before each animated unit (letter, word, or line) begins its animation. The values are in milliseconds (ms).

Single Value: If you provide a single value, that delay will be applied to every unit.

<h1 class="cssanimation" gf__sequence="ca__fx-fadeIn" gf__delay="100">
  Each letter delays by 100ms
</h1>

Multiple Values: This is where it gets powerful! You can provide multiple space-separated values. These values will be applied sequentially to each unit. If you provide fewer delay values than there are units, the last delay value will repeat for the remaining units.

<h2 class="cssanimation" gf__word="ca__fx-fadeIn" gf__delay="0 200 400">
  First word, then 200ms, then 400ms, then 400ms
</h2>

This allows you to create rhythmic or staggered entry effects easily, like gf__delay="50 100 100" as in your example. The first unit gets 50ms delay, and all subsequent units get 100ms delay.

gf__base-duration in Detail

The gf__base-duration attribute provides a simple way to set a global default animation duration for all units (letters, words, or lines) in milliseconds (ms).

This value is used to explicitly set the duration for all units, overriding any animation-duration or transition-duration that might be detected from the CSS classes applied to the element.

<h3 class="cssanimation" gf__sequence="ca__fx-fadeIn" gf__base-duration="750">
  Global base duration
</h3>

Precedence:

1. gf__base-duration (global override)
2. CSS-defined duration (auto-detected from your animation class if gf__base-duration is absent)
3. Internal library default (if no duration is specified anywhere)

This means gf__base-duration gives you a convenient way to set a project-wide or component-wide default duration without needing to edit CSS.

Supported Attributes for Text Animations Plugin

Example: Full Setup

<h2
  class="cssanimation"
  gf__word="ca__fx-fadeIn ca__fx-fadeInLeft ca__fx-slinkyDrop ca__fx-jiggleTransform"
  gf__delay="200 300 400"
  gf__duration="1000">
  Animate each word smoothly
</h2>

Developer Tips

• The .cssanimation class is always required for baseline styling and to activate text animations.
• You can provide fewer classes or delay values than units; the last value will simply repeat for the remaining units, making it easy to apply a pattern.
• If you pass more classes or values than needed, the extra elements are skipped, and a warning might be logged to your console to help with debugging.
• Delay and duration values are parsed safely; non-numeric strings will fall back to default behaviors to prevent errors.
• Animation duration is determined in this order of precedence: gf__base-duration > CSS-detected duration > internal default.

← Return to the main README