GlyphFX

Amazing Text & Letter Animations

Star on GitHub See Live Demos

Key Features

Highly Customizable

Control animations directly with HTML attributes for precise effects.

Letters, Words & Lines

Animate text unit by unit: letter-by-letter, word-by-word, or line-by-line.

Custom CSS Animation Classes

Utilize any `cssanimation` class for robust and versatile text effects.

Sequential Logic

Units wait for the previous one to complete, creating smooth flows.

Random & Reverse Effects

Get creative with animation order, including randomized and reverse sequences.

Smart Handling

Safely handles whitespace and provides animation class fallbacks.

Live Preview

Experience the magic of GlyphFX in action!

Letter-by-Letter (Sequence)

Hello GlyphFX!

Word-by-Word Animation

Each word animates uniquely

Line-by-Line Animation

First line animates beautifully.
Second line follows with style.

Randomized Letter Entry

Randomized text!

Reverse Letter Animation

Flowing backwards

Dot Separated Lines

Step 1. Step 2. Step 3.

Want to generate animation code for your own text?

Try the Live Preview Tool

Powered by CSSAnimation

GlyphFX leverages the robust animation classes from @hellouxpavel/cssanimation to deliver stunning text effects.

Make sure to include CSSAnimation in your project for GlyphFX to work its magic!

Explore CSSAnimation

Why Developers Love GlyphFX

Simplicity & Speed

Achieve complex text animations with minimal code and no external dependencies (besides CSSAnimation).

Granular Control

Fine-tune animation delays, durations, and effects directly within your HTML attributes.

Seamless Integration

Works effortlessly with your existing projects, whether using NPM or plain HTML.

Creative Freedom

Combine various animation classes and delays to craft unique, eye-catching text effects.

How to Use

1. Installation

Via NPM:

npm install glyphfx @hellouxpavel/cssanimation

For plain HTML (include just before your closing </body> tag):

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

2. JS Initialization

In your JavaScript file (if using NPM):

import glyphfx from "glyphfx";

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

If using plain HTML, the glyphfx.init() call will automatically run after the script loads.

3. HTML Usage

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

Letter-by-Letter Animation (gf__sequence, gf__random, gf__reverse)

<h1 class="cssanimation" gf__sequence="ca__fx-fadeIn">Letters Animate</h1>
<p class="cssanimation" gf__random="ca__fx-bounceInTop">Randomized entry!</p>
<h3 class="cssanimation" gf__reverse="ca__fx-moveFromTop">Backwards Flow</h3>

Word-by-Word Animation (gf__word)

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

Line-by-Line Animation (gf__line)

<p class="cssanimation" gf__line="ca__fx-fadeIn">
  First line<br />
  Second line<br />
  Third line
</p>
<p class="cssanimation" gf__line="ca__fx-fadeIn" gf__separator="dot">
  Step 1. Step 2. Step 3.
</p>

Custom Classes & Delays

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

Base Duration (gf__base-duration)

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

Developer Tips