# Create a Loader with Infinite Movement using Framer Motion

**Difficulty**: ⭐️ (1/5 stars)

**Setup/Prerequisites**: React.js, TailwindCSS, Framer Motion

**Key Concepts**: Using infinite animation in Framer Motion

## The Challenge

Day 2 is a simple loader which shows infinite animation by bouncing. This animation is quite simple but shows how Framer Motion handles infinite movements which is commonly used on loaders.

## Key Animation Features

* *Infinity movement*
    
* Easing function for a more natural movement
    

## Code Breakdown

### 1\. Implementation Details

The ball is added first before going on to implement the infinite state and adding animations.

The animation happens in three main steps:

1. Wrap the ball image component with a `motion.div` element instead of directly applying motion to the image element to separate it’s styling.
    
2. Identify the states. There is only one state here - which is the infinite movement. The `loaderVariants` object is where this state is defined.
    
3. Specifying the transition type: The ininite movement and how it happens is defined in the transition property. Here, on the y-axis, I’m using the `repeatType` and `repeat` to create the infinite movement and the `duration` to define how fast this movement would be.
    
    ```plaintext
      y: {
            repeatType: "mirror",
            repeat: Infinity,
            duration: 0.5,
         }
    ```
    

### 2\. Adding the Image

```tsx
import { easeOut, motion } from "framer-motion";
import logoo from "../assets/image.png";
import grass from "../assets/grass.png";

const InfiniteLoader = () => {
  return (
    <div className="h-screen w-screen flex flex-col items-center justify-center afcad-flux">
      <motion.div>
        <img src={logoo} className="w-16 h-16" />
      </motion.div>
      <div>
        <img src={grass} className="h-24 " />
      </div>
    </div>
  );
};

export default InfiniteLoader;
```

### 3\. Defining the Animations Using Code

In the `loaderVariants` object, the infinite state which has been previously identified is defined.

💡Remember to use gentle transitions

```tsx
  const loaderVariants = {
    infiniteState: {
      y: [50, -50],
      transition: {
        y: {
          repeatType: "mirror",
          repeat: Infinity,
          duration: 0.7,
          easing: easeOut,
        },
      },
    },
  };
```

## Live Demo

<iframe src="https://s7fn6d-5173.csb.app/infinite-spinner-01" style="width:100%;height:400px;border:0;border-radius:4px;overflow:hidden;background:#fff" sandbox="allow-presentation allow-same-origin allow-scripts"></iframe>

## Resources Used

* [Youtube tutorial by Framer Motion](https://www.youtube.com/watch?v=uxjMjXNZV_4)
    

## Ideas for Enhancement ✨

What animation ideas do you suggest I add to this? I’m thinking of these:

* Adding sound effects
    
* Testing out other kinds of images, shapes and movement