# animatrix > Create DOM Animations. Latest version **1.1.0** (published 2022-12-07) · MIT license · 0 weekly downloads ## Install ```sh npm install animatrix pnpm add animatrix yarn add animatrix bun add animatrix ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.0 | | Published | 2022-12-07 | | First published | 2022-07-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 247 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | stagas | | Maintainers | stagas | ## Links - npm: https://www.npmjs.com/package/animatrix - Repository: https://git@github.com/stagas/animatrix - Homepage: https://github.com/stagas/animatrix#readme - Issues: https://github.com/stagas/animatrix/issues - npm.io page: https://npm.io/package/animatrix ## Dependencies (2) - [event-toolkit](https://npm.io/package/event-toolkit.md) ^1.2.0 - [is-mobile-agent](https://npm.io/package/is-mobile-agent.md) ^1.0.0 ## Recent versions - 1.1.0 (latest) — 2022-12-07 - 1.0.1 — 2022-08-04 - 1.0.0 — 2022-08-01 - 0.0.2 — 2022-07-30 - 0.0.1 — 2022-07-30 ## README

animatrix

Create DOM Animations.

`npm i animatrix` `pnpm add animatrix` `yarn add animatrix`

## API

# AnimSettings

# duration

number

# easing

Easing

# Easing

[ number, number, number, number ]

# KeyframeAnimation

{

# animation

Animation | null

# breakTime

number

# keyframes

Keyframe []

# next

KeyframeAnimationDetails | null

# onfinish

# ()

() =>

void

# KeyframeAnimationDetails

{

# animSettings

AnimSettings

# getKeyframes

# ()

() =>

Keyframe

# ManualAnimation

{

# current

# from

# last

# set

# (values)

# values

(values) =>

# state

ManualAnimationState

# stop

# (values)

# values

(values) =>

# to

# update

# (values)

# values

(values) =>

# ManualAnimationState

"preparing" | "running" | "finished"

# StepAnimation

{

# current

# from

# set

# (values)

# values

(values) =>

# state

StepAnimationState

# t

number

# to

# update

# (values)

# values

(values) =>

# StepAnimationState

"preparing" | "running" | "finished"

# Easing

{

# Flat = ...

Easing

# Linear = ...

Easing

# BezierEasing(mX1, mY1, mX2, mY2)

# mX1

any

# mY1

any

# mX2

any

# mY2

any

BezierEasing(mX1, mY1, mX2, mY2) =>

# (x)

# x

any

(x) =>

any

# createKeyframeAnimation(animSettings, target, getKeyframes, current)

# animSettings

AnimSettings

# target

HTMLElement | SVGElement

# getKeyframes()

getKeyframes() =>

Keyframe

# current

KeyframeAnimation

createKeyframeAnimation(animSettings, target, getKeyframes, current) =>

KeyframeAnimation

# createManualAnimation(anim)

# anim

ManualAnimation<T>

createManualAnimation<T>(anim) =>

ManualAnimation

# createStepAnimation(AnimSettings, anim)

AnimSettings

# anim

StepAnimation<T>

createStepAnimation<T>(AnimSettings, anim) =>

StepAnimation

## Credits - [event-toolkit](https://npmjs.org/package/event-toolkit) by [stagas](https://github.com/stagas) – Toolkit for DOM events. - [is-mobile-agent](https://npmjs.org/package/is-mobile-agent) by [stagas](https://github.com/stagas) – Singleton boolean that is true when user agent is mobile or tablet. ## Contributing [Fork](https://github.com/stagas/animatrix/fork) or [edit](https://github.dev/stagas/animatrix) and submit a PR. All contributions are welcome! ## License MIT © 2022 [stagas](https://github.com/stagas) --- _Source: https://npm.io/package/animatrix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._

animatrix

npm i animatrix pnpm add animatrix yarn add animatrix

`npm i animatrix` `pnpm add animatrix` `yarn add animatrix`