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
Lastly, 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
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.00124947938359,
5.0199916701374425,
5.101207830070804,
5.319866722199084,
5.780924614743856,
6.619325281132861,
8,
8.2,
8.4,
8.6,
8.8,
9,
8.99609375,
8.875,
8.05078125,
5,
1.94921875,
1.125,
1.00390625
]
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,
5.999999999999999,
9,
10,
8.666666666666668,
2.333333333333332,
1,
1,
5.999999999999999,
9,
10,
8.666666666666668,
2.333333333333332,
1,
1,
5.999999999999999,
9,
10,
8.666666666666668,
2.333333333333332,
1,
1,
5.999999999999999,
9
]
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.00124947938359,
5.0199916701374425,
5.101207830070804,
5.319866722199084,
5.780924614743856,
6.619325281132861,
8,
8.2508310501345,
7.650314698359721,
8.19857002510963,
8.113760172545293,
8.284717820143932,
7.99658203125,
7.890625,
7.16943359375,
4.5,
1.83056640625,
1.109375,
1.00341796875
]
Plotting the values:
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"
]
}