How AnimBase Works

AnimBase is a lightweight animation engine that interprets structured data in data-anim-init and data-anim-config attributes to drive animations. It supports granular control over values, easing functions, and timelines. Here's a breakdown of its core working principles:

1. StyleConfig

A StyleConfig is a plain JavaScript object that represents inline CSS properties:

{
	"opacity": "0.5",
	"transform": "scale(1.2)"
}

It is represented as a JSON string in data-anim-init.

2. KeyframeConfig

A KeyframeConfig is a mapping of animation keyframes (in frame numbers) to style changes. Each frame references a partial or complete StyleConfig:

{
	"100": {
		"opacity": "1.outQuad"
	},
	"300": {
		"transform": "scale(1.5.outSine)"
	}
}

It is represented as a JSON string in data-anim-config.

Key Principles:

• Keys are frame numbers as strings (e.g., "100", "300").
• Properties only need to be included if they change at that frame.
• Unspecified properties retain their values from the last keyframe.
• For the very first appearance of a property in the animation, the value is taken from data-anim-init.
• Properties not declared in data-anim-init will be ignored, even if declared in keyframes.
• After the last keyframe, all property values are held constant.

3. Value Parsing and Matching

AnimBase parses each string value using regular expressions to extract individual animatable variables such as:

• Numbers with or without units (e.g., 100, 50px, 0.5rem)
• Percentages (10%)
• Hex color codes (#fff, #ffffff, #ffff)
• Optional easing functions appended as .easeName

Each parsed variable is stored along with:

• Type (number or color)
• Unit (if applicable)
• Easing function (optional)
• Text span and index position (for substitution)

Example:

{
	"boxShadow": "3px 5rem.in 10% #fa2.outBounce"
}

This breaks into:

• 3px (number, no easing)
• 5rem (number, with in easing)
• 10% (number, no easing)
• #fa2 (color, with outBounce easing)

4. Matching Variables by Position

AnimBase does not track variable names—only position matters.

✅ Correct Example:

<div
	data-anim-init='{ "transform": "translateX(-50%) rotateZ(45deg) scale(1.5)" }'
	data-anim-config='{
		"100": { "transform": "translateX(0%.spring) rotateZ(0deg.outBounce) scale(1)" }
	}'
>
	Text
</div>

Each value maps correctly to its counterpart by position.

❌ Incorrect Example:

<div
	data-anim-init='{ "transform": "translateX(-50%) rotateZ(45deg) scale(1.5)" }'
	data-anim-config='{
		"100": { "transform": "scale(1) translateX(0%.spring) rotateZ(0deg.outBounce)" }
	}'
>
	Text
</div>

The mismatch in value order results in incorrect animations because AnimBase uses the order from data-anim-init as the reference.

5. Non-CSS Awareness

AnimBase does not parse or validate CSS functions. It treats the entire string value as a container of animatable variables, and only those variables are interpolated.

Example:

<div
	data-anim-init='{"color": "rgb(85, 187, 255)"}'
	data-anim-config='{"100": {"color": "rgb(255.outSine, 255, 255)"}}'
>
	Text
</div>

Only the values 85, 187, and 255 are animated, with .outSine applied to the first.

6. Final Notes

• AnimBase uses linear interpolation by default if no easing function is provided.
• It supports per-variable easing even within a single property string.
• It does not require CSS classes or external style sheets.
• Scroll-driven and trigger-based animations are fully supported.

You define your timeline and transitions entirely in HTML.

Looking for usage examples? See How to Use AnimBase →