Docs/Animation

Keyframe Animation

Animate properties with keyframes.

8 min read Intermediate Updated 2026-07-01 v2.0 ~23 min to complete

Introduction

Animate properties with keyframes. This page provides a complete guide to keyframe animation in Appley, covering everything from setup to advanced techniques.

Animation is a core area of Appley. Understanding keyframe animation will help you build better games and use the platform more effectively. This documentation is designed for intermediate level users.

Requirements

Before working with keyframe animation, ensure you have the following:

Animated 3D models (FBX with animation data)
An Appley project with characters
Understanding of skeletal animation concepts
Animation clips or timeline data

Estimated Completion Time

This guide takes approximately 23 minutes to complete. The estimated reading time is 8 minutes. Difficulty level: Intermediate.

Step-by-Step Guide

Follow these steps to work with keyframe animation in your Appley project:

Import animated model

Import your FBX or GLB file that contains animation data for keyframe animation.

Load animation clips

In the inspector, load the animation clips from the imported file.

Set up the animator

Configure the animation state machine with states and transitions.

Script playback

Use the animation API to play, blend, and transition between clips.

Test and refine

Play the game and verify animations. Adjust blend times and transitions.

FluxScript Example

Below is an Appley Scripting (Flux Scripting) code example demonstrating keyframe animation:

Keyframe Animation — Appley Scripting

// Animation — Keyframe Animation
on start {
  player = world.spawn("character")
  player.loadAnimation("assets/walk.fbx")
  player.loadAnimation("assets/run.fbx")
  player.loadAnimation("assets/idle.fbx")
  player.play("idle", { blendTime: 0.2 })
}

on update(dt) {
  speed = player.getSpeed()
  if speed > 5 {
    player.play("run", { blendTime: 0.15 })
  } else if speed > 0.1 {
    player.play("walk", { blendTime: 0.2 })
  } else {
    player.play("idle", { blendTime: 0.3 })
  }
}

Node Script Example

The same logic can be implemented using Node Scripting. Here is the equivalent node graph:

Keyframe Animation — Node Graph

[On Update] ──► [Get Player Speed] ──► [Branch]
            ├─ speed > 5 ──► [Play: "run", blend 0.15]
            ├─ speed > 0.1 ──► [Play: "walk", blend 0.2]
            └─ else ──► [Play: "idle", blend 0.3]

Interchangeable Systems

FluxScript and Node Scripting compile to the same runtime. You can mix both in a single project — use whichever is best for each task.

Common Mistakes

Avoid these frequent mistakes when working with keyframe animation:

Not setting animation blend times

Always specify blendTime to avoid jarring transitions.

Playing animations on wrong objects

Ensure the target object has a skeleton matching the animation.

Forgetting to stop animations when objects are destroyed

Call player.stopAnimation() in cleanup to prevent errors.

Using root motion without configuring the character controller

Enable root motion on the controller or disable it on the animation.

Troubleshooting

If you encounter issues with keyframe animation, try these solutions:

Animation plays but character doesnt move

Root motion may be disabled. Enable it or move the character in code.

Transition between animations is jerky

Increase blend time. Ensure both animations share the same skeleton.

Animation clips are missing after import

Check import settings — ensure animation import is enabled.

IK causes limbs to jitter

Increase IK solver iterations. Check target positions for stability.

Performance Tips

Optimize your use of keyframe animation with these performance tips:

Use animation state machines for characters with many states.
Set blend times of 0.1-0.3s for smooth transitions without feeling sluggish.
Use animation events to trigger sound effects and gameplay logic at precise frames.
Use blend trees for directional movement (8-way blending).

Explore these related documentation pages:

Blend Shape Animation

Animation

Introduction to Appley

Getting Started