Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

animatrix

stagas31MIT1.1.0TypeScript support: included

Create DOM Animations.

readme

animatrix

Create DOM Animations.

npm i animatrix pnpm add animatrix yarn add animatrix

API

<summary># AnimSettings </summary>

    <summary># duration </summary>

      number

    <summary># easing </summary>

<summary># Easing </summary>

    [ number, number, number, number ]

<summary># KeyframeAnimation </summary>

    {

    <summary># animation </summary>

      Animation | null

    <summary># breakTime </summary>

      number

    <summary># keyframes </summary>

      Keyframe []

    <summary># next </summary>
    <summary># onfinish </summary>

      <summary># () </summary>

        ()  =>

          void

    }

<summary># KeyframeAnimationDetails </summary>

    {

    <summary># animSettings </summary>
    <summary># getKeyframes </summary>

      <summary># () </summary>

        ()  =>

          Keyframe []

    }

<summary># ManualAnimation </summary>

    {

    <summary># current </summary>
    <summary># from </summary>
    <summary># last </summary>
    <summary># set </summary>

      <summary># (values) </summary>

        <summary># values </summary>

        (values)  =>

    <summary># state </summary>
    <summary># stop </summary>

      <summary># (values) </summary>

        <summary># values </summary>

        (values)  =>

    <summary># to </summary>
    <summary># update </summary>

      <summary># (values) </summary>

        <summary># values </summary>

        (values)  =>

    }

<summary># ManualAnimationState </summary>

    "preparing" | "running" | "finished"

<summary># StepAnimation </summary>

    {

    <summary># current </summary>
    <summary># from </summary>
    <summary># set </summary>

      <summary># (values) </summary>

        <summary># values </summary>

        (values)  =>

    <summary># state </summary>
    <summary># t </summary>

      number

    <summary># to </summary>
    <summary># update </summary>

      <summary># (values) </summary>

        <summary># values </summary>

        (values)  =>

    }

<summary># StepAnimationState </summary>

    "preparing" | "running" | "finished"

<summary># Easing </summary>

    {

    <summary># Flat  =  ... </summary>
    <summary># Linear  =  ... </summary>

    }

<summary># BezierEasing(mX1, mY1, mX2, mY2) </summary>

    <summary># mX1 </summary>

      any

    <summary># mY1 </summary>

      any

    <summary># mX2 </summary>

      any

    <summary># mY2 </summary>

      any

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

      <summary># (x) </summary>

        <summary># x </summary>

          any

        (x)  =>

          any

<summary># createKeyframeAnimation(animSettings, target, getKeyframes, current) </summary>

    <summary># animSettings </summary>
    <summary># target </summary>

      HTMLElement | SVGElement

    <summary># getKeyframes() </summary>

      getKeyframes()  =>

        Keyframe []

    <summary># current </summary>

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

<summary># createManualAnimation(anim) </summary>
<summary># createStepAnimation(AnimSettings, anim) </summary>

Credits

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas