Animate async functions in controllable scopes.
npm install @samuelpetersson/animate
import animate, {curve, blend} from '@samuelpetersson/animate'
//Tween background color
await animate.tween({duration: 2}, blend.style(document.body, {backgroundColor:'#FF0099'}))
//Wait 1 second...
await animate.delay(1)
//Bullet time!
animate.scale = 0.1
//Tween myElement width and height
await animate.tween({duration: 2, curve: curve.smoothstep}, blend.style(myElement, {width:'100%', height:'400px'}))
//Stop all animations created in the animate scope
animate.clear()
//Create a new scope
var {tween} = animate.scope()
//Tween custom value
await tween({duration:4}, (f) => console.log('Current tween value:', f))
scope (animate)
-
pause:boolean
Indicates whether the scope is paused or not. -
scale:number
Delta time multiplier. (use this to speed up or slow down an entire scope) -
scope(scale:number = 1):Scope
Returns a new scope. -
clear()
Clear all animations in current scope. -
until(solve:(deltaTime:number) => boolean):Promise
Resolves when the solve function returns true. -
every(items:Promise[]):Promise
Resolves when all promises in the items array has resolved. -
delay(duration:number):Promise
Resolves when the accumulated time has reachedduration
. -
tween({duration:number, curve:(t:number) => number}, mixer:(f:number) => void):Promise
Runsmixer
with the accumulated time normalized (0 to 1).duration
specifies duration in seconds.curve
specifies a function to ease the normalized value. -
fixed({fps:number, max:number}, update:(fixedDeltaTime:number) => boolean, render:(progress:number) => void)
Runsupdate
with a fixed delta time andrender
with the progress in the last time step.fps
specifies update frames per seconds.max
specifies an update limit.
curve
smoothstep(t:number) => number
smootherstep(t:number) => number
powerIn(exp):(t:number) => number
powerOut(exp):(t:number) => number
powerInOut(exp):(t:number) => number
blend
float(a:number, b:number, t:number):number
Returns float between a and b.color(a:number, b:number, t:number):number
Returns color between a and b.angle(a:number, b:number, t:number):number
Returns angle between a and b.mixer(target:Object, values:Object, create:(property) => (t:number) => void)
Returns a new mixer function.style(target:Element, values:Object)
Returns a new mixer function .