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.

Table of contents

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

✨ features

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

⏳ installation

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

1npm install strapi-plugin-lottie
2# or
3yarn add strapi-plugin-lottie

Start your Strapi application with in development mode

1npm run develop
2# or
3yarn develop

🔧 configuration

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

1./config/plugins.ts
2
3export default {
4    // ...
5    "strapi-plugin-lottie": {
6        enabled: true
7    },
8    // ...
9}

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

1./config/middleware.ts
2
3export default [
4  // ...
5  {
6      name: "strapi::security",
7      config: {
8        contentSecurityPolicy: {
9          useDefaults: true,
10          directives: {
11            "connect-src": ["'self'", "https:"],
12            "img-src": [
13              "'self'",
14              "data:",
15              "blob:",
16              "market-assets.strapi.io",
17              "*.lottiefiles.com",
18            ],
19            upgradeInsecureRequests: null,
20          },
21        },
22      }
23  },
24  // ...
25];

👨‍💻 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

1{
2    "bgColor": "#fff",
3    "gifUrl": "https://assets1.lottiefiles.com/render/lhu59gtz.gif",
4    "imageUrl": "https://assets3.lottiefiles.com/render/lhu59gtz.png",
5    "lottieUrl": "https://assets9.lottiefiles.com/dotlotties/dlf10_rrHcSPZWAB.lottie",
6    "name": "Wave Form",
7    "createdBy": {
8      "avatarUrl": "https://lh3.googleusercontent.com/a/AGNmyxburVBP66UgfPD1D-I7l1wIwJmc1vVKOiGHXfrM=s96-c",
9      "firstName": "Juan"
10    }
11  }