Construct 3 icon

Construct 3

Documentation

The Ease editor

Ashley's avatar
Medal
Construct Team Founder
Published 1 Jul, 2019
917 words
~4-6 mins

The ease editor

This editor enables the possibility of creating custom ease functions to be used with timelines and tweens. This is a little bit of extra work when compared to the built in ease functions, but it makes it possible to customize your timeline animations and tweens even further.

The most basic use is that of a cubic curve with a beginning, end and anchor points. This allows variations on all the basic ease functions (e.g. Sinusoidal, Back etc). It is also possible to add additional points in the middle of the curve to create variations of the more complex curves (e.g. Bounce, Elastic). Of course it is also possible to create completely original curves by using multiple points.

Using the ease editor

Here is a short summary on how to create eases, use the ease editor and finally apply a custom ease.

Step 1: Create a custom ease

Right-click Eases folder in the Project Bar and select Add ease.

Step 2: Open the editor

Right-click on the newly created ease element under the Eases folder, then select the Open option or Double-click the ease element in the Project Bar.

Step 3: Make changes

With the ease editor open, you can make changes to the curve by dragging the colored handles. The default ease has four points, the start and end points (yellow squares) and the two anchor points (green and red squares). In any ease it is not possible to change the position of the start and end points. This means that with the default curve you will only be able to move the anchor points.

If more ease keyframes are added in the middle of the curve, it is possible to move those.

There are some limitations to the position the anchor points can take in relation to the main points, but those will be covered later.

The default ease will be something similar to the built in In Out Sinusoidal ease function.

Step 4: Use the custom ease

Once a custom ease is complete, it can be used in any of the places the built in eases are available. The names of the custom eases will appear after the names of the built in ease functions in all the relevant places. These include the Properties Bar, Timeline Bar and Tween behavior.

Interface

Handles

The different handles are the main method to edit the ease function.

  • Main Handle: The main points, or keyframes of the curve are represented by yellow squares. This points are positions the curve must include. The starting point and ending point can not be edited. More points can be added in the middle of the curve.
  • Anchor Handle: The anchor points of the curve, represented by green and red squares. Each pair of main points has two anchor points in between them. The first anchor point of a sub section of a curve will always be green, while the second anchor point will always be red. Anchor points can never go outside the range defined by the two main points that contain them. Dragging the main handles will force anchor handles out of their previous position to keep the previously mentioned condition.

Colored Lines

These are the main visual aid to understand how the curve will behave when it is used.

  • Green line: The green line represents the ease function itself. The closer it is to the red line, the closer the timeline or tween using the ease will be to the initial value. Going bellow the red line means the animation using the ease will be going past the starting value, an example of this is the In Back built in ease. The closer it is to the blue line, the closer the timeline or tween using the ease will be to the ending value. Going above the blue line means the animation using the ease will be going past the ending value, an example of this is the Out Back built in ease.
  • Red line: Represents the starting value of the ease.
  • Blue line: Represents the ending value of the ease.

Horizontal and vertical axis

Each axis of the graph shown by the editor has a meaning that will help you to better understand what the ease function will be doing.

  • Horizontal axis: This axis represents time. The further along the axis, the closer the animation using the ease is to finishing. The marker numbers are there to help identify what the ease will be doing at 25%, 50% and 75% completion.
  • Vertical axis: This represents the value the ease will produce. 0% is the starting value of the timeline or tween using the ease, while 100% represents the ending value.

The image bellow shows a custom ease, with multiple keyframes as well as their corresponding anchor points.

Toolbar

At the top left of the editor, there are two inputs which will show the values of the last handle that was clicked on. Useful to make more precise adjustments that what is possible by dragging with a pointer device.

Context Menu

There are two options available in the context menu.

  • Add ease keyframe: Add a new keyframe to the curve.
  • Delete ease keyframe: Remove an existing keyframe from the curve. The first and last keyframes can not be deleted.