Building a React Animation Showcase with Lottie and Ant Design

In this tutorial, we'll walk through building an interactive React component that allows users to play and control animations using the LottieFiles library, combined with UI components from Ant Design. By the end, you'll have a dynamic interface where users can toggle between different animations and control playback settings.

[Demo]

We'll cover how to:

1. Set up a Lottie animation player in React.
2. Integrate Ant Design components like Select, Checkbox, and Typography to create a clean and interactive UI.
3. Use a Splitter to separate the animation view from the control panel.

Project Overview

Our project will consist of:

Two different Lottie animations.

• A dropdown menu to switch between animations.
• A checkbox to enable or disable playback controls.
• A responsive layout using a Splitter for the animation player and control panel.

Let's dive into the implementation!

Prerequisites

Ensure you have the following installed on your system:

• Node.js (v14 or above)
• npm or yarn

You'll also need these dependencies:

npm install @lottiefiles/react-lottie-player antd react

Project Structure

We'll organize our files as follows:

src/
├── assets/
│   ├── animation-dots.json
│   └── animation-search.json
├── components/
│   ├── CheckboxChoices.js
│   └── LottieAnimationsSample.js
└── App.js

Step 1: Creating a Reusable Checkbox Component

We'll start by creating a reusable CheckboxChoices component for our control panel.

File: CheckboxChoices.js

import { Checkbox } from "antd";

export const CheckboxChoices = ({ title, value, handleChange }) => {
  return (
    <Checkbox checked={value} onChange={(e) => handleChange(e.target.checked)}>
      {title}
    </Checkbox>
  );
};

Step 2: Setting Up the Lottie Animation Player

Now, let's create a component to display Lottie animations using the @lottiefiles/react-lottie-player library.

File: LottieAnimationsSample.js

import { Controls, Player } from "@lottiefiles/react-lottie-player";
import React from "react";
import { Checkbox, Select, Splitter, Typography } from "antd";
import * as DotAnimation from "../assets/animation-dots.json";
import * as SearchAnimation from "../assets/animation-search.json";
import { CheckboxChoices } from "./CheckboxChoices";

const LottieAnimations = ({ src, isControlsEnabled }) => {
  return (
    <Player
      autoplay
      src={src}
      loop
      style={{ height: "301px", width: "301px" }}
      speed={1}
    >
      <Controls
        visible={isControlsEnabled}
        buttons={["play", "repeat", "frame", "debug"]}
      />
    </Player>
  );
};

function LottieAnimationsSample() {
  const [controls, setControls] = React.useState(false);
  const [mode, setMode] = React.useState("dot");

  const options = [
    { value: "dot", label: "Dot Animation" },
    { value: "search", label: "Search Animation" },
  ];

  const handleChange = (value) => setMode(value);

  const getAnimationSrc = () => {
    switch (mode) {
      case "dot":
        return DotAnimation.default;
      case "search":
        return SearchAnimation.default;
      default:
        return DotAnimation.default;
    }
  };

  const renderInfo = () => (
    <>
      <Typography.Title level={4}>Animation</Typography.Title>
      <Select style={{ width: "200px" }} value={mode} onChange={handleChange}>
        {options.map((option) => (
          <Select.Option key={option.value} value={option.value}>
            {option.label}
          </Select.Option>
        ))}
      </Select>

      <Typography.Title level={4}>Controls</Typography.Title>
      <CheckboxChoices
        title="Controls"
        value={controls}
        handleChange={(checked) => setControls(checked)}
      />
    </>
  );

  return (
    <Splitter
      style={{
        height: "100%",
        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
      }}
    >
      <Splitter.Panel defaultSize="80%" min="20%" max="80%">
        <LottieAnimations
          src={getAnimationSrc()}
          isControlsEnabled={controls}
        />
      </Splitter.Panel>
      <Splitter.Panel>{renderInfo()}</Splitter.Panel>
    </Splitter>
  );
}

export default LottieAnimationsSample;

Step 3: Setting Up the Lottie Animation Player

Now, let's bring it all together in App.js to render our LottieAnimationsSample component.

File: App.js

import React from "react";
import LottieAnimationsSample from "./components/LottieAnimationsSample";
import "antd/dist/reset.css";
import "./App.css";

function App() {
  return (
    <div className="App">
      <LottieAnimationsSample />
    </div>
  );
}

export default App;

Step 4: Styling

You can add some basic CSS to improve the look of your app.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import LottieAnimationsSample from "./LottieAnimationsSample.jsx";
import styled from "@emotion/styled";
import { Typography } from "antd";

const Styled = {
  StickyTitle: styled.div`
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    padding: 8px 0;
    font-size: 24px;
    z-index: 100;
    border-bottom: 1px solid #ddd;
  `,
  Centered: styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  `,
};

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Styled.StickyTitle>
      <Typography.Title level={2}>Lottie Animations</Typography.Title>
    </Styled.StickyTitle>

    <Styled.Centered>
      <LottieAnimationsSample />
    </Styled.Centered>
  </StrictMode>
);

Conclusion

Congratulations! 🎉 You've successfully built an interactive animation player using React, LottieFiles, and Ant Design. This is a great starting point for adding animated elements to your applications, whether for enhancing user experience or simply for visual flair.

Possible Enhancements Add more Lottie animations for users to choose from. Allow users to adjust the playback speed with a slider. Store the user's last selected animation and settings using localStorage. Feel free to experiment further and extend this project to suit your needs!