Skip to Content



Learn how keyframes bring designs to life by affecting the position, rotation, scale, opacity, color, or any other properties

What is Keyframing?

Keyframing is a technique used in motion to define the key positions, poses, or properties of a layer at key moment in time, these moments are known as keyframes.

When you set a keyframe, you're thinking about the start and end point of a sequence, that will then result in a dynamic transition between those two. Then fine-tuning your motion by adjusting the timing and easing to achieve the bespoke effect in the Inspector.

How to set Keyframes in Fable

  1. Decide the specific value of your layer, like the position, rotation, scale, opacity, color, or any other properties.
  2. Decide what moment in time this property should affect the layer you want to animate.
  3. Move the playhead to the point in timeline where you want this motion to start
  4. Select the desired layer
  5. In the attributes panel select the property to keyframe and click the diamond next to it, you'll see a diamond appear in your timeline at the playhead.
  6. Directly enter the value next to the property with your keyboard, or in the timeline under the layer, or adjust the layer directly in the canvas.
  7. Place the playhead where you would like the animation to end in the timeline and adjust the value to its new spec, if you adjust the layer manually in the canvas Fable will automatically generate the second keyframe in the timeline.
  8. Click play button or hit the spacebar to see your motion in real-time.