# Animations in Vue Native
**Animations** are the heart of every modern mobile application. Not only they are important for the user's attention, they also play a major role in making the user experience better and memorable. In this tutorial, we'll share some examples of amazing animations done with the [Vue Native](http://vue-native.io/) framework. So, let's get started.
### LOADER ANIMATION
For accomplishing any kind of animation, designing start and end frames are important. Let's check out the start and the end frames of the animation below.
**How it's done:**
- Let's start by creating the diamond-shaped box according to the start frame. For this, we can create a container `view` and rotate it by **45** degrees. Styling can be achieved in Vue Native using the `style` prop and defining classes in the `
```
After designing the start and end frames, we can be sure that the **margin** property will be required to achieve this animation. But how can we animate this in Vue Native? 🤔
In Vue Native, we use the [Animated](https://reactnative.dev/docs/animated) API of React Native with [$options](https://vuejs.org/v2/api/#vm-options) property of Vue Native to achieve animations. Animated provides us with a set of functions that help us configure our animations according to our needs. Let's check how to use it.
- Using **Animated.Value**: `Animated.Value(initialValue)` is used as a constructor to initialize a new variable to use Animated API. Firstly we'll initialize the Value property of Animated API so that we could hook the `animated.Value` to any style property. We can add the `animated:` prefix before the Vue Native template tags to hook the animated property as below:
```
```
- Using **Animated.timing()**: To achieve time-based animation, we use the timing function of the Animated API. Let's check out its syntax:
`Animated.timing(initialAnimatedValue,config)`
The config object contains options like `toValue` and `duration` for the final value and duration of the animation. So, if we want to animate for a duration of 1 second, we can use:
```
Animated.timing(this.$options.animateOpacity,{
toValue:1,
duration:1000,
useNativeDriver:false
}).start()
```
- **Using interpolate()**: The interpolation allows us to map input ranges of animated value to desired output values. Let's check out the syntax below:
`Animated.Value.interpolate({inputRange,outputRange})`
1. **inputRange**: an array of animated values in increasing order.
2. **outputRange**: an array of the desired output animated values that will be mapped according to `inputRange`.
For example, we have a scenario where we want to increase the size of the animated view along with fading-in the view. We can just use the interpolate method to hook to animated opacity value (the `inputRange`) with output width/height value as below:
```
```
The above code declares `outputRange` of [0,100] for **width/height**. So, the width/height will go from [0,100] for opacity value of 0 to 1. The above code will generate output like this:
Now, since we know the required concepts 😎, let's apply the above methods to complete the loader animation as below.
```
```
- In the above `
```
To mimic a progress loader for any task, we've added `progressValue` as a [watch](https://012.vuejs.org/api/options.html#watch) property in the above code. This will make sure whenever `progressValue` increases, the width is animated accordingly.
Now, let us add a function to manipulate the `progressValue` from 0 to 100 as shown above in the `startAnimation()` function. As soon as `progressValue` changes, we animate the current value of animated width to the new progress value.
Lastly, we can hook the `loaderWidth` to the `` we created in the `` as:
```
```
Just check out this [link](https://github.com/anmoljain10/VueNativeAnimations/blob/master/src/ProgressLoader.vue) for complete implementation. Now, let's jump to our last example.
### HEADER-SCROLL ANIMATION
In this example, we will animate components like image, view, etc on the user's scroll event. First, let's look at the start and the end frames of animation.
Looking at the start and the end frames, we can say that the below properties should be animated to complete this header scroll transition:
- Height ( header, image )
- Width ( image )
- border Radius ( image )
- Position ( image )
Let's check out the steps to do it:
- Since the values for the above properties will be decided by the current scroll value at the instance, we should save the scroll values somewhere, let us add a variable called **scrollY** to `$options`.
- For image size (height and width), let's add a variable called **animatedSize** and we can use the interpolate function to map the output height and width values according to the input scroll range.
- Similarly, we can do it for image position and header height. The code till now will look like below.
```
```
- Now, we can add the template and assign the above interpolation values to it.
- The [Animated.event](https://reactnative.dev/docs/animated#event) function will give us the animated values for the y-position of `animated:scroll-view`. Let's check out the full code example below.
```
Incredible India!
...content
```
The animation turned out as below:
In the above examples, we learned how to accomplish different kinds of animations in Vue Native. Now let us look at the best practices that can be followed for handling them.
### BEST PRACTICES/FACTS
As we saw above, animations in Vue Native are really easy to accomplish. Few points we should keep in mind while doing animations.
- The reason behind mostly using `$options` for animations is the stateful nature of **Animated** API. Since Animated API contains a state of itself to manage the animations, declaring it as a `data` or `computed` property (which are used to store reactive data and its derived state) leads to unnecessary re-renders of the view which can cause performance drops and sometimes even challenging to debug for any issues. So, always try to use `$options`.
- If we are animating non-layout properties like opacity, etc, always add the **useNativeDriver** option so that animation happens at the native layer.
- At last, clear all the timeouts and intervals if used for any animation purposes before the component unmounts to avoid memory leaks in your app.🙂
Keeping in mind the above points, you’ll be able to create awesome animations in Vue Native.
Check out this repo for the complete implementation of the above examples.
[https://github.com/anmoljain10/VueNativeAnimations
](https://github.com/anmoljain10/VueNativeAnimations)
Thank You for reading!