Curve Editor¶
Graph¶
Click and drag the handles to define the shape of your curve. Anything you make here will directly translate to your animation curve.
SHIFT | Snap to floor or ceiling |
ALT | Lock angle |
CTRL | Lock length |
SHIFT+CTRL | Move handles symmetrically |
Read from AE¶
This will analyze currently selected keyframes (or properties with Flow expression) and set the graph to its in/out values. If a preset with such values exists in Flow library, it will get auto-selected in the Flow interface.
- If Apply as Keys is enabled, Flow will read values from selected keyframes,
- If Apply as Expression is enabled, Flow will read values from selected properties that have Flow expression applied.
Note
Behaviour depends on “Read Key Values” uses Ease Direction option in the Preferences
Bezier Points¶
This reflects the location of your two points.
If you’re familiar with the css transition cubic-bezier() property, these values work exactly the same way and will produce the exact same curve.
You can click here to manually set or copy these values out.
Tip
You can copy/paste bezier values from http://cubic-bezier.com/ in form of full URL like http://cubic-bezier.com/#.8,0,.2,1 to values field. No need to strip off domain string!
Apply Type¶
How do you want to apply a Flow curve?
Apply as Keys¶
With this enabled, APPLY will change the animation curves on any selected keyframes to your cuve.
Apply as Expression¶
A bit more complicated, this mode will add an expression to your selected property, giving you a range mapping control.
These controls work the exact same way as linear()
, ease()
, easeIn()
or easeOut()
.
Expression is built to work with properties with or without keyframes, and looks something like this:
/* ---------- Flow Function Declarations ---------- */
function customBezier(t, tMin, tMax, value1, value2, bezierPoints) { /* ... */ }
/* ---------- Flow Function Declarations ---------- */
/* ---------- Flow Expression Template ------------ */
var startTime = 1;
var endTime = 2;
var startValue = value;
var endValue = value * 2;
if (numKeys > 0) {
var nearestKeyIndex = nearestKey(time).index;
if (key(nearestKeyIndex).time > time) nearestKeyIndex--;
if (nearestKeyIndex === 0 || nearestKeyIndex === numKeys) {
startValue = endValue = value;
} else {
startTime = key(nearestKeyIndex).time;
endTime = key(nearestKeyIndex + 1).time;
startValue = key(nearestKeyIndex).value;
endValue = key(nearestKeyIndex + 1).value;
}
}
customBezier(time, startTime, endTime, startValue, endValue, [0.4, 0, 1, 1]); // Acceleration
/* ---------- Flow Expression Template ------------ */
Flow Function Declarations
block contains a list of function definitions, and gets updated each time you add different curve from Flow. You shouldn’t touch this part, unless you know what you are doing.
Flow Expression Template
block is meant to be modified by user.
If a property has no keyframes, then animation starts at startTime = 1
and ends at time endTime = 2
and changes values from startValue = value
to endValue = value * 2
. These values are just a placeholders, so please free to modify them to fit your needs.
When a property has keyframes, then the if
condition gets executed, and previously defined values (startTime, endTime, startValue, endValue
) get ignored. You shouldn’t modify this block unless you know what you are going.
Second to last line is the function invocation, that sends previously defined values to appropriate method and performs the magic. When ever you add a new curve, a new function invocation gets added at second to last line and previous one get commented-out, like this:
// customBezier(time, startTime, endTime, startValue, endValue, [0.4, 0, 1, 1]); // Curve added at first run
customBezier(time, startTime, endTime, startValue, endValue, [0, 0, 0.2, 1]); // Curve added at a later time
/* ---------- Flow Expression Template ------------ */
Ease Direction¶
These toggles define whether you want to use your curve for easing into your keys, out of your keys, or both.
APPLY¶
This makes magic 🎉
Tip
Enable Auto-Apply Curve in the Preferences to make your Flowing experience even better