Animate

Type alias AnimationCallback

Type alias AnimationCancel

Type alias AnimationProperties : Obj<AnimationValue|Array<AnimationValue>>

Type alias AnimationResponse

ResolvedAnimation

Default value: ...

animate (callback: AnimationCallback, duration: number): AnimationResponse

Runs an animation. If no duration is provided, the animation will run indefinitely, and call callback with the time since start as first argument. If a duration is provided, the first callback argument is instead the proportion of the duration passed (between 0 and 1). The second callback argument is the time difference since the last animation frame, and the third callback argument is a cancel() function to stop the animation.

Name Type Default Description
callback AnimationCallback    
duration number    

ease (type: string, t: number, s: number): number

Applies an easing function to a number t between 0 and 1. Options include quad, cubic, quart, quint, circ, sine, exp, back, elastic, swing, spring and bounce, optionally followed by -in or -out. The s parameter is only used by back and elastic easing.

Name Type Default Description
type string    
t number 0  
s number 0  

enter ($el: ElementView, effect: string, duration: number, _delay: number): AnimationResponse

Name Type Default Description
$el ElementView    
effect string ‘fade’  
duration number 500  
_delay number 0  

exit ($el: ElementView, effect: string, duration: number, delay: number, remove: boolean): AnimationResponse

Name Type Default Description
$el ElementView    
effect string ‘fade’  
duration number 400  
delay number 0  
remove boolean false  

transition ($el: ElementView, properties: AnimationProperties, duration: number, _delay: number, easing: string): AnimationResponse

Name Type Default Description
$el ElementView    
properties AnimationProperties    
duration number 400  
_delay number 0  
easing string ‘ease-in-out’  

Copyright © 2024 Mathigon.org