animatrix

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

T

# from

T

# last

T

# set

# (values)

# values

T

(values)  =>

T

# state

ManualAnimationState

# stop

# (values)

# values

T

(values)  =>

T

# to

T

# update

# (values)

# values

T

(values)  =>

T

}

# ManualAnimationState

"preparing" | "running" | "finished"

# StepAnimation

{

# current

T

# from

T

# set

# (values)

# values

T

(values)  =>

T

# state

StepAnimationState

# t

number

# to

T

# update

# (values)

# values

T

(values)  =>

T

}

# 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<T>

# createStepAnimation(AnimSettings, anim)

AnimSettings

# anim

StepAnimation<T>

createStepAnimation<T>(AnimSettings, anim)  =>

StepAnimation<T>

Credits

• event-toolkit by stagas – Toolkit for DOM events.
• is-mobile-agent by stagas – Singleton boolean that is true when user agent is mobile or tablet.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas