Easing functions
easingChain
Commentary
added in 1.5.0
stateful function
Runs a series of easing functions in succession. Use this if you want to orchestrate a series of changes to a value over time.
By default, each easing function will run sequentially until completion. When the final function runs, the value will be pegged at the last easing's from value. 1
You can optionally loop the chain to make it run indefinitely. 2
Instead of an easing function, you can also supply a numeric function in its place. This is handy if you want to model a value ramping up, holding steady, and then declining. 3
Lastly, you can freely mix time-based and counting-based easings. 4
Examples
Terminating a chain
Set stages to a series of easing functions that will be run in a row. Each duration will be respected before moving onto the next.
{
"_gen": "easingChain",
"stages": [
{
"_gen": "easing",
"direction": "easeIn",
"degree": "quart",
"from": 5,
"to": 8,
"duration": 7
},
{
"_gen": "easing",
"direction": "easeIn",
"degree": "linear",
"from": 8,
"to": 9,
"duration": 5
},
{
"_gen": "easing",
"direction": "easeInOut",
"degree": "quint",
"from": 9,
"to": 1,
"duration": 8
}
]
}
[
5,
5.002314814814815,
5.037037037037037,
5.1875,
5.592592592592593,
6.446759259259259,
8,
8,
8.25,
8.5,
8.75,
9,
9,
8.992384125661927,
8.75629202118165,
7.149342535848158,
2.8506574641518423,
1.2437079788183496,
1.0076158743380734,
1
]
You can see how the values chain together by looking at a plot:
Looping a chain
Set loop to true to cause the chain to repeat indefinitely.
{
"_gen": "easingChain",
"loop": true,
"stages": [
{
"_gen": "easing",
"direction": "easeOut",
"degree": "quad",
"from": 1,
"to": 10,
"duration": 3
},
{
"_gen": "easing",
"direction": "easeInOut",
"degree": "cubic",
"from": 10,
"to": 1,
"duration": 3
}
]
}
[
1,
7.75,
10,
10,
5.5,
1,
1,
7.75,
10,
10,
5.5,
1,
1,
7.75,
10,
10,
5.5,
1,
1,
7.75,
10,
10,
5.5,
1
]
Looking at a plot again, you can see how the values cycle:
Supply a numeric function
Supply any numeric function inside of stage to control how values are generated. This is mainly useful for holding values steady or within a range for some duration.
{
"_gen": "easingChain",
"stages": [
{
"_gen": "easing",
"direction": "easeIn",
"degree": "quart",
"from": 5,
"to": 8,
"duration": 7
},
{
"_gen": "easing",
"ease": {
"_gen": "normalDistribution",
"mean": 8,
"sd": 0.3
},
"duration": 5
},
{
"_gen": "easing",
"direction": "easeInOut",
"degree": "quint",
"from": 8,
"to": 1,
"duration": 8
}
]
}
[
5,
5.002314814814815,
5.037037037037037,
5.1875,
5.592592592592593,
6.446759259259259,
8,
8.2508310501345,
7.650314698359721,
8.19857002510963,
8.113760172545293,
8.284717820143932,
8,
7.9933361099541855,
7.786755518533944,
6.380674718867138,
2.619325281132862,
1.213244481466056,
1.0066638900458145,
1
]
Plotting the values:
Mixing easing types
Easings in the chain can freely use duration or events to specify their lengths.
{
"_gen": "easingChain",
"loop": true,
"stages": [
{
"_gen": "easing",
"direction": "easeIn",
"degree": "linear",
"from": 1,
"to": 10,
"events": 5
},
{
"_gen": "easing",
"direction": "easeOut",
"degree": "quint",
"from": 10,
"to": 1,
"duration": 7
}
]
}
[
1,
3.25,
5.5,
7.75,
10,
10,
4.616898148148146,
2.185185185185186,
1.28125,
1.0370370370370363,
1.0011574074074066,
1
]
Specification
JSON schema
{
"type": "object",
"properties": {
"stages": {
"type": "array",
"items": {
"type": "object",
"properties": {
"_gen": {
"type": "string"
}
},
"required": [
"_gen"
]
},
"minItems": 1
},
"loop": {
"type": "boolean"
}
},
"required": [
"stages"
]
}