Just input the progress and get your curve, it's that simple. as well keep in mind that progess is inbetween 0 to 1.
-
Typescript Intellisense
-
Include definations for most of easing curves, So you would not need to check browser for what does this curve do,
- Most of the Curves Taken from flutter Official repo link
A curve where the rate of change starts out quickly and then decelerates; an upside-down f(t) = t²
parabola.
curve_decelerate.mp4
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.
curve_fast_linear_to_slow_ease_in.mp4
curve_ease.mp4
curve_ease_in.mp4
The symmetric animation to [linearToEaseOut].
curve_ease_in_to_linear.mp4
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.
curve_ease_in_sine.mp4
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.
curve_ease_in_quad.mp4
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.
curve_ease_in_cubic.mp4
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.
curve_ease_in_quart.mp4
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.
curve_ease_in_quint.mp4
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.
curve_ease_in_expo.mp4
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.
curve_ease_in_circ.mp4
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.
curve_ease_in_back.mp4
curve_ease_out.mp4
A symmetric animation to [easeInToLinear].
curve_linear_to_ease_out.mp4
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.
curve_ease_out_sine.mp4
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.
curve_ease_out_quad.mp4
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.
curve_ease_out_cubic.mp4
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.
curve_ease_out_quart.mp4
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.
curve_ease_out_quint.mp4
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.
curve_ease_out_expo.mp4
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.
curve_ease_out_circ.mp4
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.
curve_ease_out_back.mp4
curve_ease_in_out.mp4
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.
curve_ease_in_out_sine.mp4
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.
curve_ease_in_out_quad.mp4
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.
curve_ease_in_out_cubic.mp4
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.
curve_ease_in_out_quint.mp4
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.
curve_ease_in_out_expo.mp4
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.
curve_ease_in_out_circ.mp4
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.
curve_ease_in_out_back.mp4
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.
curve_fast_out_slow_in.mp4
standardEasing, the name for this curve in the Material specification.