Infinite Loader Animation with 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:

Wrap the ball image component with a motion.div element instead of directly applying motion to the image element to separate it’s styling.
Identify the states. There is only one state here - which is the infinite movement. The loaderVariants object is where this state is defined.
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.
```
   y: {
         repeatType: "mirror",
         repeat: Infinity,
         duration: 0.5,
      }
```

2. Adding the Image

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

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

Live Demo

Resources Used

Youtube tutorial by Framer Motion

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

Create a Loader with Infinite Movement using Framer Motion

Comments

More from this blog

The Question I Ask Before Building Anything

3 UX mistakes that might be costing you users

Beyond Alt Texts: How AI can Help Solve the "Cognitive Gap" in Modern UX

That’s AI? Intelligence in Everyday Interfaces

Should We Really Build Carousels Without JS?

The Challenge

Key Animation Features

Code Breakdown

1. Implementation Details

2. Adding the Image

3. Defining the Animations Using Code

Live Demo

Resources Used

Ideas for Enhancement ✨

Command Palette

Comments

More from this blog

The Challenge

Key Animation Features

Code Breakdown

1. Implementation Details

2. Adding the Image

3. Defining the Animations Using Code

Live Demo

Resources Used

Ideas for Enhancement ✨