Animations

Make things bounce, spin, blink, burst into pieces, and come back together.

Try each example, then copy the words under it and paste them to your AI. You can also send your AI the link to an example.

Movement

Move an object without writing any physics.

Bounce

Jumps up and lands back where it started.

160px
600ms
Ask your AI

Make the ball bounce up when the player taps it.

View code 
game.animateBounce(ball, 160, 600);

Float

Rises and sinks smoothly, like something hovering.

40px
1200ms
Ask your AI

Make the crystal float gently up and down.

View code 
game.animateFloat(crystal, 40, 1200);

Arc

Flies to another spot along a curve.

180px
700ms
Ask your AI

When a coin is collected, make it fly in an arc to the score.

View code 
game.animateArc(coin, score.x, score.y, 180, 700);

Trail

Leaves fading copies behind a moving object.

300ms
30ms
Ask your AI

Leave a fading trail behind the ball while it moves fast.

View code 
game.animateTrail(ball, { durationMs: 900, spacingMs: 30, fadeMs: 300 });

Emphasis

Draw the eye to something that just happened.

Pulse

Grows for a moment and shrinks back.

1.3×
300ms
Ask your AI

Make the heart pulse when the player gains a life.

View code 
game.animatePulse(heart, 1.3, 300);

Shake

Trembles in place, then settles.

16px
400ms
Ask your AI

Shake the gem when the player taps it too early.

View code 
game.animateShake(gem, 16, 400);

Squash and stretch

Flattens on impact or stretches before a jump, which makes objects feel soft and alive.

120ms
Ask your AI

Make the ball squash when it lands and stretch as it jumps again.

View code 
game.animateSquash(ball, 1, 120, () => game.animateStretch(ball, 1, 120));

Spin

Turns around its center.

360°
800ms
Ask your AI

Spin the star when it is collected.

View code 
game.animateRotation(star, 360, 800);

Appear and disappear

Show, hide, and warn without removing anything abruptly.

Fade

Turns transparent and comes back.

700ms
Ask your AI

Fade the gem out slowly when it disappears.

View code 
game.animateAlpha(gem, 0, 700);

Flicker

Wavers irregularly, like a faulty light or a ghost.

1000ms
Ask your AI

Make the crystal flicker like a broken light.

View code 
game.animateFlicker(crystal, 1000);

Wipe

Reveals or hides an object with a straight edge that sweeps across it.

700ms
Ask your AI

Make the star appear with a wipe from left to right.

View code 
game.animateWipe(star, { mode: "reveal", direction: "left-to-right", durationMs: 700 });

Break apart and build

The showiest effects: an object cut into pieces that fly, dissolve, or come together.

Explode

Bursts into pieces that fly outward and fall.

4
320
Ask your AI

Make the gem burst into pieces when the player taps it.

View code 
game.animateExplode(gem, { rows: 4, cols: 4, speed: 320 });

Assemble

Pieces fly in from around it and join into the object.

4
800ms
Ask your AI

Make the coin assemble from flying pieces when it appears.

View code 
game.animateAssemble(coin, { rows: 4, cols: 4, durationMs: 800 });

Disintegrate

Crumbles away inside its own outline, in a sweep.

8
Ask your AI

Make the crystal crumble away from left to right when it is used up.

View code 
game.animateDisintegrate(crystal, { rows: 8, cols: 8, direction: "left-to-right" });

Integrate

Builds itself up inside its own outline, the reverse of disintegrate.

8
Ask your AI

Make the star build itself up from bottom to top when the level starts.

View code 
game.animateIntegrate(star, { rows: 8, cols: 8, direction: "bottom-to-top" });