Front-end complex cool animation, ah, I don’t use CSS to write, ah, use Lottie to play

I heard Lottie last year today, it is very simple to use for the front-end, json file guide and then set a bit, you want to show where I show cool.

Today to start a chestnut 🌰

The animation principles

Animation is produced by combining still images of each frame (instant) and playing them at a certain frequency (rate).

How to implement

That will test the designer.

Animation with After Effects (Adobe After Effects), combined with bodyMovin plug-in to export the animation JSON file, many online export case column, here no longer expand. Then load the Lottie library and the following lines of code to implement a Lottie animation.

import React from "react";
import Lottie from "lottie-react-web";
import animation from "./demo.json"; // Import the corresponding JSON file
import "./index.less";

export default function BodyLottie() {
  return (
    <div id="demo" className="demo">// Define the animation CSS style<Lottie
        options={{
          animationData: animation,
        }}
      />
    </div>
  );
}

Copy the code

The animation looks like this

And something like this

Or is it