react-native/website/_versioned_docs/version-0.49/easing.md

---
id: version-0.49-easing
original_id: easing
title: easing
---
<a id="content"></a><h1><a class="anchor" name="easing"></a>Easing <a class="hash-link" href="docs/easing.html#easing">#</a></h1><div><div><p>The <code>Easing</code> module implements common easing functions. This module is used
by <a href="docs/animate.html#timing" target="_blank">Animate.timing()</a> to convey physically
believable motion in animations.</p><p>You can find a visualization of some common easing functions at
<a href="http://easings.net/">http://easings.net/</a></p><h3><a class="anchor" name="predefined-animations"></a>Predefined animations <a class="hash-link" href="docs/easing.html#predefined-animations">#</a></h3><p>The <code>Easing</code> module provides several predefined animations through the
following methods:</p><ul><li><a href="docs/easing.html#back" target="_blank"><code>back</code></a> provides a simple animation where the
object goes slightly back before moving forward</li><li><a href="docs/easing.html#bounce" target="_blank"><code>bounce</code></a> provides a bouncing animation</li><li><a href="docs/easing.html#ease" target="_blank"><code>ease</code></a> provides a simple inertial animation</li><li><a href="docs/easing.html#elastic" target="_blank"><code>elastic</code></a> provides a simple spring interaction</li></ul><h3><a class="anchor" name="standard-functions"></a>Standard functions <a class="hash-link" href="docs/easing.html#standard-functions">#</a></h3><p>Three standard easing functions are provided:</p><ul><li><a href="docs/easing.html#linear" target="_blank"><code>linear</code></a></li><li><a href="docs/easing.html#quad" target="_blank"><code>quad</code></a></li><li><a href="docs/easing.html#cubic" target="_blank"><code>cubic</code></a></li></ul><p>The <a href="docs/easing.html#poly" target="_blank"><code>poly</code></a> function can be used to implement
quartic, quintic, and other higher power functions.</p><h3><a class="anchor" name="additional-functions"></a>Additional functions <a class="hash-link" href="docs/easing.html#additional-functions">#</a></h3><p>Additional mathematical functions are provided by the following methods:</p><ul><li><a href="docs/easing.html#bezier" target="_blank"><code>bezier</code></a> provides a cubic bezier curve</li><li><a href="docs/easing.html#circle" target="_blank"><code>circle</code></a> provides a circular function</li><li><a href="docs/easing.html#sin" target="_blank"><code>sin</code></a> provides a sinusoidal function</li><li><a href="docs/easing.html#exp" target="_blank"><code>exp</code></a> provides an exponential function</li></ul><p>The following helpers are used to modify other easing functions.</p><ul><li><a href="docs/easing.html#in" target="_blank"><code>in</code></a> runs an easing function forwards</li><li><a href="docs/easing.html#inout" target="_blank"><code>inOut</code></a> makes any easing function symmetrical</li><li><a href="docs/easing.html#out" target="_blank"><code>out</code></a> runs an easing function backwards</li></ul></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/easing.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="step0"></a><span class="methodType">static </span>step0<span class="methodType">(n)</span> <a class="hash-link" href="docs/easing.html#step0">#</a></h4><div><p>A stepping function, returns 1 for any positive value of <code>n</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="step1"></a><span class="methodType">static </span>step1<span class="methodType">(n)</span> <a class="hash-link" href="docs/easing.html#step1">#</a></h4><div><p>A stepping function, returns 1 if <code>n</code> is greater than or equal to 1.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="linear"></a><span class="methodType">static </span>linear<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#linear">#</a></h4><div><p>A linear function, <code>f(t) = t</code>. Position correlates to elapsed time one to
one.</p><p><a href="http://cubic-bezier.com/#0,0,1,1">http://cubic-bezier.com/#0,0,1,1</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="ease"></a><span class="methodType">static </span>ease<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#ease">#</a></h4><div><p>A simple inertial interaction, similar to an object slowly accelerating to
speed.</p><p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="quad"></a><span class="methodType">static </span>quad<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#quad">#</a></h4><div><p>A quadratic function, <code>f(t) = t * t</code>. Position equals the square of elapsed
time.</p><p><a href="http://easings.net/#easeInQuad">http://easings.net/#easeInQuad</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="cubic"></a><span class="methodType">static </span>cubic<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#cubic">#</a></h4><div><p>A cubic function, <code>f(t) = t * t * t</code>. Position equals the cube of elapsed
time.</p><p><a href="http://easings.net/#easeInCubic">http://easings.net/#easeInCubic</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poly"></a><span class="methodType">static </span>poly<span class="methodType">(n)</span> <a class="hash-link" href="docs/easing.html#poly">#</a></h4><div><p>A power function. Position is equal to the Nth power of elapsed time.</p><p>n = 4: <a href="http://easings.net/#easeInQuart">http://easings.net/#easeInQuart</a>
n = 5: <a href="http://easings.net/#easeInQuint">http://easings.net/#easeInQuint</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sin"></a><span class="methodType">static </span>sin<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#sin">#</a></h4><div><p>A sinusoidal function.</p><p><a href="http://easings.net/#easeInSine">http://easings.net/#easeInSine</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="circle"></a><span class="methodType">static </span>circle<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#circle">#</a></h4><div><p>A circular function.</p><p><a href="http://easings.net/#easeInCirc">http://easings.net/#easeInCirc</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="exp"></a><span class="methodType">static </span>exp<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#exp">#</a></h4><div><p>An exponential function.</p><p><a href="http://easings.net/#easeInExpo">http://easings.net/#easeInExpo</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="elastic"></a><span class="methodType">static </span>elastic<span class="methodType">(bounciness)</span> <a class="hash-link" href="docs/easing.html#elastic">#</a></h4><div><p>A simple elastic interaction, similar to a spring oscillating back and
forth.</p><p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness
doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N
times.</p><p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p><p>Wolfram Plots:</p><ul><li><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (bounciness = 1, default)</li><li><a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="back"></a><span class="methodType">static </span>back<span class="methodType">(s)</span> <a class="hash-link" href="docs/easing.html#back">#</a></h4><div><p>Use with <code>Animated.parallel()</code> to create a simple effect where the object
animates back slightly as the animation starts.</p><p>Wolfram Plot:</p><ul><li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="bounce"></a><span class="methodType">static </span>bounce<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#bounce">#</a></h4><div><p>Provides a simple bouncing effect.</p><p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="bezier"></a><span class="methodType">static </span>bezier<span class="methodType">(x1, y1, x2, y2)</span> <a class="hash-link" href="docs/easing.html#bezier">#</a></h4><div><p>Provides a cubic bezier curve, equivalent to CSS Transitions'
<code>transition-timing-function</code>.</p><p>A useful tool to visualize cubic bezier curves can be found at
<a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="in"></a><span class="methodType">static </span>in<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#in">#</a></h4><div><p>Runs an easing function forwards.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="out"></a><span class="methodType">static </span>out<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#out">#</a></h4><div><p>Runs an easing function backwards.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="inout"></a><span class="methodType">static </span>inOut<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#inout">#</a></h4><div><p>Makes any easing function symmetrical. The easing function will run
forwards for half of the duration, then backwards for the rest of the
duration.</p></div></div></div></span></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/dimensions.html#content">← Prev</a><a class="docs-next" href="docs/geolocation.html#content">Next →</a></div>