🦚
Ts-Curves
Just input the progress and get your curve, it's that simple. as well keep in mind that progess is inbetween 0 to 1.
Features
-
Typescript Intellisense
-
Include definations for most of easing curves, So you would not need to check browser for what does this curve do,
Mention
- Most of the Curves Taken from flutter Official repo link
Curves
DecelerateCurve: Decelerate()
f(t) = t²
parabola.
A curve where the rate of change starts out quickly and then decelerates; an upside-down
0.18, 1.0, 0.04, 1.0
fastLinearToSlowEaseIn: A curve that is very steep and linear at the beginning, but quickly flattens out and very slowly eases in
By default is the curve used to animate pages on iOS back to their original position if a swipe gesture is ended midway through a swipe.
0.25, 0.1, 0.25, 1.0
ease: A cubic animation curve that speeds up quickly and ends slowly.
0.42, 0.0, 1.0, 1.0
easeIn: A cubic animation curve that starts slowly and ends quickly.
0.67, 0.03, 0.65, 0.09
easeInToLinear: A cubic animation curve that starts slowly and ends linearly.
The symmetric animation to [linearToEaseOut].
0.47, 0.0, 0.745, 0.715
easeInSine: A cubic animation curve that starts slowly and ends quickly.
This is similar to [Curves.easeIn], but with sinusoidal easing for a slightly less abrupt beginning and end. Nonetheless, the result is quite gentle and is hard to distinguish from [Curves.linear] at a glance.
Derived from Robert Penner’s easing functions.
0.55, 0.085, 0.68, 0.53
easeInQuad: A cubic animation curve that starts slowly and ends quickly.
Based on a quadratic equation where f(t) = t²
, this is effectively the inverse of
[Curves.decelerate].
Compared to [Curves.easeInSine], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.55, 0.055, 0.675, 0.19
easeInCubic: A cubic animation curve that starts slowly and ends quickly.
This curve is based on a cubic equation where f(t) = t³
. The result is a safe sweet
spot when choosing a curve for widgets animating off the viewport.
Compared to [Curves.easeInQuad], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.895, 0.03, 0.685, 0.22
easeInQuart: A cubic animation curve that starts slowly and ends quickly.
This curve is based on a quartic equation where f(t) = t⁴
.
Animations using this curve or steeper curves will benefit from a longer duration to avoid motion feeling unnatural.
Compared to [Curves.easeInCubic], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.755, 0.05, 0.855, 0.06
easeInQuint: A cubic animation curve that starts slowly and ends quickly.
This curve is based on a quintic equation where f(t) = t⁵
.
Compared to [Curves.easeInQuart], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.95, 0.05, 0.795, 0.035
easeInExpo: A cubic animation curve that starts slowly and ends quickly.
This curve is based on an exponential equation where f(t) = 2¹⁰⁽ᵗ⁻¹⁾
.
Using this curve can give your animations extra flare, but a longer duration may need to be used to compensate for the steepness of the curve.
Compared to [Curves.easeInQuint], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.6, 0.04, 0.98, 0.335
easeInCirc: A cubic animation curve that starts slowly and ends quickly.
This curve is effectively the bottom-right quarter of a circle.
Like [Curves.easeInExpo], this curve is fairly dramatic and will reduce the clarity of an animation if not given a longer duration.
Derived from Robert Penner’s easing functions.
0.6, -0.28, 0.735, 0.045
easeInBack: A cubic animation curve that starts slowly and ends quickly.
This curve is similar to [Curves.elasticIn] in that it overshoots its bounds before reaching its end. Instead of repeated swinging motions before ascending, though, this curve overshoots once, then continues to ascend.
Derived from Robert Penner’s easing functions.
0.0, 0.0, 0.58, 1.0
easeOut: A cubic animation curve that starts quickly and ends slowly.
0.35, 0.91, 0.33, 0.97
linearToEaseOut: A cubic animation curve that starts linearly and ends slowly.
A symmetric animation to [easeInToLinear].
0.39, 0.575, 0.565, 1.0
easeOutSine: A cubic animation curve that starts quickly and ends slowly.
This is similar to [Curves.easeOut], but with sinusoidal easing for a slightly less abrupt beginning and end. Nonetheless, the result is quite gentle and is hard to distinguish from [Curves.linear] at a glance.
Derived from Robert Penner’s easing functions.
0.25, 0.46, 0.45, 0.94
easeOutQuad: A cubic animation curve that starts quickly and ends slowly.
This is effectively the same as [Curves.decelerate], only simulated using a cubic bezier function.
Compared to [Curves.easeOutSine], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.215, 0.61, 0.355, 1.0
easeOutCubic: A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of [Curves.easeInCubic].
The result is a safe sweet spot when choosing a curve for animating a widget's position entering or already inside the viewport.
Compared to [Curves.easeOutQuad], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.165, 0.84, 0.44, 1.0
easeOutQuart: A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of [Curves.easeInQuart].
Animations using this curve or steeper curves will benefit from a longer duration to avoid motion feeling unnatural.
Compared to [Curves.easeOutCubic], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.23, 1.0, 0.32, 1.0
easeOutQuint: A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of [Curves.easeInQuint].
Compared to [Curves.easeOutQuart], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.19, 1.0, 0.22, 1.0
easeOutExpo: A cubic animation curve that starts quickly and ends slowly.
This curve is a flipped version of [Curves.easeInExpo]. Using this curve can give your animations extra flare, but a longer duration may need to be used to compensate for the steepness of the curve.
Derived from Robert Penner’s easing functions.
0.075, 0.82, 0.165, 1.0
easeOutCirc: A cubic animation curve that starts quickly and ends slowly.
This curve is effectively the top-left quarter of a circle.
Like [Curves.easeOutExpo], this curve is fairly dramatic and will reduce the clarity of an animation if not given a longer duration.
Derived from Robert Penner’s easing functions.
0.175, 0.885, 0.32, 1.275
easeOutBack: A cubic animation curve that starts quickly and ends slowly.
This curve is similar to [Curves.elasticOut] in that it overshoots its bounds before reaching its end. Instead of repeated swinging motions after ascending, though, this curve only overshoots once.
Derived from Robert Penner’s easing functions.
0.42, 0.0, 0.58, 1.0
easeInOut: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
0.445, 0.05, 0.55, 0.95
easeInOutSine: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This is similar to [Curves.easeInOut], but with sinusoidal easing for a slightly less abrupt beginning and end.
Derived from Robert Penner’s easing functions.
0.455, 0.03, 0.515, 0.955
easeInOutQuad: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as [Curves.easeInQuad] as the first half, and [Curves.easeOutQuad] as the second.
Compared to [Curves.easeInOutSine], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.645, 0.045, 0.355, 1.0
easeInOutCubic: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as [Curves.easeInCubic] as the first half, and [Curves.easeOutCubic] as the second.
The result is a safe sweet spot when choosing a curve for a widget whose initial and final positions are both within the viewport.
Compared to [Curves.easeInOutQuad], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.86, 0.0, 0.07, 1.0
easeInOutQuint: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as [Curves.easeInQuint] as the first half, and [Curves.easeOutQuint] as the second.
Compared to [Curves.easeInOutQuart], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
1.0, 0.0, 0.0, 1.0
easeInOutExpo: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
Since this curve is arrived at with an exponential function, the midpoint is exceptionally steep.
Extra consideration should be taken when designing an animation using this.
Compared to [Curves.easeInOutQuint], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.785, 0.135, 0.15, 0.86
easeInOutCirc: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as [Curves.easeInCirc] as the first half, and [Curves.easeOutCirc] as the second.
Like [Curves.easeInOutExpo], this curve is fairly dramatic and will reduce the clarity of an animation if not given a longer duration.
Compared to [Curves.easeInOutExpo], this curve is slightly steeper.
Derived from Robert Penner’s easing functions.
0.68, -0.55, 0.265, 1.55
easeInOutBack: A cubic animation curve that starts slowly, speeds up, and then ends slowly.
This curve can be imagined as [Curves.easeInBack] as the first half, and [Curves.easeOutBack] as the second.
Since two curves are used as a basis for this curve, the resulting animation will overshoot its bounds twice before reaching its end - first by exceeding its lower bound, then exceeding its upper bound and finally descending to its final position.
Derived from Robert Penner’s easing functions.
0.4, 0.0, 0.2, 1.0
SlowInFastOut A curve that starts quickly and eases into its final position.
Over the course of the animation, the object spends more time near its final destination. As a result, the user isn’t left waiting for the animation to finish, and the negative effects of motion are minimized.
standardEasing, the name for this curve in the Material specification.