Animautomata

Summary

An open-source, zero-dependency, fully-typed solution for creating high-quality, lightweight loading animations that fit your brand identity, using the Canvas API.

Features

• Fully-typed (source written in Typescript).
• Zero-dependency.
• Add, transform, and remove loading animations with one line of javascript.
• Simple, deeply configurable API.
• Create and experiment using the Animautomata Forge web GUI
• No image files => faster page loads. The minified library size is ~30kb uncompressed (~6kb gzipped). For comparison the first google image result for "loading animation gif" is over 80kb.
• Use the abstract Animautomata parent class to create your own custom presets.

Try it out online

Animautomata Forge

Documentation

https://era-epoch.github.io/animautomata/docs/

Example Usage

https://era-epoch.github.io/animautomata/examples/

with source code:

https://github.com/era-epoch/animautomata/blob/main/examples/examples.ts

Installation

via npm

npm install --save animautomata

via unpkg cdn

<script src="https://unpkg.com/animautomata@latest/dist/min.js"></script>

via jsdeliver cdn

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

via git

git clone https://github.com/era-epoch/animautomata.git

Attribution

This project was created using typescript, distributed via npm, developed with vite, tested with jest, and has documentation created with typedoc.

License

MIT