specular-animation
Beat and time based animation/tweening engine for React and Specular.
Installation
$ npm install specular-animation
Example usage
Component { return <Animate values=x: 255 y: to: 128 duration: 150 duration=300 easing="easeInOut"> { <AnotherComponent x=x y=y /> } </Animate> }
API
<Animate />
Props
values: object
Values takes an object with the keys being the names of the keys you want to be animated.
Each key then contains a configuration object, or a number which will cause the configuration object to default to:
{ to: [number] }
to: number
Value to animate to.
yoyo: boolean = true
If set to true, will animate to the to
value, and then reverse and animate back to the starting value. This process will be repeated.
easing: string = 'linear'
The easing function to use for animation. List of available functions:
- false (as a boolean - causes the animation to not tween)
- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
duration: number = 500
The duration of the animation in ms.
delay: number = 0
Delays the animation from starting in ms.
beat: number
If set, will complete the animation in the amount of beats provided.
This will ignore the duration
config option if set.
The BPM (beats per minute) is determined by calling BeatEngine.start(initialBPM: number)
.
Example:
BeatEnginestart130
All of the configuration options mentioned above for the values can be used as top level props which will cause them to be applied to all animation values. Setting them on the individual values will override these.