The timeline and keyvalues are at the core of working with Flow. In this guide, we'll go through the basics of working with the timeline, keyvalues and the different things you can do with them.
The easing window is covered in the Easing Curve Window guide.
In Flow, a
timeline contains tracks and keyvalues that let you craft your animations.
keyvalue indicates the value of a property at a point in time. Keyvalues are generally indicated by a circle on the timeline, but for more information see Keyvalues: basic controls.
track is a representation of changes in keyvalues for single property, and its visual style repesents the animations between those keyvalues.
The main things to keep in mind:
intro.flowfile is a perfect example of this – it takes the same basic files and animates them in multiple ways.
Let’s start with the basics. The timeline has the following controls:
Playhead’s position indicates the animation’s progress. When the timeline isn’t playing, the playhead indicates where a keyvalue will be added, if you make any property changes.
Scale Timelineslider is useful when working with quick (less than 1 second) animations where you need to add lots of keyvalues. Scale it up to ‘zoom in’ for more detail!
There are a couple ways to create a new timeline, but the easiest is to click the
+ button to add a new timeline.
The behavior of adding a new timeline changes based on whether you used a linked Sketch file to create your Flow file.
If you create a new timeline, you’re presented with an empty stage and artboard.
You can add shapes, images and other layers as you might expect.
You can copy and paste assets (e.g. text / images) from outside of Flow as well.
Creating a new timeline presents the following:
You’ll be asked to select a start and end artboard. Some artboards might be grayed out.
For more information, see Import and Animate Sketch Files.
You can export the current timeline as:
To export a timeline, select it and navigate to
File > Export.
For media files, the currently selected timeline is the one you export!
Reverse a timeline or one of its tracks by right-clicking:
You drag the ends of the Time Range bar to set a specific window of time within which playback will occur.
When the playhead is within this area it will stop at the end, and loop back to the start of the time range.
You can drag the playhead outside of this area, and the next time it plays through the timeline it will enter the range again and abide by its start/end points once more.
Keyvalues represent one property’s value at a specific point in time.
When you animate more than one property in time like the position of a layer – i.e. the
y coordinates – you create two
tracks. Each track has its own value one for
x movement, and one for
Keyvalues are represented with a circle on the timeline.
Some keyvalues have limited or no options for easing, and can represented with a
circle (easing on both sides),
half-square (step on one side) or
square icons (steps on both sides).
Creating a new keyvalue is automatic. All you need to do is place the playhead where you want it to be and then edit an object’s properties.
As soon as you edit a property, Flow creates the keyvalue for you. You can then reposition the keyvalue if needed!
If you’re making additional changes to a property you’ve already edited, Flow adds a new keyvalue to the existing track for that property. If you’re animating a new property, Flow creates a new track for that property and adds a keyvalue to it.
Move keyvalues on the timeline by selecting them and dragging them.
You can also move a keyvalue by selecting it and editing the
Time property’s value in the Properties pane.
You can’t set the time to less than
0, but you can set it beyond the current duration of the timeline. It will adjust the length of the current timeline.
You can select a keyvalue by clicking the keyvalue symbol.
When you select a keyvalue, the
Properties panel shows the values assosciated with the keyvalue. In this case, it’s the
X position of the circle.
You can use the mouse to select a group of keyvalues.
While pressing the
Shift key, selecting a keyvalue will also select ALL OTHER KEYVALUES prior to the selected one on its track.
While pressing the
Command key, you can select multiple individual keyvlaues at the same time.
When you select a keyvalue, then copy and paste it, the value is pasted a the current time of the playhead.
When you copy/paste keyvalue groups, the first keyvalue is pasted at the playhead’s position, and the rest relative to the first keyvalue.
The playhead also moves to the time of the last keyvalue.
option-drag a kevalue to duplicate it. When you have 2 equal keyvalues side by side in the timeline, there appears a gap. The gap indicates that there is no animation during that time.
You can also duplicate groups of keyvalues.
You can move groups of keyvalues in the same way was single values.
What’s cool about groups is you can scale their relative positions to one another.
Pressing SHIFT while you move a keyvalue at either end of the group, will scale the entire selection.
When you select a group of keyvalues, a special property panel becomes avaialble. It looks like this:
Here are some notes about this panel:
Using the properties panel you can set the beginning or end points of that group.
A keyvalue group will scale if you set the
end property. Or, you can lock the duration of the group, which will result in the whole group moving and keeping its duration.
This locks the relative positions of keyvalues to one another. This means their timing stays consistent when you edit the start or end values of the group.
result(s) found for “”.