'Action: Move Element'

actionsmoveanimationpositionmotioneasing

The Move Element action animates an element to a new position on the canvas. It's the foundation for character movement, sliding panels, progress indicators, and any interaction where something needs to physically move.

Position Modes

You can specify the target position in three ways:

Absolute Position (x, y)

Move the element to exact canvas coordinates. The element animates from wherever it currently is to the specified x/y position.

Example: Move a character to position (500, 300) when the user clicks a waypoint.

Relative Offset (offsetX, offsetY)

Move the element by a delta from its current position. The element shifts left/right/up/down by the specified amount.

Example: Move a slider handle 50 pixels to the right on each click.

Variable-Driven Position

Use a variable reference (like $targetX or $characterY) as the position value. When the variable changes, the element animates to the new position. This is powerful for data-driven animation — update a variable and the element follows.

Example: Bind a game piece's position to $pieceX and $pieceY, then update those variables to move the piece around a board.

Targeting

By default, the action moves the element it's attached to. You can target a different element by selecting it from the dropdown — this lets buttons or triggers move other elements.

Motion Configuration

Every Move Element action has motion settings that control how the element moves:

Speed vs Duration

  • Speed mode: The element moves at a consistent speed (pixels per second). Longer distances take more time. This feels natural for character movement.
  • Duration mode: The animation always takes the same amount of time regardless of distance. This is predictable for UI animations.

Easing

Controls acceleration and deceleration:

  • Linear: Constant speed from start to finish
  • Ease: Starts slow, speeds up, then slows down (general purpose)
  • Ease In: Starts slow, then accelerates
  • Ease Out: Starts fast, then decelerates (most natural-feeling)
  • Ease In Out: Slow at both ends, fast in the middle
  • Spring: Physics-based spring motion with a slight overshoot and settle

Teleport

Skip the animation entirely and jump to the target position instantly. Useful for respawning, scene entry, or resetting positions.

Teleport Threshold

Automatically teleport if the distance exceeds a threshold. For wrap-around animations (e.g. a cloud that loops across the screen), the cloud moves smoothly until it reaches the edge, then teleports back to the start instead of animating backwards.

See Motion and Animation for the complete motion system.

Scope: Local vs Global

  • Local (default): Only the triggering user sees the movement.
  • Global: Everyone sees the element move. Any participant can trigger global movement — useful for collaborative game pieces and shared interactions.

Common Patterns

Character Movement

  1. Place a character image on the canvas
  2. Place invisible hotspot shapes at key locations
  3. On each hotspot click: Move Element → character to the hotspot's position
  4. Use speed mode with ease-out easing for natural walking

Sliding Panel

  1. Position a panel off-screen (e.g. x: -300)
  2. On "Open" button click: Move Element → panel to x: 0 (slides in)
  3. On "Close" button click: Move Element → panel to x: -300 (slides out)

Progress Bar

  1. Create a fill shape inside a track shape
  2. Bind the fill's width to a variable using position bindings
  3. As $progress increases, the fill expands

Game Piece on a Board

  1. Create variables for piece position ($pieceX, $pieceY)
  2. Set position bindings on the game piece element
  3. Update the variables via Set Variable actions
  4. The piece animates to each new position automatically

Tips

  • Ease-out is your friend: For most UI movements, ease-out feels the most natural — things arrive smoothly rather than stopping abruptly.
  • Chain moves for paths: Use action chaining to move an element through multiple waypoints. Each move action in the chain goes to the next point.
  • Combine with state changes: Move an element to a new position AND change its state simultaneously for rich visual transitions.

What's Next?