Strapi-plugin-lottie NPM

LottieFiles plugin for Strapi

A plugin for Strapi CMS, that allows creating a custom input field for adding lottie animations seamlessly via LottieFiles public animation repository.

✨ Features
⏳ Installation
🔧 Configuration
👨‍💻 Usage
🕸️ API

✨ `features`

Custom field creation in Strapi models
Browse LottieFiles public animation repository based on:
Keyword based search
Animation metadata, with creator info

⏳ `installation`

At the root of your Strapi project, run the following commands to add the plugin

npm install strapi-plugin-lottie
# or
yarn add strapi-plugin-lottie

Start your Strapi application with in development mode

npm run develop
# or
yarn develop

🔧 `configuration`

To start using the plugin, enable the plugin in strapi configuration.

./config/plugins.ts

export default {
    // ...
    "strapi-plugin-lottie": {
        enabled: true
    },
    // ...
}

Also, configure the strapi::security middleware by adding the directives below to allow the plugin to load required assets.

./config/middleware.ts

export default [
  // ...
  {
      name: "strapi::security",
      config: {
        contentSecurityPolicy: {
          useDefaults: true,
          directives: {
            "connect-src": ["'self'", "https:"],
            "img-src": [
              "'self'",
              "data:",
              "blob:",
              "market-assets.strapi.io",
              "*.lottiefiles.com",
            ],
            upgradeInsecureRequests: null,
          },
        },
      }
  },
  // ...
];

👨‍💻 `usage`

Goto Content-Type Builder and create a new collection type. In the field selection dialogue, navigate to custom tab. Select Lottie field
Give the new field a name and confirm. The new field should be visible in the collection's field list, with type: Custom field
Goto Content Manager, select the collection type that was created. Click the Create new entry
Click the Lottie Field, to open the animation browser modal.
Once selected, the animation preview can be seen in the Lottie field as well as collection list view after saving the entry

🕸️ `api`

Lottie field data can be consumed via both REST and GraphQL APIs provided by Strapi CMS.

In both apis, the returned field data has the following structure

{
    "bgColor": "#fff",
    "gifUrl": "https://assets1.lottiefiles.com/render/lhu59gtz.gif",
    "imageUrl": "https://assets3.lottiefiles.com/render/lhu59gtz.png",
    "lottieUrl": "https://assets9.lottiefiles.com/dotlotties/dlf10_rrHcSPZWAB.lottie",
    "name": "Wave Form",
    "createdBy": {
      "avatarUrl": "https://lh3.googleusercontent.com/a/AGNmyxburVBP66UgfPD1D-I7l1wIwJmc1vVKOiGHXfrM=s96-c",
      "firstName": "Juan"
    }
  }