https://github.com/stagas/animatrix

Create DOM Animations.
https://github.com/stagas/animatrix

Last synced: 13 days ago
JSON representation

Create DOM Animations.

• Host: GitHub
• URL: https://github.com/stagas/animatrix
• Owner: stagas
• License: mit
• Created: 2022-05-28T08:21:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-07T16:38:26.000Z (almost 2 years ago)
• Last Synced: 2024-09-15T00:11:21.173Z (about 2 months ago)
• Language: TypeScript
• Size: 28.3 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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        


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](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)