TutorialsCourses
Course Menu
Master React Native Animations

Easing

Easing specifies the rate of change of a parameter over time. Different objects in real life do not travel at a constant speed. In the programming world that just means that over a set period of time the value given to a function will return a different value based upon the formula it's plugged into.

This is why easing is used with Animated.timing. We have a start value, a toValue and a duration of time.

To get access to Easing grab it off of react-native import like import { Easing } from "react-native". All of the available easings can be found here https://facebook.github.io/react-native/docs/easing.html in the documentation.

Bounce

Easing.bounce is one of the few that just takes a specific time. So you can simply pass that as the easing property on an Animated.timing call.

Animated.timing(this._animation, {
  toValue: 1,
  duration: 500,
  easing: Easing.bounce,
}).start();

You can see the demo of what that pattern would look like by visiting http://easings.net/#easeInBounce

The Others

All of the easing functions have their place, and we will touch on when to use an easing and how it will effect your animations when doing the animations. The React Native documentation on Easing actually does a great job of outlining what is available, and previewing it on the web.

Live Demo