{"id":9482,"date":"2026-06-03T04:57:39","date_gmt":"2026-06-03T02:57:39","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=9482"},"modified":"2026-06-03T04:57:49","modified_gmt":"2026-06-03T02:57:49","slug":"how-to-add-lottie-animations-to-a-wordpress-website","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/","title":{"rendered":"How to Add Lottie Animations to a WordPress Website"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Lottie animations allow you to add lightweight, scalable animations to your website without relying on large video files or GIFs. Because they are based on vector graphics, Lottie animations remain sharp on all screen sizes and typically load faster than traditional animated formats.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This article explains how to install the LottieFiles plugin and add a Lottie animation to a WordPress page or post.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/#What_Are_Lottie_Animations\" >What Are Lottie Animations?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/#Step_1_Install_the_LottieFiles_Plugin\" >Step 1: Install the LottieFiles Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/#Step_2_Connect_or_Create_a_LottieFiles_Account\" >Step 2: Connect or Create a LottieFiles Account<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/#Step_3_Add_a_Lottie_Animation_to_a_Page_or_Post\" >Step 3: Add a Lottie Animation to a Page or Post<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/#Step_4_Choose_an_Animation\" >Step 4: Choose an Animation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/#What_to_Expect\" >What to Expect<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-lottie-animations-to-a-wordpress-website\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Are_Lottie_Animations\"><\/span>What Are Lottie Animations?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<\/div>\n\n<div id=\"mybox-1243297355\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">Lottie is a JSON-based animation format that enables animations to be displayed directly in web browsers and applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Compared to animated GIFs, Lottie animations generally offer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Smaller file sizes<\/li>\n\n\n\n<li>Better image quality<\/li>\n\n\n\n<li>Smooth scaling on different screen sizes<\/li>\n\n\n\n<li>Faster loading times<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Lottie animations are commonly used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website illustrations<\/li>\n\n\n\n<li>Loading animations<\/li>\n\n\n\n<li>Interactive elements<\/li>\n\n\n\n<li>Marketing and promotional content<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Install_the_LottieFiles_Plugin\"><\/span>Step 1: Install the LottieFiles Plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Log in to the WordPress administration panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the left-hand menu, navigate to:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Plugins \u2192 Add New<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the search field, enter:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>LottieFiles<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Locate the <strong>LottieFiles<\/strong> plugin in the search results and click <strong>Install Now<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After the installation is complete, click <strong>Activate<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Connect_or_Create_a_LottieFiles_Account\"><\/span>Step 2: Connect or Create a LottieFiles Account<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The first time you use the plugin, you may be prompted to sign in to a LottieFiles account or create a new one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Creating a LottieFiles account is free.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After completing the sign-in process, you can return to the WordPress administration panel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Add_a_Lottie_Animation_to_a_Page_or_Post\"><\/span>Step 3: Add a Lottie Animation to a Page or Post<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open an existing page or post, or create a new one using the Gutenberg editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click the <strong>+<\/strong> button to add a new block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the search field, enter:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Lottie<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Lottie block from the results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Choose_an_Animation\"><\/span>Step 4: Choose an Animation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After adding the block, you can either:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Upload your own Lottie animation file<\/li>\n\n\n\n<li>Browse the LottieFiles animation library<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To browse available animations, click <strong>Discover Animations<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A library of featured and popular animations will open. You can also use the search function to find specific animation styles or themes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you find an animation you want to use, hover over it and click <strong>Insert Animation<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The animation will be added directly to your page or post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_to_Expect\"><\/span>What to Expect<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once inserted, the animation can be positioned and configured like any other Gutenberg block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on the plugin version, you may also have access to additional settings such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Autoplay<\/li>\n\n\n\n<li>Looping<\/li>\n\n\n\n<li>Playback speed<\/li>\n\n\n\n<li>Alignment and sizing<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Preview the page before publishing to ensure the animation displays correctly on desktop and mobile devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lottie animations provide a lightweight way to add motion and visual interest to a WordPress website. Using the LottieFiles plugin, you can browse a library of animations or upload your own and add them directly to pages and posts through the Gutenberg editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[125],"manual_kb_tag":[5369,5360,5361,5362,5363,5364,5365,5366,5367,5368],"class_list":["post-9482","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-websites","manual_kb_tag-vector-graphics","manual_kb_tag-lottie-animations","manual_kb_tag-lottiefiles-plugin","manual_kb_tag-add-lottie-to-wordpress","manual_kb_tag-lottie-wordpress","manual_kb_tag-gutenberg-lottie-block","manual_kb_tag-install-lottiefiles-plugin","manual_kb_tag-embed-lottie-animation","manual_kb_tag-upload-lottie-file","manual_kb_tag-lottiefiles-account"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9482\/revisions"}],"predecessor-version":[{"id":9484,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/9482\/revisions\/9484"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=9482"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=9482"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=9482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}