{"id":1778,"date":"2021-06-20T11:52:11","date_gmt":"2021-06-20T11:52:11","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1778"},"modified":"2023-02-22T09:35:15","modified_gmt":"2023-02-22T09:35:15","slug":"how-to-use-elementors-lottie-widget-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/","title":{"rendered":"How to Use Elementor&#8217;s Lottie Widget [PRO]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1778\" class=\"elementor elementor-1778\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-101f4cf3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"101f4cf3\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5cefa6d3\" data-id=\"5cefa6d3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-713b0e67 elementor-widget elementor-widget-video\" data-id=\"713b0e67\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=5m8G57735fQ&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-73a602ea elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"73a602ea\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2e8513c9\" data-id=\"2e8513c9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-10c4e5b6 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"10c4e5b6\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2811\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2811\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2812\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2812\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2811\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2811\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2811\" tabindex=\"0\" hidden=\"false\"><p>Learn how to use the Lottie Widget and add beautiful animations to your websites, turning them into a moving, one-of-a-kind experience.<\/p><p>In this tutorial you&#8217;ll learn how to:<br \/>\u2714\ufe0e Add your animation using an external link or upload your own JSON file<br \/>\u2714\ufe0e Set the trigger: Viewport, Scroll, Hover, Click, None<br \/>\u2714\ufe0e Play around with additional options: Renderer, Loop, Hover out, Reverse Animation <br \/>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2812\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2812\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2812\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Aviva from Elementor.<\/p><p>Today, I\u2019ll show you how to add impressive animations to your site, using Elementor\u2019s Lottie Widget.<\/p><p>Here, we have a web page about cycling, with a colorful PNG image of a cyclist on a bike. It has a motion effect applied to it, so that the image appears to be gliding across the page as we scroll. But you know what would be even better? To have the cyclist appear to be pedaling the bike, while he glides across.<\/p><p>Enter Lottie!<\/p><p>Lottie animations are animations rendered from .json files. Small in size, but large in impact, they can be combined with other options for even more possibilities. So there\u2019s no need to shy away from using animation files on your website and risk slowing down your site. (Lottie animation files are virtually weightless) Let\u2019s dive in and see how it works.<\/p><p>I\u2019ll go ahead and right click to delete the image widget, since we\u2019ll be using the Lottie Widget instead. Now, search \u201cLottie\u201d in Widgets, and drag in the Lottie Widget.<\/p><p>We have two options for the source. We\u2019ll be using a Media File for our final animation, but first we\u2019ll go over the External URL option. For this option, we can use a link to an animation online. Let\u2019s visit the Lottiefiles website to search for something that suits our page. The Lottiefiles website has loads of free and paid files we can use on our website.<\/p><p>This cycling file looks like it could work; and, it\u2019s free! Open it, and you can see that there are several options, including a link to the animation, animation speed, and background color chooser. Click the clipboard under Lottie Animation URL to copy the link. Paste it here in the External URL field and the animation is loaded. You have a variety of settings and styling options, which we\u2019ll go over shortly, in the next animation. <br \/>&#8212;&#8212;&#8212;&#8211;<br \/>Switch to Media File for the Source, and click the icon to upload your .json file. Insert it. If it\u2019s the first time you\u2019ve uploaded a json file, you\u2019ll get this warning. Before clicking Enable, please make sure that this file is from a reliable source, as .json files may potentially include malicious content.<\/p><p>Over here, we can align the animation.<\/p><p>With Caption, you can control the text you see below the animation. Choose to link the Title or Caption from the image properties, or add a Custom Caption by entering text or selecting Dynamic tags. You can change the alignment, Text color, and Typography, as well as the spacing.<\/p><p>We don\u2019t need a caption for our animation, so go ahead and delete it.<\/p><p>If you\u2019d like the animation to link elsewhere, such as for a button, you can add a link here, and you will see all the standard link options, such as open in a new window and no follow, as well as dynamic tags.<br \/>&#8212;&#8212;-<br \/>Next click the Settings dropdown to control the animation\u2019s behavior. First select the Trigger, which as it sounds, determines what action will set off the animation. By default, it\u2019s set to Viewport, so it will begin as soon as the animation comes into view. We\u2019ll go through the other triggers shortly, but first we&#8217;ll review the settings under Viewport, as most of them apply to other Triggers as well.<\/p><p>The Viewport setting, which is available for the Viewport and Scroll triggers, determines when to begin the movement, based on viewport height, meaning, the visible size of the device screen.<\/p><p>Loop will set the animation to continuous, and when selected, you can choose how many times you\u2019d like the animation to play. Leave it empty for an infinite loop. As it sounds, Play Speed sets the speed of the animation.<\/p><p>Reverse animation will change it to the opposite direction.<\/p><p>With start point and end point, you can change where in the loop the animation begins and ends, so you can choose to only play a piece of the animation from and to whichever point works for your design.<\/p><p>Depending on your needs, here you can choose the Renderer type, SVG or Canvas<\/p><p>To improve your page loading time, set the Lazyload switch to YES, and the animation will load only when visible to the user. <br \/>&#8212;&#8212;<br \/>Now go back to the Trigger options and select On Click to play the animation when clicked. If you added a link to the animation, you can set how long the animation should play before the link is opened, here, in Link Timeout.<\/p><p>The next Trigger is On Hover and as it suggests, the animation will play when hovered over. And here, on Hover out, we can select to Reverse or Pause, when we move the cursor off the animation and whether the animation begins when hovering over the animation, column, or the whole section.<\/p><p>The Scroll Trigger starts animation upon scrolling. And you can choose whether the effects should be relative to the viewport or the entire page.<\/p><p>Lastly we have the None Trigger. The animation will begin playing as soon as the page loads. <br \/>&#8212;&#8212;&#8212;&#8212;&#8212;<br \/>Moving on to Style, where you can set the animation width and max width, as well as its Normal and Hover Styles.<\/p><p>Drag the opacity to make the animation semi-transparent and play with the CSS filters to change the blur, brightness, contrast, saturation, and hue. Leave the filters off for the hover state so when you mouse over, it will really pop. Set the transition duration to gradually reach the hover state. Cool!<\/p><p>You can select any of these settings for the hover state as well.<\/p><p>The Lottie animation settings are complete, and our cyclist is moving those wheels, but he\u2019s not actually getting anywhere. Let\u2019s add a motion effect so he can get across the terrain.<\/p><p>Click the Motion Effects dropdown and switch Scrolling Effects ON. Click Horizontal scroll and select To Left. Set the speed to 7.<\/p><p>Now let&#8217;s update and preview. Look at him go!<\/p><p>There are multiple ways you can apply the Lottie widget to make your design stand out, such as this button in the header, for example. It may look like a regular button, but in fact, it\u2019s a Lottie animation.<\/p><p>And that\u2019s it. Now you know how to use Elementor\u2019s Lottie widget and add eyecatching animations to your site to really make them stand out. These are just a few examples of endless animation possibilities. So drag that Lottie widget in and get creative. We can\u2019t wait to see what you come up with.<\/p><p>Thanks for watching. For more tutorials subscribe to our Youtube channel.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Learn how to use the Lottie Widget and add beautiful animations to your websites, turning them into a moving, one-of-a-kind experience. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Add your animation using an external link or upload your own JSON file \u2714\ufe0e Set the trigger: Viewport, Scroll, Hover, Click, None \u2714\ufe0e [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4208,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[41],"class_list":["post-1778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-motion-effects","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Elementor&#039;s Lottie Widget [PRO] - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Elementor&#039;s Lottie Widget [PRO] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Learn how to use the Lottie Widget and add beautiful animations to your websites, turning them into a moving, one-of-a-kind experience. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Add your animation using an external link or upload your own JSON file \u2714\ufe0e Set the trigger: Viewport, Scroll, Hover, Click, None \u2714\ufe0e [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T11:52:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:35:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1923\" \/>\n\t<meta property=\"og:image:height\" content=\"1081\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Elementor's Lottie Widget [PRO] - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Elementor's Lottie Widget [PRO] - Academy","og_description":"Overview Transcript Overview Learn how to use the Lottie Widget and add beautiful animations to your websites, turning them into a moving, one-of-a-kind experience. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Add your animation using an external link or upload your own JSON file \u2714\ufe0e Set the trigger: Viewport, Scroll, Hover, Click, None \u2714\ufe0e [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/","og_site_name":"Academy","article_published_time":"2021-06-20T11:52:11+00:00","article_modified_time":"2023-02-22T09:35:15+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Elementor&#8217;s Lottie Widget [PRO]","datePublished":"2021-06-20T11:52:11+00:00","dateModified":"2023-02-22T09:35:15+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/"},"wordCount":1213,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Motion Effects"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/","name":"How to Use Elementor's Lottie Widget [PRO] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-1.jpg","datePublished":"2021-06-20T11:52:11+00:00","dateModified":"2023-02-22T09:35:15+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-1.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-lottie-widget-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Motion Effects","item":"https:\/\/elementor.com\/academy\/motion-effects\/"},{"@type":"ListItem","position":4,"name":"How to Use Elementor&#8217;s Lottie Widget [PRO]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1778"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1778\/revisions"}],"predecessor-version":[{"id":9567,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1778\/revisions\/9567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4208"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}