{"id":6287,"date":"2024-04-14T19:13:56","date_gmt":"2024-04-14T11:13:56","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6287"},"modified":"2024-04-14T19:13:56","modified_gmt":"2024-04-14T11:13:56","slug":"insert-lottie-motion-graphics","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/insert-lottie-motion-graphics\/","title":{"rendered":"Insert Lottie motion graphics"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">Utilize Lottie animations in your website designs to enhance interaction and captivate users. Then, manage the animation\u2019s playback using Lottie element configurations and engagements.<\/p>\n<p id=\"\">Within this article, you will discover:<\/p>\n<ol id=\"\">\n<li id=\"\">The process of obtaining Lottie JSON and dotLottie animation files<\/li>\n<li id=\"\">Adding animations to your site<\/li>\n<li id=\"\">Modifying animation settings<\/li>\n<li id=\"\">The method to control the animation through interactions<\/li>\n<\/ol>\n<h2 id=\"\">Ways to acquire Lottie JSON and dotLottie animation files<\/h2>\n<p id=\"\">You have the ability to upload Lottie animations to your website in the shape of Lottie JSON or dotLottie files.\u00a0<\/p>\n<p id=\"\">There exist 2 methods to obtain a Lottie JSON file:<\/p>\n<ul id=\"\">\n<li id=\"\">Export an After Effect animation as a JSON file utilizing the <a href=\"https:\/\/aescripts.com\/bodymovin\/\" target=\"_blank\" id=\"\" rel=\"noopener\">free After Effects bodymovin plugin<\/a><\/li>\n<li id=\"\">Retrieve JSON animation files from <a href=\"https:\/\/lottiefiles.com\/designed-for-webflow\" target=\"_blank\" id=\"\" rel=\"noopener\">Lottiefiles.com<\/a> (or another online animation library)<\/li>\n<\/ul>\n<p id=\"\">There are 3 alternatives to acquiring a dotLottie file:<\/p>\n<ul id=\"\">\n<li id=\"\">Transform your existing Lottie JSON file to dotLottie using the <a href=\"https:\/\/dotlottie.io\/resources\/json-to-dotLottie\/\" target=\"_blank\" id=\"\" rel=\"noopener\">JSON to dotLottie conversion tool<\/a><\/li>\n<li id=\"\">Directly export a dotLottie file from After Effects utilizing the <a href=\"https:\/\/lottiefiles.com\/plugins\/after-effects\" target=\"_blank\" id=\"\" rel=\"noopener\">LottieFiles plugin<\/a><\/li>\n<li id=\"\">Download a prebuilt dotLottie file from <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" id=\"\" rel=\"noopener\">LottieFiles.com<\/a>.<\/li>\n<\/ul>\n<h3 id=\"\">Additional references<\/h3>\n<ul id=\"\">\n<li id=\"\"><a href=\"https:\/\/airbnb.io\/lottie\/#\/after-effects\" target=\"_blank\" id=\"\" rel=\"noopener\">Discover how to craft animations for Lottie in After Effects<\/a><\/li>\n<li id=\"\"><a href=\"https:\/\/airbnb.io\/lottie\/#\/supported-features\" target=\"_blank\" id=\"\" rel=\"noopener\">Explore After Effects functionalities supported by Lottie<\/a><\/li>\n<li id=\"\"><a href=\"https:\/\/webflow.com\/blog\/after-effects-and-lottie-meet-webflow\" id=\"\">Learn more about After Effects and Lottie in Webflow<\/a><\/li>\n<\/ul>\n<h2 id=\"\">Incorporating animations into your website<\/h2>\n<p id=\"\">You can utilize Lottie JSON or dotLottie animations as symbols, thumbnails, page backgrounds, page loaders, customized animated cursors, and much more.\u00a0<\/p>\n<p id=\"\">To append Lottie JSON and dotLottie files to the Assets panel:<\/p>\n<ol id=\"\">\n<li id=\"\">Click the \u201c<strong id=\"\">Assets<\/strong>\u201d symbol within the left toolbar<\/li>\n<li id=\"\">Tap the \u201c<strong id=\"\">cloud<\/strong>\u201d upload symbol<\/li>\n<li id=\"\">Choose 1 or numerous files from your computer<\/li>\n<\/ol>\n<p id=\"\">Subsequently, you can integrate the animations into your website. You can either drag and drop them straight from the Assets panel onto the canvas, or you can leverage the <strong id=\"\">Lottie animation<\/strong> component. To employ the Lottie animation component:<\/p>\n<ol id=\"\">\n<li id=\"\">Navigate to <strong id=\"\">Add panel<\/strong> &gt; <strong id=\"\">Media <\/strong>section<\/li>\n<li id=\"\">Drop the <strong id=\"\">Lottie animation<\/strong> component onto the Webflow canvas<\/li>\n<li id=\"\">Press <strong id=\"\">Replace Lottie sequence<\/strong> in the Lottie animation component settings<\/li>\n<li id=\"\">Choose your Lottie JSON or dotLottie file from the <strong id=\"\">Assets panel<\/strong><\/li>\n<\/ol>\n<h2 id=\"\">Modifying animation configurations<\/h2>\n<p id=\"\">The Lottie animation component settings govern the behavior of the animation on the site page. To tweak the settings, select the <strong id=\"\">Lottie animation <\/strong>component and head to <strong id=\"\">Element settings panel<\/strong> &gt;<strong id=\"\"> Lottie animation settings<\/strong>. You can then adjust the animation\u2019s settings for:<\/p>\n<ul id=\"\">\n<li id=\"\">Inbuilt duration \u2014 the duration for which the animation runs<\/li>\n<li id=\"\">Looping \u2014 whether the animation cycles infinitely<\/li>\n<li id=\"\">Reverse playback \u2014 if the animation plays in reverse<\/li>\n<li id=\"\">Render \u2014 SVG or canvas<\/li>\n<\/ul>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94c2c42605b438ffae50a_641ca3b9648ee4b8e6a06170_tmplr-ugxzvnodah5ucisbcol6bsc-l8jb0gcl1h9srn0y5tvy3kc3chmjw3srilqklqvzaypctntjnipfpafndmqv3fxxric6sbpzwxwmjcphzxhpxcaqgywijq8vv4abfr0sza1zed8-izor83x5.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Lottie animation element settings on-canvas menu.\" title=\"64b94c2c42605b438ffae50a_641ca3b9648ee4b8e6a06170_tmplr-ugxzvnodah5ucisbcol6bsc-l8jb0gcl1h9srn0y5tvy3kc3chmjw3srilqklqvzaypctntjnipfpafndmqv3fxxric6sbpzwxwmjcphzxhpxcaqgywijq8vv4abfr0sza1zed8-izor83x5\"><\/div>\n<\/figure>\n<h6 id=\"\"><strong id=\"\">Top tip:<\/strong> As a default, all animations execute upon page load. Hence, individuals visiting the page won&#8217;t witness an animation beneath the fold (the section of the page necessitating scrolling) unless you establish the animation to loop or regulate the animation\u2019s playback with interactions.<\/h6>\n<h2 id=\"\">Regulating animation through interactions<\/h2>\n<p id=\"\">You can manage your Lottie animations through interactions to modify how and when the animations run. Interactions enable you to define triggers to commence the animation, select a specific segment of the animation to play, and determine where to halt the animation playback.\u00a0<\/p>\n<p id=\"\">Two interactions are accessible for Lottie animations:<\/p>\n<ol id=\"\">\n<li id=\"\">The <strong id=\"\">Lottie playback<\/strong> animation<\/li>\n<li id=\"\">The <strong id=\"\">Lottie<\/strong> action\u00a0<\/li>\n<\/ol>\n<p id=\"\">Keep in mind that these interactions are <em id=\"\">solely<\/em> applicable to Lottie animations.<\/p>\n<h6 id=\"\"><strong id=\"\">Note:<\/strong> If you need to modify the duration\/speed of the animation, you can execute this via the <strong id=\"\">Lottie animation settings<\/strong> section within the <strong id=\"\">Elements settings panel<\/strong>. Please be aware that settings in the <strong id=\"\">Lottie animation settings<\/strong> section may be overridden by <strong id=\"\">Lottie playback<\/strong> settings in the <strong id=\"\">Interactions panel<\/strong>.<\/h6>\n<h6 id=\"\"><strong id=\"\">Top tip:<\/strong> By default, all animations play upon page loading. Consequently, visitors won&#8217;t observe an animation beneath the fold (the section necessitating scrolling) unless you configure the animation to loop or control the animation\u2019s playback with interactions.<\/h6>\n<h3 id=\"\">Illustration 1: Initiate an animation on click<\/h3>\n<p id=\"\">Through interactions, you can set an animation to play when a user clicks on it:<\/p>\n<ol id=\"\">\n<li id=\"\">Click on your <strong id=\"\">Lottie animation<\/strong> component on the canvas<\/li>\n<li id=\"\">Access the <strong id=\"\">Interactions panel<\/strong><\/li>\n<li id=\"\">Hit the \u201c<strong id=\"\">plus<\/strong>\u201d icon adjacent to <strong id=\"\">Element trigger<\/strong><\/li>\n<li id=\"\">Choose \u201cMouse click (tap)\u201d<\/li>\n<li id=\"\">Select \u201cSelect an action\u201d alongside <strong id=\"\">Action<\/strong> in the <strong id=\"\">On 1st click<\/strong> section<\/li>\n<li id=\"\">Opt for \u201cLottie playback\u201d within <strong id=\"\">Integrations<\/strong><\/li>\n<\/ol>\n<p id=\"\">You also possess the option to <strong id=\"\">delay<\/strong> the playback, <strong id=\"\">reverse<\/strong> the animation, or set the animation to <strong id=\"\">loop<\/strong>.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><image src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94c2c42605b438ffae506_641ca3b92ed29e52ed41edc0_zlhmabq1t0c8thfbm5ngmrsx4r1sjkakgjux5utzlnli1xu101xm-jpzemgzsllcbyylcsuc_6zg7gnfsouzmhnp7ldjchyb0hxkcsvla3gm57wb_dfzzgujhwx2lfe9ir_j9ny7wkrtrfyhutdcy8.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The \u201cMouse click (tap)\u201d trigger and \u201cOn 1st click\u201d section are visible in the Interactions panel.\" title=\"64b94c2c42605b438ffae506_641ca3b92ed29e52ed41edc0_zlhmabq1t0c8thfbm5ngmrsx4r1sjkakgjux5utzlnli1xu101xm-jpzemgzsllcbyylcsuc_6zg7gnfsouzmhnp7ldjchyb0hxkcsvla3gm57wb_dfzzgujhwx2lfe9ir_j9ny7wkrtrfyhutdcy8\"><\/div>\n<\/figure>\n<h3 id=\"\">Demonstration 2: Initiate an animation upon scrolling in and out of view<\/h3>\n<p>You also have the option to trigger your animation when it enters and exits the viewable area on the screen:<\/p>\n<ol id=\"\">\n<li id=\"\">Choose your <b>animated<\/b> illustration on the design canvas<\/li>\n<li id=\"\">Navigate to the <b>Interactions panel<\/b><\/li>\n<li id=\"\">Tap on the \u201c<b>plus<\/b>\u201d symbol beside <b>Element trigger<\/b><\/li>\n<li id=\"\">Opt for \u201cScroll into view\u201d<\/li>\n<li id=\"\">Select an action next to <strong>Action<\/strong> in the <strong>When scrolled into view<\/strong> category<\/li>\n<li id=\"\">Choose \u201cAnimate\u201d under <strong>Integrations<\/strong><\/li>\n<li id=\"\">Pick an action next to <strong>Action<\/strong> within the <strong>When scrolled out of view<\/strong> section<\/li>\n<li id=\"\">Select \u201cAnimation replay\u201d within <strong>Integrations<\/strong><\/li>\n<li id=\"\">Activate the <strong>Reverse<\/strong> option<\/li>\n<\/ol>\n<p>Customize your animation with an <strong>offset<\/strong> or a <strong>delay<\/strong>.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co \/wp-content\/uploads\/2024\/04\/64b94c2c42605b438ffae50e_641ca3b929ae6b742406625d_aciphha_c0ztqtprhxkvo9q3emewyx1dfnktwbnxy1enp7o9pfwhijzazp_q7is6nnao_xeu2vud3yakpwkir3lg1rqh4ztfvlpjmmcsmgfugdn3sdbu4kirgmzklfs8zzornu9r0p-ut3erw6nquv.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The \u201cScroll into view\u201d trigger, \u201cWhen scrolled into view\u201d section, and \u201cWhen scrolled out of view\u201d section are shown in the Interactions panel.\" title=\"64b94c2c42605b438ffae50e_641ca3b929ae6b742406625d_aciphha_c0ztqtprhxkvo9q3emewyx1dfnktwbnxy1enp7o9pfwhijzazp_q7is6nnao_xeu2vud3yakpwkir3lg1rqh4ztfvlpjmmcsmgfugdn3sdbu4kirgmzklfs8zzornu9r0p-ut3erw6nquv\"><\/div>\n<\/figure>\n<h3 id=\"\">Example 3: Commence a segment of the animation during page load<\/h3>\n<p>Utilize the <b>animated<\/b> action interaction for precise control over the animation&#8217;s behavior. Tailor start and end frames, implement easing functions, and define a specific duration.<\/p>\n<p>For adjusting the start or end frames of your animation:<\/p>\n<ol id=\"\">\n<li id=\"\">Locate your <b>animated<\/b> illustration on the design canvas<\/li>\n<li id=\"\">Open the <b>Interactions panel<\/b><\/li>\n<li id=\"\">Select the \u201c<b>plus<\/b>\u201d icon next to <b>Page trigger<\/b><\/li>\n<li id=\"\">Opt for \u201cPage load\u201d<\/li>\n<li id=\"\">Pick an action adjacent to <b>Action<\/b> in the <b>When page begins loading<\/b> section<\/li>\n<li id=\"\">Choose \u201cInitiate animation\u201d under <b>Custom animation<\/b><\/li>\n<li id=\"\">Tap the \u201c<b>plus<\/b>\u201d symbol next to <b>Timed animations<\/b><\/li>\n<li id=\"\">Assign a title to your animation (e.g., \u201cStarting Animation on Load\u201d)<\/li>\n<li id=\"\">Select the \u201c<b>plus<\/b>\u201d next to <b>Actions<\/b><\/li>\n<li id=\"\">Opt for \u201cAnimation\u201d under <b>Integrations<\/b><\/li>\n<li id=\"\">Adjust the animation frame under the <b>Animation<\/b> section for the desired start frame<\/li>\n<li id=\"\">Mark the option \u201cSet as initial state\u201d under <b>Timing<\/b><\/li>\n<li id=\"\">Tap the \u201c<b>plus<\/b>\u201d next to <b>Actions<\/b><\/li>\n<li id=\"\">Pick \u201cAnimation\u201d under <b>Integrations<\/b><\/li>\n<li id=\"\">Define the animation frame in the <b>Animation<\/b> section to halt at a specific frame (e.g., setting it at 100% for playing until the end frame)<\/li>\n<li id=\"\">Press <b>Save<\/b><\/li>\n<\/ol>\n<p>Adjust the animation&#8217;s duration, delay, or easing effects as needed.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94c2c42605b438ffae512_641ca3ba6da5e423e7a33ef8_mcctmh0c0-zrrtuwgbjuunnsj4_p9_pnuvlatzgxgxqjifgkscn7oznjvc14gbfuwraggkd5oqgwgkhomgjhgnjvimqsjacqmywzongtowh0nelucop_ffcio5n40co5okrkc5wzmffwmo8xmxagag.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Animation timeline displaying the initial and final states of the Lottie animation action.\" title=\"64b94c2c42605b438ffae512_641ca3ba6da5e423e7a33ef8_mcctmh0c0-zrrtuwgbjuunnsj4_p9_pnuvlatzgxgxqjifgkscn7oznjvc14gbfuwraggkd5oqgwgkhomgjhgnjvimqsjacqmywzongtowh0nelucop_ffcio5n40co5okrkc5wzmffwmo8xmxagag\"><\/div><figcaption id=\"\">The Animation timeline displaying the initial and final states of the Lottie animation action. The animation starts at 5% and ends at 100% of its total frames (i.e., the animation begins playing 5% into the total frames and ends at the final frame).<\/figcaption><\/figure>\n<h6 id=\"\"><strong>Quick tip:<\/strong> To use the default duration of the animation, select the <b>animated<\/b> illustration on the design canvas, navigate to <b>Element settings<\/b> &gt; <b>Lottie animation settings<\/b> and enable the \u201cUse built-in duration\u201d option.<br \/><\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add Lottie animations to your site and control their playback using interactions.","protected":false},"author":2,"featured_media":6288,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-6287","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6287"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6287\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6288"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}