Version 1.0.0

Animate Your Words Character by Character.

Asa JS is a lightweight JavaScript library for performing small and simple animations to text. Perfectly minimal, incredibly powerful.

animation: rotate

animation: push

animation: flip-x

animation: flip-y

animation: wave

Documentation

Simply include the core CSS and JS files in your project. No dependencies required.

<link rel="stylesheet" href="asa.css">


<script src="asa.js"></script>

Configure animations directly in your HTML using data-asa attributes.

data-asa Required. Flags the element to be processed by the library.

data-asa-text The string to animate. If omitted, uses the element's inner text.

data-asa-animation The animation type: basic, rotate, push, knock, fade, flip-x, flip-y, wave.

data-asa-gap Delay in ms between each character start (e.g., 50).

data-asa-iteration Number of repeats or infinite.

Initialize all elements with the init() method:

asa.init();

A skewed translateX animation that looks like a subtle punch.

<h4 data-asa data-asa-animation="knock" ...>The Knock Effect</h4>

A playful scaling animation perfect for character reveals.

<h4 data-asa data-asa-animation="basic-half" ...>Elastic Bounce</h4>