Animation
There are three ways to make something move. This page helps you pick the right one and set it up.
Choose a way to animate
| Way | Best for | Where you set it up |
|---|---|---|
| Transition | one smooth change from here to there | a duration on the Set state step |
| Timeline | a move with keyframes, or several objects moving together | the Animation panel; the Play animation step starts it |
| Model clip | animation that came with an imported model | the Animation panel, where the import puts it |
For example:
- fading a button or opening a door when it is tapped is a transition to another state;
- a cutscene is a timeline;
- a walking character is a model clip.
Never animate the same object in two ways at once. The timeline quietly overwrites a transition. If an animation seems to fight itself, this is why.
Transitions
Give a change a duration, and it happens smoothly instead of jumping. The Set state and Override properties steps both have a duration and an easing.
Some properties change smoothly, and the rest change at the end of the transition. See what animates smoothly.
In a script, ctx.startTransition can also repeat and play back and forth (yoyo).
Back and forth needs repeat: 2 or more.
Animation steps
Events start and stop animations with two steps:
| Step | Does |
|---|---|
| Play animation | plays an animation from the timeline, on any object; you set the loop mode, repeats, speed and delay |
| Stop animation | stops it |
To move, rotate, scale, fade or recolour something from an event, make an animation in the Animation panel and play it with Play animation. For a single change, Set state with a duration is enough.
Projects made earlier can also have the Transformation, Opacity, Material, Bone transform and Built-in animation steps. They still run in those projects, but the editor no longer offers them. Material, for example, blends the targets' colour, opacity, glow and surface settings toward a saved material, and keeps each slot's type and textures.
Keyframes and easing
A keyframe is a value at a moment in time. Easing sets how the value moves between keyframes.
Easing belongs to the keyframe you are moving into, not the one you are leaving. With no easing, the value moves in a straight line.
Easing is a curve with two handles, like CSS cubic-bezier. The named presets are
ready-made handle positions: quad, quart, circular, expo and back, each as In, Out or InOut.
| Easing | Feels like |
|---|---|
| In | starts slowly and speeds up, like something setting off |
| Out | arrives and settles; the most natural choice for UI |
| InOut | slow at both ends; good for long moves |
| Back | goes slightly past the end and comes back; playful |
| Elastic | goes past the end and wobbles; you set the amount and period |
| Step | holds, then jumps at the end; for switching, not sliding |
If you are not sure, start with Out.
The timeline
Use the Animation panel when several things must move together on one clock. How to work in the panel is in Animation panel.
A timeline has three levels:
- a preset is one animation you can play by name;
- a bar is one object's part in it, and sits on a track;
- inside a bar, each property has its own keyframes.
A bar can also be a playback bar. It does not animate anything itself. Instead, it starts another object's preset when the playhead reaches it. This keeps a character in sync when each limb has its own preset.
- Looping and speed pass down to every preset a playback bar starts.
- Stopping a preset stops everything it started.
You can mute a single property inside a bar. For example, a bar that animates position and rotation can have its rotation turned off, and the keyframes are kept.
Animation that comes with a model keeps its original curves. An imported walk cycle plays exactly as it was made.
Model clips
A model can bring its own named clips. When you import the model, each clip becomes an animation on it, with the clip's name. You find it in the Animation panel, like any animation you made.
To play a clip from an event, use the Play animation step and pick that animation.
Units
- Time is in seconds. Durations on state switches are in milliseconds.
- Rotation is in degrees everywhere you can see it.
None of the three ways tells you when an animation ends. To start something after an animation, use a Wait, then step of the same length, or track the time in a script.
Next: States — save an object's looks and switch between them.