Easings

Easing Manager

Proto.io has an Easing manager that helps you better tailor your animation by choosing an easing function and duration while previewing it in an animated graph form. This acts as a selector, meaning that the left column has the available easing functions and the selected one is indicated with a tick ✔. 

easings-manager.png

 

Easing functions

The easing functions available are the basic: Linear, Ease in, Ease out, Ease in-out, with powers, Quad, Cubic, Quart, Quint, Back, Bounce, Circ, Elastic, Expo, Sine.

Animation-Easings-graph-01.png

There is also Cubic-Bezier. You can customize this by manually entering the X, Y values, or by dragging the handles (highlighted in image below with red circles).

cubic-bezier.png

And Spring rk4. Here duration is dependent on Tension, Friction, Velocity values and is calculated automatically.

Screen_Shot_2017-09-18_at_12.34.15_PM.png

Easing presets

The strength of the Easings manager is that you can add an easing preset with your preferred settings and reuse it wherever you need to. An easing preset can be set as a default, meaning that from that point onwards, that particular one will be used (easings previously set will not be affected).

 preset.png

 edit-preset.png

The ‘+’ button in the bottom left corner is for adding a new preset. While you have a preset easing selected on the left, you get a set of action buttons that apply: edit, duplicate and delete. Easing presets can be distinguished by their name, the corresponding graph icon, or by the color circle on the left of their icon. The default easing is indicated by a filled circle.

The different colors are particularly useful when there are a number of preset easings (perhaps based on the same easing function) and you have to distinguish between them in the timeline view (see below).

 

How to access

The easings manager can be accessed from the timeline by clicking on the easing icon next to each layer and then on the 'Easing' field, but also from the Interactions tab of the Inspector, depending on the selected element and action, again, when you click on the ‘Easing’ field.

Screen_Shot_2017-09-07_at_4.10.17_PM.pngScreen_Shot_2017-09-08_at_10.20.12_AM.png

 

Going back to the timeline view, where you see the list of layers with their respective delay and duration, you can adjust them by dragging the blue bar (for delay adjustment), or by dragging the handles at the beginning and end of the blue bar (duration adjustment). 

Parent layers (that have child layers within them) like groups, etc. might have individual layers with a different easing function. In this case, the parent layer appears to have ‘No common easing’ as its selected easing function. Changing the parent layer’s easing function and delay will affect all child layers’ easing.

 

Some easing functions like Spring and easing presets have set durations. Adjusting the parent layer’s duration will have some restrictions if there are child layers with set durations.

Have more questions? Submit a request