Class: Easing
A utility class for creating easing functions. All generated easing functions are based on their CSS counterparts.
Constructors
constructor
• new Easing(): Easing
Returns
Methods
back
▸ back(end): (progress: number) => number
Creates a back easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A back easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:236
bezier
▸ bezier(c1x, c1y, c2x, c2y, precompute?, minXResolution?, epsilon?, maxDepth?): (progress: number) => number
Creates a cubic bezier easing function. The function follows a cubic bezier curve with the endpoints fixed at
(0, 0) and (1, 1).
The function can optionally use a precomputed lookup table. Using a lookup table may increase performance and/or precision of the created function at the cost of some precomputation time and memory needed to store the lookup table.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
c1x | number | undefined | The x-coordinate of the first control point. Will be clamped to the range [0, 1]. |
c1y | number | undefined | The y-coordinate of the first control point. |
c2x | number | undefined | The x-coordinate of the second control point. Will be clamped to the range [0, 1]. |
c2y | number | undefined | The y-coordinate of the second control point. |
precompute | boolean | false | Whether to precompute a lookup table. Defaults to false. |
minXResolution? | number | undefined | The minimum resolution of the function along the x-axis. Defaults to 0.1 if precompute is true, or 1e-4 if precompute is false. |
epsilon | number | 1e-3 | The threshold of acceptable linear interpolation error used during precomputation. Ignored if precompute is false. Defaults to 1e-4. |
maxDepth | number | 10 | The maximum allowed recursive depth of precomputation. The number of additional lookup table breakpoints generated is bounded from above by 2 ^ (maxDepth) - 1. Ignored if precompute is false. Defaults to 10. |
Returns
fn
A cubic bezier easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Defined in
src/sdk/utils/controllers/Easing.ts:330
circ
▸ circ(end): (progress: number) => number
Creates a circular easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A circular easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:198
cubic
▸ cubic(end): (progress: number) => number
Creates a cubic easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A cubic easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:42
elastic
▸ elastic(end): (progress: number) => number
Creates an elastic easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
An elastic easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:282
exp
▸ exp(end): (progress: number) => number
Creates an exponential easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
An exponential easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:217
linear
▸ linear(): (progress: number) => number
Creates a linear easing function.
Returns
fn
A linear easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Defined in
src/sdk/utils/controllers/Easing.ts:13
polynomial
▸ polynomial(order, end): (progress: number) => number
Creates a polynomial easing function.
Parameters
| Name | Type | Description |
|---|---|---|
order | number | The order of the polynomial. |
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A polynomial easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:160
quad
▸ quad(end): (progress: number) => number
Creates a quadratic easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A quadratic easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:23
quart
▸ quart(end): (progress: number) => number
Creates a quartic easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A quartic easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:81
quint
▸ quint(end): (progress: number) => number
Creates a quintic easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A quintic easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:120
sin
▸ sin(end): (progress: number) => number
Creates a sinusoid easing function.
Parameters
| Name | Type | Description |
|---|---|---|
end | "in" | "out" | "both" | The end to which to apply easing. |
Returns
fn
A sinusoid easing function.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Throws
Error if end is not one of 'in' | 'out' | 'both'.
Defined in
src/sdk/utils/controllers/Easing.ts:179
withEndpointParams
▸ withEndpointParams(ease): (start: number, stop: number, progress: number) => number
Converts an easing function to one which supports arbitrary start and stop endpoints.
Parameters
| Name | Type | Description |
|---|---|---|
ease | (progress: number) => number | An easing function. |
Returns
fn
A new easing function which generates the same shape as the specified function while supporting arbitrary start and stop endpoints.
▸ (start, stop, progress): number
Parameters
| Name | Type |
|---|---|
start | number |
stop | number |
progress | number |
Returns
number
Defined in
src/sdk/utils/controllers/Easing.ts:465
withEndpoints
▸ withEndpoints(ease, start, stop): (progress: number) => number
Converts an easing function to one which uses specific start and stop endpoints.
Parameters
| Name | Type | Description |
|---|---|---|
ease | (progress: number) => number | An easing function. |
start | number | The start endpoint. |
stop | number | The stop endpoint. |
Returns
fn
A new easing function which generates the same shape as the specified function while using the specified start and stop endpoints.
▸ (progress): number
Parameters
| Name | Type |
|---|---|
progress | number |
Returns
number
Defined in
src/sdk/utils/controllers/Easing.ts:479