Transitions & Effects

Transitions & Effects

Take your project to the next level with Transitions and Effects – blocks that quickly add style and movement to your layers.

Transitions bring your layers to life without the complexity of keyframes. Apply ready-made animations like fade, scale, and spin to layers over a customizable duration, bringing your project to life in just a few clicks.

Effects add unique visual styles, filters, and controls to your layers, providing endless customization possibilities.

Adding Transitions & Effects

  1. Select your layer(s).

  2. Open the Block Browser by clicking Transitions & Effects at the bottom of the Inspector.

  3. Choose your desired transition/effect.

  4. Double-click to add it to your selected layer(s).

Transition Controls

Properties: Easily adjust transition properties on the Inspector, just like any other block in Fable. Link properties, add keyframes, and customize with number inputs, drop-downs, and checkboxes.

Adjusting Timing: See your transitions on the Timeline as purple time ranges. Drag the start and stop points or drag the range between them to achieve perfect timing.

Explore a detailed list of transitions & effects below:

Transitions

Layer Motion:

  • Fade in/out: Gradual appearance/disappearance.

  • Scale in/out: Gradual growth/shrinkage.

  • Slide in/out: Move up/down/left/right.

  • Spin in/out: Rotate.

Text Motion:

  • Text fade in/out: Characters, words, or lines gradually appear/disappear.

  • Text scale in/out: Characters, words, or lines gradually grow/shrink.

  • Text spin in/out: Characters, words, or lines gradually rotate.

  • Type in/out: Characters, words, or lines appear/disappear one by one.

  • Count: Text content updates between two numbers over time.

  • H:M:S Counter: Text content updates between two time values over time.

  • Morpher: Text content updates between two values.

  • Decode: Text content updates between a random value and a set value.

  • Encode: Text content updates between a set value and a random value.

Effects

  • Shape: Manipulate the way your shape layers render.

  • Text: Animate text properties individually by character, word, or line.

  • Color: Adjust specific color properties.

  • Blur: Apply various blurs.

  • Filter: Apply preset color filters.

  • Stylize: Add drop shadow, glow, and more.

  • Distort: Manipulate the entire bounding box.

  • Simulate: Replicate real-world effects.

  • Transform: Procedurally affect transform properties.

If you're looking for a transition or effect that is not on Fable, please send us a request at support@fable.app!

Transitions bring your layers to life without the complexity of keyframes. Apply ready-made animations like fade, scale, and spin to layers over a customizable duration, bringing your project to life in just a few clicks.

Effects add unique visual styles, filters, and controls to your layers, providing endless customization possibilities.

Adding Transitions & Effects

  1. Select your layer(s).

  2. Open the Block Browser by clicking Transitions & Effects at the bottom of the Inspector.

  3. Choose your desired transition/effect.

  4. Double-click to add it to your selected layer(s).

Transition Controls

Properties: Easily adjust transition properties on the Inspector, just like any other block in Fable. Link properties, add keyframes, and customize with number inputs, drop-downs, and checkboxes.

Adjusting Timing: See your transitions on the Timeline as purple time ranges. Drag the start and stop points or drag the range between them to achieve perfect timing.

Explore a detailed list of transitions & effects below:

Transitions

Layer Motion:

  • Fade in/out: Gradual appearance/disappearance.

  • Scale in/out: Gradual growth/shrinkage.

  • Slide in/out: Move up/down/left/right.

  • Spin in/out: Rotate.

Text Motion:

  • Text fade in/out: Characters, words, or lines gradually appear/disappear.

  • Text scale in/out: Characters, words, or lines gradually grow/shrink.

  • Text spin in/out: Characters, words, or lines gradually rotate.

  • Type in/out: Characters, words, or lines appear/disappear one by one.

  • Count: Text content updates between two numbers over time.

  • H:M:S Counter: Text content updates between two time values over time.

  • Morpher: Text content updates between two values.

  • Decode: Text content updates between a random value and a set value.

  • Encode: Text content updates between a set value and a random value.

Effects

  • Shape: Manipulate the way your shape layers render.

  • Text: Animate text properties individually by character, word, or line.

  • Color: Adjust specific color properties.

  • Blur: Apply various blurs.

  • Filter: Apply preset color filters.

  • Stylize: Add drop shadow, glow, and more.

  • Distort: Manipulate the entire bounding box.

  • Simulate: Replicate real-world effects.

  • Transform: Procedurally affect transform properties.

If you're looking for a transition or effect that is not on Fable, please send us a request at support@fable.app!

Transitions bring your layers to life without the complexity of keyframes. Apply ready-made animations like fade, scale, and spin to layers over a customizable duration, bringing your project to life in just a few clicks.

Effects add unique visual styles, filters, and controls to your layers, providing endless customization possibilities.

Adding Transitions & Effects

  1. Select your layer(s).

  2. Open the Block Browser by clicking Transitions & Effects at the bottom of the Inspector.

  3. Choose your desired transition/effect.

  4. Double-click to add it to your selected layer(s).

Transition Controls

Properties: Easily adjust transition properties on the Inspector, just like any other block in Fable. Link properties, add keyframes, and customize with number inputs, drop-downs, and checkboxes.

Adjusting Timing: See your transitions on the Timeline as purple time ranges. Drag the start and stop points or drag the range between them to achieve perfect timing.

Explore a detailed list of transitions & effects below:

Transitions

Layer Motion:

  • Fade in/out: Gradual appearance/disappearance.

  • Scale in/out: Gradual growth/shrinkage.

  • Slide in/out: Move up/down/left/right.

  • Spin in/out: Rotate.

Text Motion:

  • Text fade in/out: Characters, words, or lines gradually appear/disappear.

  • Text scale in/out: Characters, words, or lines gradually grow/shrink.

  • Text spin in/out: Characters, words, or lines gradually rotate.

  • Type in/out: Characters, words, or lines appear/disappear one by one.

  • Count: Text content updates between two numbers over time.

  • H:M:S Counter: Text content updates between two time values over time.

  • Morpher: Text content updates between two values.

  • Decode: Text content updates between a random value and a set value.

  • Encode: Text content updates between a set value and a random value.

Effects

  • Shape: Manipulate the way your shape layers render.

  • Text: Animate text properties individually by character, word, or line.

  • Color: Adjust specific color properties.

  • Blur: Apply various blurs.

  • Filter: Apply preset color filters.

  • Stylize: Add drop shadow, glow, and more.

  • Distort: Manipulate the entire bounding box.

  • Simulate: Replicate real-world effects.

  • Transform: Procedurally affect transform properties.

If you're looking for a transition or effect that is not on Fable, please send us a request at support@fable.app!