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

Context Menu

Right-click in the graph to access additional options to:

  • Apply either expression or curve, depending on selected options in the UI
  • Apply to Keys provides an option to apply curve to keyframes in either Ease, Ease In or Ease Out direction
  • Apply to Expression applies Flow’s curve expression
  • Reverse Values will invert the current curve easing
  • Copy Values to Clipboard copies in the form of 0.70,0.27,0.16,1.00

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!


Save to Library

Click here to save the current curve to your User Library for quick use later.

Save Preset

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