Touch Develop retirement postponed until June 22, 2019. Sign-in and access to cloud assets to be removed on May 23, 2018.Learn More..

Sprite Animation

A animation allows to smoothly change a sprite property. It can be used to fade sprites in and out, rotate, scale or move the sprites using smooth trajectories.

getting started

Calling the action sprite→create animation will schedule a new animation. The animation will be executed on the next board→evolve call.
var anim := sprite → create animation
  • fade in from transparent to opaque
sprite → set opacity(0)
anim → fade in(1, "quadratic")
  • fade out from opaque to transparent
anim → fade out(1, "quadratic")
  • hide and show
anim → hide
anim → show
  • puff out
anim → puff out(0.5, "cubic", 1.5)
anim → play frames("all")
  • play a sound
anim → play sound( sound)
  • delete the sprite
anim → delete


You can chain an animation after the other by calling multiple animation actions on the animation.
anim → fade in(1, "quadratic")
anim → scale(1, "quadratic", "inout", 1.5)


You can fork a new animation after an animation. This animation will start when the animation finishes and continue on its own.
anim → fade in(1, "quadratic")
var rotate anim := anim → fork
rotate anim → turn to(1, "expo", "in", 90)

repeating and yoyo

You can repeat the last animation by using repeat. A negative number of repetition will repeat forever.
anim → repeat(3, true)
The yoyo argument (second argument) determines if each repetition should reverse the animation.
anim → repeat(3, false)

easing functions

You can select from various easing functions to determine how the property will change. Easing functions make your animations more energetic and appealing.
rotate anim → move to(1, "cubic", "inout", 0, 0)


You can add code to run when the animation is finished running.
anim → on stop(handler)
where handler() is
start another animation?

custom animations

You can schedule a code handler to create custom animations.
anim → run(1, "quadratic", "in", handler2)
where handler2(x : Number) is
x is between 0 and 1
function (Sprite Animation) → beat(duration : Number, cycle : Number, value : Number)
Creating a beating animation
function (Sprite Animation) → color(duration : Number, easing : String, shape : String, c : Color)
Changes the color of the sprite
function (Sprite Animation) → delete
deletes the sprite
function (Sprite Animation) → fade(duration : Number, easing : String, shape : String, opacity : Number)
Changes the opacity of the sprite
function (Sprite Animation) → fade in(duration : Number, easing : String)
Fades in to fully opaque
function (Sprite Animation) → fade out(duration : Number, easing : String)
Fades out to transparent
function (Sprite Animation) → fork returns Sprite Animation
Starts a new animation and continues with the current animation
function (Sprite Animation) → frame(name : String)
Sets a different frame from the sprite sheet
function (Sprite Animation) → height(duration : Number, easing : String, shape : String, value : Number)
Modifies the sprite height
function (Sprite Animation) → hide
Hides the sprite
function (Sprite Animation) → is active returns Boolean
Gets a value indicating if the animation is still running
function (Sprite Animation) → is invalid returns Boolean
Returns true if the current instance is useless
function (Sprite Animation) → move to(duration : Number, easing : String, shape : String, x : Number, y : Number)
Moves the sprite to a given location using separate easing for x and y
function (Sprite Animation) → on start(body : Action) returns Event Binding
Raised when the animation started playing
function (Sprite Animation) → on stop(body : Action) returns Event Binding
Raised when the animation stopped playing
function (Sprite Animation) → play frames(animation : String)
Starts playing an animation from the sprite sheet, if any
function (Sprite Animation) → play sound(sound : Sound)
play sound
function (Sprite Animation) → post to wall
Describes the animation.
function (Sprite Animation) → puff out(duration : Number, easing : String, scale : Number)
Scales up and fades out an object
function (Sprite Animation) → repeat(count : Number, yoyo : Boolean)
Repeats the latest animation. Negative count makes infinite repetition. yoyo makes the animation repeat back and forth.
function (Sprite Animation) → run(duration : Number, easing : String, shape : String, handler : Number Action)
Calls a user handler during the animation. handler receives a number from 0 to 1 during the tweeining.
function (Sprite Animation) → scale(duration : Number, easing : String, shape : String, value : Number)
Scales the sprite
function (Sprite Animation) → set time scale(scale : Number)
Sets the current time scale factor
function (Sprite Animation) → show
shows the sprite
function (Sprite Animation) → sleep(duration : Number)
Waits for a number of seconds
function (Sprite Animation) → stop
Stops this animation
function (Sprite Animation) → text(duration : Number, easing : String, shape : String, value : String)
Changes the text of the sprite.
function (Sprite Animation) → time scale returns Number
Gets the current time scale factor
function (Sprite Animation) → turn to(duration : Number, easing : String, shape : String, angle : Number)
Rotates the sprite.
function (Sprite Animation) → wait
Waits till the animation completes. This action will evolve the board if needed.
function (Sprite Animation) → wait for(animation : Sprite Animation)
Waits for the other animation to complete before proceding.
function (Sprite Animation) → width(duration : Number, easing : String, shape : String, value : Number)
Modifies the sprite width