7/16/2023 0 Comments Lottie json editor![]() The customized animation has been imported. Then, upload the JSON file from your computer. But instead of an external URL, you’ll import the file from a media file. To import a customized Lottie animation, you’ll again use the Premium Lottie Animations widget just like before. When you’re done, click the Download button under “Export as lottie JSON”, and save the file on your computer. And re-color any other layers you want as well Changing the color of an element in the Lottie Editor. Do the same for all other colors in the layer. Select a color you want to change, and set a new one. On the right, we can see the various colors in that layer. Select the one whose color you want to change. On the left, you can see the various elements of the animation. The Lottie Editor lets you customize the colors of most animations. Just click on the “Edit layer colors” button in the pop-up before copying the file URL. If you like an animation but it doesn’t match your website’s theme, you can customize its color properties in the Lottie Editor. Customizing an Animation in Lottie Editor Style options for the Lottie widget.įinally, the Advanced section lets us add further customizations for margins, motion effects, borders, responsiveness, and more. You can also alter its opacity and add a border to the animation by defining its border radius and padding. In the Style section, you can change the background color of the animation to blend it on your website. You can resize it, rotate it, align it on the page, and even add a clickable link to it. You can customize the widget’s properties too. Finally, the Scroll option lets you match the animation to the user’s scrolling. With the hover option, the animation will only work when the user’s mouse pointer hovers over it. With the viewport option, the animation will only run when it comes on screen. You can choose the viewport, hover, or scroll as triggers. Also, you can customize its behavior on the page by creating a trigger for it to start playing. You can customize the animation itself by making it loop, play it in reverse, or changing its animation speed using the options in the Content tab in the sidebar. This animation will instantly become available on your page and you can customize it just like any other Elementor widget. ![]() Paste the copied URL in the “Animation JSON URL” field below the File Source option. Then, head back to your Elementor editing page. If you like it, copy its Lottie Animation URL provided below. Here, you can view the complete animation using a slider. Selecting an animation will bring it into a pop-up. Choosing an animation on the Lottie website. Here, you can either choose from the list of featured animations or you can use the search bar to look for something specific. After signing up, click “Animations” in the menu. Click “Get started for free” and sign up using any of the options. Now, head over to the LottieFiles website to download the animation. We can either import animations through a URL, or we can upload the animation file from our computer. The file source option lets us add animation files to the page. You can check out our Elementor tutorial to learn more about using the Elementor page builder. Then, drag and drop the widget wherever you want just like you would any other Elementor widget. To add this widget, search “Lottie” in the widget area. Needless to say, you’ll need the free Elementor page builder plugin from the WordPress repository before you proceed. Īfter installing and activating the plugin, a new widget will be added to your Elementor editing mode. However, if you’re looking for a free alternative, the Premium Addons for Elementor plugin is the next best option. The easiest way to add Lottie animations to Elementor is by using the Lottie widget in Elementor Pro. Installing the Premium Addons for Elementor Plugin ![]() Customizing an Animation in Lottie Editor.Installing the Premium Addons for Elementor Plugin.
0 Comments
Leave a Reply. |