Connections enable you to synchronize values between properties.


Fable gives you a lot of properties to control, allowing you to create any motion your project needs. However, all this control means a lot of control surfaces, which can be overwhelming when you’re starting out with Fable or working on complex projects.

Connections are a way to reduce the amount of controls you need to think about when working with Fable. They allow you to link properties to others, so that multiple property values automatically stay in-sync.

There are two ways to create connections:

  1. Use the Connections Panel

  2. Drag Property Connectors between Connection Ports

Using the Connections Panel

Screenshot of the connections panel on Fable Editor

The Connections Panel displays a specific property’s active connections and allows you to create new connections.

Input Connections

The input section displays any property that has control over the selected property. The selected property will always inherit the value of its input connection. Each property can only have one incoming connection.

To create an incoming connection from the Connections Panel:

  1. Hover your mouse on the property you’d like to create a connection for

  2. Click the Connection Port on the left-side of the input to open the Connections Panel

  3. Click the “Add input…” button

  4. Select a property to connect to

Output Connections

The output section of the Connections Panel displays a list of properties that the selected property has control over. All properties listed in the output section will inherit the value of the selected property. Properties can have multiple outgoing connections, enabling a single property input to influence many elements in your project.

To create an outgoing connection from the Connections Panel:

  1. Hover your mouse on the property you’d like to create a connection for

  2. Click the Connection Port to open the Connections Panel

  3. Click the “Add output…” button

  4. Select a property to connect to

Property Types

Every property in Fable has a specific type. These types are:

  • Number — Used by Rotation, Width, Opacity

  • 2D Number — Used by Position, Scale, Skew

  • Text — Used by a text layer’s content property

  • Color — Used by Fill, Stroke color

  • Boolean — Used by checkboxes

When making connections, the value type of the properties you are connecting must match. The Connections Panel automatically filters properties that are compatible with the selected property.

Using the Property Connector

Screenshot of the property connection on Fable Editor

A convenient way to create connections is with the Property Connector:

  1. Click and drag the Connector Port to reveal the property connector

  2. With your mouse button still clicked, drag the connector to a property that you’d like to create a connection to

    • Properties that are compatible with the selected property will highlight as you hover over them

    • Properties that are incompatible with the selected property will appear disabled.

  3. Release your mouse button over the property you’d like to connect with

Overwriting connections

As mentioned in the Input Connections section, each property can only have one input. Fable automatically overwrites existing connections if you attempt to connect a property to another with an existing input.

To make it easy for you to tell when a connection will be overwritten, the Connections Panel marks properties that already have an input with a special indicator.

Screenshot of the special indicator for properties that already have a connection

Breaking connections

Connections are not permanent. You can break connections using the Connections Panel. When a connection is disconnected, both properties will retain their current value, but no longer be synchronized.

Screenshot of how to break connections on the Fable Editor

To break connections on the Connections Panel:

  1. Hover your mouse on the property you’d like to break a connection for

  2. Click the Connection Port to open the Connections Panel

  3. Click the property you’d like to break a connection with

Did this answer your question?