Strapi plugin logo for LottieFiles

LottieFiles

Allows creating a custom input field for adding lottie animations seamlessly via LottieFiles public animation repository.

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

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

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

Start your Strapi application with in development mode

1
2
3
npm run develop
# or
yarn develop

🔧 configuration

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

1
2
3
4
5
6
7
8
9
./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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
./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

1
2
3
4
5
6
7
8
9
10
11
{
    "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"
    }
  }

Install now

npm install strapi-plugin-lottie

STATS

4 GitHub stars26 weekly downloads

Last updated

305 days ago

Strapi Version

4.4.0 and above

Author

github profile image for Mushfau Saeed
Mushfau Saeed

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.