Example
01. cubic-in
02. cubic-out
03. cubic-inout
01. cubic-in
02. cubic-out
03. cubic-inout
REFERENCE - EASING
Easing effect is the non-linear movement of objects in animation
Animation accelerates or slows down over a curved period
The following chart gives a brief overview of all easing effects that can be used, and there effects
Easing effect is the non-linear movement of objects in animation
Animation accelerates or slows down over a curved period
The following chart gives a brief overview of all easing effects that can be used, and there effects
| EASING | ||
| NAME | CURVE | EFFECT |
| quad-in | curve out (10%) | moderate accelerate to end |
| quad-out | curve in (90%) | moderate slow down at end |
| quad-inout | curve out (10%) - curve in (90%) | moderate overall |
| cubic-in | curve out (20%) | very slow start |
| cubic-out | curve in (80%) | moderate slow down at end |
| cubic-inout | curve out (20%) - curve in (80%) | accelerate to end |
| quart-in | curve out (30%) | very slow start |
| quart-out | curve in (70%) | fast accelerate start |
| quart-inout | curve out (30%) - curve in (70%) | moderate overall |
| quint-in | curve out (40%) | very slow start |
| quint-out | curve in (60%) | moderate accelerate |
| quint-inout | curve out (40%) - curve in (60%) | slow start accelerate |
| sine-in | curve out (10%) | slow start moderate accelerate |
| sine-out | curve in (90%) | moderate slow down at end |
| sine-inout | curve out (10%) - curve in (90%) | moderate overall |
| expo-in | curve out (40%) | fast accelerate to end |
| expo-out | curve in (60%) | accelerate start, slow end |
| expo-inout | curve out (40%) - curve in (60%) | fast accelerate in mid |
| circ-in | curve out (20%) | fast accelerate to end |
| circ-out | curve in (80%) | hard slow down at end |
| circ-inout | curve out (20%) - curve in (80%) | rapid accelerate in mid |
| bounce-in | curve in | bounce at start |
| bounce-out | curve out | bounce at end |
| bounce-inout | curve in - curve out | bounce at start & end |
| elas-in | curve out | elastic at end |
| elas-out | curve in | elastic at start |
| elas-inout | curve out (40%) - curve in (60%) | elastic at start & end |
| back-in | curve out (10%-60%) | overshoot start |
| back-out | curve in (40%-90%) | overshoot end |
| backin-out | curve in (40%) - curve out (60%) | overshoot start & end |
| NOTE: percentage are rough estimates of the curve on the x (time) axis (example below) | ||
01. linear
02. swing
02. swing
This diagram shows an example of the easing curve on the effect quad-inout
A very good visual reference of the easing curve, although written for Flash in mind, can be found here
A very good visual reference of the easing curve, although written for Flash in mind, can be found here
time
value
10%
90%
The best way to understand easing is just by using them on trial and error of course, no better way then to just see what happens
EXAMPLE: quad-inout
EXAMPLE: quad-inout
= no curve, no effect
= 2 step curved
= 2 step curved
No Quick Link
No Quick Link
No Quick Link
No Quick Link
No Quick Link
EASING NAMES:
There are 10 effects with each 3 variants
01. quad
02. cubic
03. quart
04. quint
05. sine
06. expo
07. circ
08. bounce
09. elastic
10. back
01. quad
02. cubic
03. quart
04. quint
05. sine
06. expo
07. circ
08. bounce
09. elastic
10. back
The 3 variants are in / out / inout
Aside from these 30 effects there is also