--- title: "Lottie Files in Drupal: 3 Steps" date: "2023-06-09T15:19:16+00:00" summary: image: type: "article" url: "/acquia-cloud-platform/help/90981-lottie-files-drupal-3-steps" id: "bc8aeaf9-4816-4866-9764-c4db9a90fde5" --- Table of contents will be added Goal ---- The goal of this tutorial is to show you the easy way to create a new Media Entity to allow Content Editors to add and use Lottie files on your Drupal website. Prerequisites ------------- * A Drupal 9 or Drupal 10 Website * Access to Add/Configure Drupal Modules * A sample Lottie File to be used for testing purposes Overview -------- Lottie files are an easy and lightweight way to add animations to your Drupal website as a alternative to animated GIFs or short looping video files. By using the Media Entity Lottie module we can quickly create a new Media Entity and make that available to our content editors in WYSIWYG's or create Media Entity fields to easily attach them to content. Using this tutorial we will step you through installing the Media Entity Lottie module and inserting your first Lottie animation file. For more information about Lottie files read our latest blog post [introducing Lottie files](/blog/introducing-lottie-files-animation-revolution-web-design). 1. Add & Enable the Media Entity Lottie Module ------------------------------------------- If you have access to your Drupal sites codebase you can install the Media Entity Lottie module with Composer composer require 'drupal/media_entity_lottie:^2.0' If you want to install this module from within Drupal you can download the [zip/tar file from Drupal.org](https://www.drupal.org/project/media_entity_lottie) and install it by going to Extend > Install New Module in the Admin Toolbar. After adding the module you need to enable it so you can use it If you have access to Drush you can enable it by doing drush en media_entity_lottie For more detailed information on managing and installing Drupal modules on your Drupal website head over to the [Acquia Docs](https://docs.acquia.com/resource/module-install-d9) that will give you great [step by step instructions](https://docs.acquia.com/resource/module-install-d9/#enabling-a-module-in-your-codebase). 2. Create Lottie File Media Entity ------------------------------- After install the Media Entity Lottie module you need to create a new Media Entity type, similar to ones you likely already have created such as Images and Videos. Content Editors will then be able to add and manage Lottie files similar to how they are managing other media entities today. **Create a new Media Entity** Go to Structure > Media Types > Add media type and fill in the information for your new Media Entity ![Interface for adding a media type in a CMS, featuring fields for name, description, and media source configuration.](https://acquia.widen.net/content/uusfgq1fdw/web/url_465934df6f2a74051663c2e0d0304e16.webp?v=9c9bc78b-172c-4dc7-a62d-ef68f27c08bb) **Configure Media Entity Field on your new Lottie Animation type** The Media Entity Lottie module provides some additional field configuration that allow you to set some defaults for how the Lottie file is displayed on the front-end of your Drupal site. Items such as Autoplay, Looping, Background Color, etc. Connect with your Designer and Content Editors on what some of these defaults you might want to configure. ![Settings menu for a Lottie player with options for autoplay, loop, background, mode, speed, count, and width adjustments.](https://acquia.widen.net/content/9lksz1elig/web/url_6ae6ff121ad24c7151e3e528c0ba3879.png?v=634b0a6c-b756-4a93-808f-97677325a78c) 3. Configure WYSIWYG Text Formats ------------------------------ Before you can unleash the power of Lottie Animations to your content editors you need to enable them to use it by adding the "Lottie Animation" media entity to the Embed Media filter on your Text Format **Go to Configuration > Content authoring > Text Formats and editors** ![Dropdown menu under "Configuration" in a software interface, highlighting "Content authoring" and "Text formats and editors" options.](https://acquia.widen.net/content/l5ajtcchsy/web/url_c3c789a05284301252daf20ed83dbaa8.png?v=f636af67-cf63-4d86-ac3f-05c5580e92eb) **Select the Text Format that you want to add Lottie Animations to** If you have configured Media for this text format before then you should have an Embed Media filter, within that option enable your Lottie Animation media entity. ![Configure Embed Media to allow Lottie Animations](https://acquia.widen.net/content/xvy8aemzqg/web/url_9243d7369ce9f4ce2b2da21daf9b5789.png?v=bd9c4ca8-f6d4-4261-a359-40193235c8e8) **Save all changes and then edit a piece of content that has a WYSIWYG to insert a Lottie Animation** 4. Insert Lottie Animations in your Content ---------------------------------------- Navigate to the piece of content where you would like to insert your new Lottie Animation and click the insert media button in the WYSIWYG ![Toolbar with text formatting options and icons for inserting media, adjusting styles, and accessing the source code in a content editor.](https://acquia.widen.net/content/oxodkmnukb/web/url_d33daa3666bdc1670982ce7ad3ae4a52.png?v=140e4106-08ec-4ee1-bb72-7b2cf1732d42) You will then be presented with the Media Browser, you should then see a tab for Lottie Animation, it will allow you to upload the Lottie JSON file and add it to the Media Library for future use. ![Interface for uploading a Lottie file, with options for tags, language, and sorting. A thumbnail shows a digital design layout.](https://acquia.widen.net/content/9ljjzwfric/web/url_b029c064f729d143202c3cfffd9e4276.png?v=668e0557-480b-4518-aa2e-dc1360a5dd7d) Unfortunately the Lottie Animation does not run or render in the WYSIWYG Editor but it will work correctly when you save the content, showing you the playing animation file. 5. Additional Options / Configurations ----------------------------------- This tutorial just scratches the surface of what is possible with Lottie files and Drupal, but since it leverages the already amazing Media system built into Drupal 9/10 we are able to leverage these animations similar to how Images and Videos are managed today. By using Lottie files you're able to add quick, clean, vector animations to your website without slowing down your site with heavy GIFs or large video assets. Lottie Animations are currently being used on Acquia.com to provide additional context and presentation flexibility to our content. For more information about Lottie files be sure to checkout our introductory [blog post](/blog/introducing-lottie-files-animation-revolution-web-design)!