Canvallax

Class: Animate

canvallax. Animate

new Animate(target, duration, properties, options)

Animate an object's properties to new values

Parameters:
Name Type Description
target object

Object to animate.
duration number

Duration in seconds.
properties object

Properties & values to animate.
options object

Animation specific options, applied to the animation as properties.

Properties
Name Type Default Description
repeat number 0

Number of times to repeat the animation. -1 is infinite
yoyo boolean

Reverse animation on repeat
ease function | string canvallax.ease.inOutQuad

Easing function to use. Many functions are built in to canvallax.ease, and you can reference them directly or use a string of the property instead of the function itself like 'inOutCubic'
reversed boolean

Play animation backwards
onStart canvallax.Animate.onStart

Callback for when animation starts
onUpdate canvallax.Animate.onUpdate

Callback for every requestAnimationFrame render
onComplete canvallax.Animate.onComplete

Callback for when animation completes
Mixes In:
Source:
Returns:

Animate instance

Type
object
Example
// Make a square spin forever
var redSquare = canvallax.Rectangle({ fill: '#F00', width: 100, height: 100 });
canvallax.Animate(redSquare, 1, { rotation: 360 },{ ease: canvallax.ease.linear, repeat: -1 });

Classes

from
fromTo

Methods

<static> duration(Set)

Get or set the animation's duration

Parameters:
Name Type Description
Set number

the duration in seconds, or retreive the current duration
Source:

<static> restart()

Start the animation from the beginning.

Source:

<static> reverse()

Reverse the animation & restart.

Source:

play()

Play the animation by adding it to the main requestAnimationFrame call.

Mixes In:
Source:

stop()

Stop the animation by removing it from the main requestAnimationFrame call.

Mixes In:
Source:

Type Definitions

.onComplete()

Callback for when animation reaches the end, triggered each time an animation repeats.

Source:

.onStart()

Callback for when animation starts, triggered each time an animation repeats.

Source:

.onUpdate()

Callback for when animation values are updated each requestAnimationFrame.

If this callback returns false, the animation will stop.

Useful for rendering a canvallax.Scene only while an element is animating.

Source:
Returns:
Type
boolean
Example
// Make a square spin
var scene = canvallax.Scene({ playing: false }), // Scene will not automatically render
    redSquare = canvallax.Rectangle({ fill: '#F00', width: 100, height: 100 });
canvallax.Animate(redSquare, 1, { rotation: 360 },{ onUpdate: scene.render }); // Only update the scene while element is rendering