Animation

To create animation, we can change an object's size, position or color over time. We can create more complex animations by chaining several animations together.

Functions

animate
grow
move
moveTo
shrink

object.animate(properties, duration = 1, easing = 'easeinoutelastic')

Animate any number of properties.

Parameters

properties Object Object list the properties to animate and their target values.
duration Number Duration of the animation in seconds.
easing String Easing function to use for the animation.

Returns

Animation

let ball = circle(400, 200, 250) ball.animate( {x: 400, radius: 350 }, 1)

object.grow(amount, duration = 1, easing = 'easeinoutelastic')

Grow the object by the specified number of pixels.

Parameters

amount Number Number of pixels to grow the object by.
duration Number Duration of the animation in seconds.
easing String Easing function to use for the animation.

Returns

Animation

let ball = circle(400, 200, 250) ball.grow(100)

object.shrink(amount, duration = 1, easing = 'easeinoutelastic')

Shrink the object by the specified number of pixels.

Parameters

amount Number Number of pixels to shrink the object by.
duration Number Duration of the animation in seconds.
easing String Easing function to use for the animation.

Returns

Animation

let ball = circle(400, 200, 250) ball.shrink(100)

object.move(x, y, duration = 1, easing = 'easeinoutelastic')

Move the object the specified number of pixels in each direction.

Parameters

x Number Number of pixels to move along the x axis.
y Number Number of pixels to move along the y axis.
duration Number Duration of the animation in seconds.
easing String Easing function to use for the animation.

Returns

Animation

let ball = circle(400, 200, 250) ball.move(100, 0)

object.moveTo(x, y, duration = 1, easing = 'easeinoutelastic')

Move the object to a specific coordinate.

Parameters

x Number Target x coordinate.
y Number Target y coordinate.
duration Number Duration of the animation in seconds.
easing String Easing function to use for the animation.

Returns

Animation

let ball = circle(400, 200, 250) ball.moveTo(100, 100)

Easing Functions

Linear

easing = 'linear' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()

Ease In

easing = 'easeIn' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()

Ease Out

easing = 'easeOut' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()

Ease In Out

easing = 'easeInOut' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()

Ease In Elastic

easing = 'easeInElastic' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()

Ease Out Elastic

easing = 'easeOutElastic' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()

Ease In Out Elastic

easing = 'easeInOutElastic' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()

Chaining Animations Together

By default, when attempting to animate a property that is already being animated, the active animation will be stopped and replaced with the new one. By chaining animations together in the following pattern, the animations will play one after the other.

let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200)

repeat(count = infinite)

Calling the repeat() function after an animation, or chain of animations, will repeat the animation or animations.

Parameters

count Number Number of times to repeat the animation. If omitted the animation will repeat indefinately.

easing = 'easeOutElastic' let ball = circle(200, 200, 250) ball.moveTo(600, 200).moveTo(200, 200).repeat()