---
title: A Brief Introduction to Animations
description: The idea of animation involves a sequence of states, which can be images or attributes like the position of an element on the XYZ axis. These states are called keyframes. In the example below, we have eight keyframes. When applied in sequence, they create an animation.
---

[Avenue Code Snippets](https://blog.avenuecode.com)

# [A Brief Introduction to Animations](https://blog.avenuecode.com/a-brief-introduction-to-animations)

 Written by [Antonio (Tota) Braz](https://blog.avenuecode.com/author/antonio-tota-braz) | 8/28/24 8:24 PM

Hey! I believe you're here to learn about Animated from React Native. In this article, we'll discuss how to use it in a project to improve the usability of a swipe component. Before we get there, I'd like to introduce you to the idea of animations. If you're already familiar with this topic, feel free to jump to the “Animations in React Native” section.

The idea of animation involves a sequence of states, which can be images or attributes like the position of an element on the XYZ axis. These states are called **keyframes**. In the example below, we have eight keyframes. When applied in sequence, they create an animation.

Sometimes, we can see animations without changing the drawing. For example, we might see an element moving along the XYZ axis or changing its opacity. At this moment, we are updating the values of these states, similar to a keyframe.

Animation created frame by frame using the frame rate to update is called frame-based animation. In this type of animation, the frame rate determines the speed of the movement.

Time-based animation involves using the elapsed time since the last frame to calculate the necessary updates for the current frame. Here, the frame rate affects the quality of the movement, but the speed remains similar across different frame rates.

## Animations in React Native

React Native provides two animation systems by default to help create and manipulate animations in projects. You can use the [Animated library](https://reactnative.dev/docs/animated) to handle specific cases and values in a component, or the LayoutAnimation library for global configuration to animate all views in the render/layout cycle. This tutorial will focus on the Animated library.

### The Animated API

The Animated library helps create animations in mobile applications using React Native. It allows easy animation of components and values using ***Animated.Value*** or ***Animated.ValueXY***. Essentially, it works with input and output values, controlled by start and stop methods.

For performance optimization, you shouldn't modify the Animated value directly. Instead, create a reference using the ***useRef*** hook to make a mutable reference object. This lets you update the property and persist values throughout the component lifecycle.

This library exports six component types: View, Text, Image, ScrollView, FlatList, and SectionList, but you can create others using the ***createAnimatedComponent()*** method.

## Initial project

The main goal of this article is to talk about animations using Animated. I won't spend too much time explaining how to create a To-Do List in React Native (you can follow this [repository and check the full project](https://github.com/totabraz/todo-list-with-atomic-design-and-animated-library) or in many videos/tutorials on the web).

So, to make the layout, we will create an input text field, a button to add the task, a flat list, and a component to display the task content and its state which we'll refer to as *the **TaskCard*** component. This component will display the task content, like the layout below:

Each *TaskCard* has a checkbox to check if the task is done, a title, and an identifier number.

In our application without animation, the interaction with the trigger to mark as done will be using the ***onPress*** to trigger the state (clicking on the box to mark the task as done).

## Creating an AnimationSwipe Component using Animated Library

### The base structure of the component

To improve readability and make it easier to use in different situations, let's create a component called ***AnimationSwipe***. We will use this component to wrap the component we would like to animate.

The main behavior of this component is to enable swiping of child components on the screen, sliding them to the left or right. This component will have four initial props:

- ***Children***: the content that is wrapped.
- A handler function called ***handleScrollStatus()*** to manage when the slide should be disabled or not.
- Two functions called ***onSwipeRight()*** and ***onSwipeLeft()*** are to be called after sliding.

We will create a few constants to help with action management:

- ***SCREEN\_WIDTH*** and ***SCREEN\_THRESHOLD***: using the Dimensions from the react-native package, which determine half the screen size and the screen limit.
- ***SWIPE\_OUT\_DURATION***: an integer to determine the duration of the animation.

### Persisting from the component lifecycle

To apply an animation of swipe, we should create two refs: one for the Animated to work with ***ValueXY*** called ***swipeAnim*** to work with 2D animations, and another to handle the gesture called ***panResponder***, which will listen to the touch gestures.

### Animation Control and Handle Functions

We now have the ref objects ***swipeAnim*** and ***panResponder***, but we need a way to interact with these refs. This includes triggering the animation, checking if it should complete the swipe (avoiding missed triggers), and completing the swipe.

To help with these interactions, we will create two functions:

- ***handleResetPosition()***: This function resets the component to its original position using **Animated.spring()**.

- ***handleSwipe(dx: number)***: This function receives a prop called ***dx***, representing the difference on the X axis from the swipe gesture. It checks if the gesture was to the left or right. Accordingly, it calls the respective prop function, ***onSwipeLeft()*** or ***onSwipeRight()***, and then resets the position by calling the ***handleResetPosition()*** function.

### Rendering the component

As it's an Animated component, we should use an ***Animated.View*** instead of a simple View tag. Wrap the children in ***Animated.View*** and spread the ***panResponder.panHandlers*** as props to enable gesture recognition and response.

Note: This style was applied only to create a limited range for the swipes.

## Updating the TaskCard component to improve usability

To enhance user experience and guide them in choosing the final result, add an example behind the animation showing the outcome after a swipe.

Create a component to represent this result, with a ***CheckBox*** on the left side checked as true, and another on the right side checked as false.

It will have an absolute position and will be placed before the task content in *TaskCard*, as shown in the code below:

## Conclusion

Working with animations isn't too complicated and can improve user interaction with our apps. Whether guiding the user or enhancing presentation, animations can make our app feel better.

## References:

[https://blog.sklambert.com/using-time-based-animation-implement/#frame-based-animation](https://blog.sklambert.com/using-time-based-animation-implement/#frame-based-animation)

[https://reactnative.dev/docs/animated](https://reactnative.dev/docs/animated)

## Repository:

[https://github.com/totabraz/todo-list-with-atomic-design-and-animated-library](https://github.com/totabraz/todo-list-with-atomic-design-and-animated-library)

## Licenses:

Image 01 - Animation. 3 May 2024. Image. Available on: [https://www.freepik.com/free-vector/colorful-tropical-parrots-flying-cartoon-illustration-set\_24644198.htm#uuid=95b7af5f-98fb-42c0-9d21-a5b5aea55f5d](https://www.freepik.com/free-vector/colorful-tropical-parrots-flying-cartoon-illustration-set_24644198.htm#uuid=95b7af5f-98fb-42c0-9d21-a5b5aea55f5d).

[View full post](https://blog.avenuecode.com/a-brief-introduction-to-animations)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Antonio (Tota) Braz"
  },
  "dateModified" : "2024-08-28T20:30:43.204Z",
  "datePublished" : "2024-08-28T20:24:34Z",
  "headline" : "A Brief Introduction to Animations",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1138,
    "url" : "https://lh7-rt.googleusercontent.com/docsz/AD_4nXe1pTIkOmSzdQC_1yagPaW_c-TGoicyG9btCRhFoI9nkVntS9vpaPINBUQN1DQ1tMhXd-7_au7ntmAYFau65FIUF7NT0q-C6SPmRugLco4at-TKA0zjWwgfZbkwQxzVlyW2rlUXmo5UzACyrRH7S0fFfEyL?key=Gmmcfc4iiWJUyHgKRdXt6Q",
    "width" : 1480
  },
  "mainEntityOfPage" : "https://blog.avenuecode.com/a-brief-introduction-to-animations",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Avenue Code Snippets"
  }
}
```