Skip to Content

Transitions

OVERVIEW

Transitions make animation quick and easy

Transitions are blocks that animate your layers without needing to use keyframes. They are great blocks to add animation to your project in just a few clicks.

Overview

Transition blocks apply a preset animation to a layer over a customizable duration of time. Most transitions come in pairs – one brings your layer into the scene, while the other removes your layer from the scene.

Fable has the following transitions:

Layer motion

  • Fade in/out - the layer gradually appear/disappear
  • Scale in/out - the layer gradually grows/shrinks
  • Slide in/out - the layer moves up/down/left/right
  • Spin in/out - the layer rotates

Text Motion

  • Text fade in/out - the characters, words, or lines of a text layer gradually appear/disappear
  • Text scale in/out - the characters, words, or lines of a text layer gradually grow/shrink
  • Text spin in/out - the characters, words, or lines of a text layer gradually rotate
  • Type in/out - the characters, words, or lines of a text layer appear/disappear one-by-one
  • Count - the contents of the text layer automatically update between two numbers over a set period of time
  • H:M:S Counter - the contents of the text layer automatically update between two time values over a set period of time
  • Morpher - the contents of the text layer automatically update between two values
  • Decode - the contents of the text layer automatically update between a random value and a set value
  • Encode - the contents of the text layer automatically update between a set value and a random value

Adding a transition

Screenshot of the Fable editor featuring the block browser button

To add a transition to a layer:

  1. Select a layer or set of layers
  2. Open the Block Browser by clicking the "Transition & Effects" button at the bottom of the Inspector
  3. Find the transition you'd like to add
  4. Click the transition on the Block Browser
  5. The transition will be added to the selected layer(s).

Controls

Adjusting properties

Transitions can be controlled on the Inspector just like any other block in Fable. Each Transition has a unique set of controls that include number inputs, drop-downs, and checkboxes.

Screenshot of the Fable editor featuring transition properties

Just like other blocks on the Inspector, you can link transition properties to other properties and/or variables. You can also add keyframes to many transition properties.

Adjusting Timing

Transitions display on the Timeline as purple time ranges.

Screenshot of the Fable editor's timeline featuring a behavior on the timeline

(1) The in-point of the range signifies the moment your transition will start animating. (2) The out-point of the range signifies the moment your transition will stop animating.

You can adjust these start and stop points by dragging each of them across the timeline, the same way you would drag a keyframe on the timeline. Additionally, you can simultaneously move the start and stop points by dragging the range between them (3).