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.

      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