{"id":1760,"date":"2021-06-20T11:32:10","date_gmt":"2021-06-20T11:32:10","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1760"},"modified":"2023-02-22T09:36:25","modified_gmt":"2023-02-22T09:36:25","slug":"how-to-create-a-lottie-widget-scroll-button","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/","title":{"rendered":"How to Create a Lottie Widget Scroll Button"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1760\" class=\"elementor elementor-1760\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-417ba80c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"417ba80c\" 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-46e24fe6\" data-id=\"46e24fe6\" 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-5730166e elementor-widget elementor-widget-video\" data-id=\"5730166e\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=0lHImTXKS3k&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-53739867 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53739867\" 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-4c381426\" data-id=\"4c381426\" 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-66432205 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"66432205\" 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-1711\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1711\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1712\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1712\" 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-1711\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1711\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1711\" tabindex=\"0\" hidden=\"false\"><p>Learn how to create a scroll button with the Lottie Widget. Use animation to draw attention to your page and encourage interaction with your website.<\/p><p>In this tutorial you\u2019ll learn how to: <br \/>\u2714\ufe0e Add Lottie Animations via external URLs <br \/>\u2714\ufe0e Link a Lottie animation to another section and automatically scroll to it, when clicked<br \/>\u2714\ufe0e Use CSS Filters to further customize Lottie Animations<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-1712\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1712\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1712\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there. It\u2019s Aviva from Elementor.<\/p><p>In this tutorial, I&#8217;ll show you how to add lottie animations to your hero section.<\/p><p>Here on this Photography website, we have a downward pointing arrow icon in the hero section, which directs our visitors to click, and automatically scroll down the page to see more.<\/p><p>The arrow is a nice touch, but there\u2019s nothing like animations to really grab your visitors\u2019 attention and encourage them to interact with your website.<\/p><p>Ok, let\u2019s get started, and open the page in Elementor.<\/p><p>Before we -get to work on\/set up- our Lottie animation, we\u2019ll need to define the section we\u2019ll be linking to, so that when we click the animation, it will know where to take us.<\/p><p>Scroll down to the second section, and in Advanced, give it a CSS ID. Let\u2019s name it food. This will indicate where the page should scroll, after clicking the animation.<\/p><p>Scroll back to the top, and, in Widgets, search for Lottie, and drag it in under the other elements.<\/p><p>In Source, we can choose to use either a JSON media file or an External URL. The Lottiefiles website has lots of good options, so we\u2019ll select External URL . Now go to the Lottiefiles site to search for an animation. This one looks good. Open it, and click the clipboard icon to copy the URL. Back in the Elementor Editor, paste the link in the External URL field.<\/p><p>In Link, select Custom URL, and type in the pound sign and \u201cfood\u201d to link it to the Food section, which we defined earlier.<\/p><p>In settings, switch the Loop to YES, to keep the interaction continuous. Drag the slider a bit to the right to increase the play speed.<\/p><p>In Style, set the width to 10%, and in CSS Filters, drag the Brightness slider down to 0 to change its color to black.<\/p><p>In Advanced, unlink the padding and set the top to 35%.<\/p><p>There. Now everything looks good.<\/p><p>Let\u2019s update and preview. And here\u2019s our scroll animation, inviting us to interact with it. Neat!<\/p><p>And that\u2019s all there is to creating an interactive scroll animation in Elementor.<\/p><p>For more tutorials, subscribe to our YouTube channel. Thanks for watching!<\/p><p>\u00a0<\/p><p>We\u2019ll leave the trigger on the default of Viewport, as well as on the default viewport settings, so the animation already plays when it&#8217;s in view&#8221;<\/p><p>Steps<br \/>Intro Visuals:<br \/>Page with icon arrow<br \/>Click<\/p><p>Page with animation <br \/>Click<\/p><p>Tutorial:<br \/>Start in Photography page<br \/>Scroll to Food section, select<br \/>CSS ID: food<br \/>Scroll back to top<br \/>Widgets<br \/>Search and Drag Lottie<br \/>Select External URL<br \/>CMD 2 (Go to Lottie files)<br \/>Type scroll down in search<br \/>Open<br \/>Click copy<br \/>CMD 1 (back to E)<br \/>External URL: Paste link<br \/>Select Custom URL <br \/>Paste #food<\/p><p>Settings: <br \/>Loop YES<br \/>Play speed: drag up, to 1.2<\/p><p>STYLE<br \/>Set width (%10)<br \/>CSS Filters: drag Brightness 0<\/p><p><br \/>Update<br \/>Preview<br \/>Click scroll<br \/>Back to top<\/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 create a scroll button with the Lottie Widget. Use animation to draw attention to your page and encourage interaction with your website. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Add Lottie Animations via external URLs \u2714\ufe0e Link a Lottie animation to another section and automatically scroll to it, [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4209,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[41],"class_list":["post-1760","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 Create a Lottie Widget Scroll Button - 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-create-a-lottie-widget-scroll-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Lottie Widget Scroll Button - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Learn how to create a scroll button with the Lottie Widget. Use animation to draw attention to your page and encourage interaction with your website. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Add Lottie Animations via external URLs \u2714\ufe0e Link a Lottie animation to another section and automatically scroll to it, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T11:32:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:36:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-Scroll-Button-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=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Lottie Widget Scroll Button - 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-create-a-lottie-widget-scroll-button\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Lottie Widget Scroll Button - Academy","og_description":"Overview Transcript Overview Learn how to create a scroll button with the Lottie Widget. Use animation to draw attention to your page and encourage interaction with your website. In this tutorial you\u2019ll learn how to: \u2714\ufe0e Add Lottie Animations via external URLs \u2714\ufe0e Link a Lottie animation to another section and automatically scroll to it, [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/","og_site_name":"Academy","article_published_time":"2021-06-20T11:32:10+00:00","article_modified_time":"2023-02-22T09:36:25+00:00","og_image":[{"width":1923,"height":1081,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-Scroll-Button-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Create a Lottie Widget Scroll Button","datePublished":"2021-06-20T11:32:10+00:00","dateModified":"2023-02-22T09:36:25+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/"},"wordCount":573,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-Scroll-Button-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Motion Effects"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/","url":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/","name":"How to Create a Lottie Widget Scroll Button - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-Scroll-Button-1.jpg","datePublished":"2021-06-20T11:32:10+00:00","dateModified":"2023-02-22T09:36:25+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-Scroll-Button-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Lottie-Widget-Scroll-Button-1.jpg","width":1923,"height":1081},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-lottie-widget-scroll-button\/#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 Create a Lottie Widget Scroll Button"}]},{"@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\/1760","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=1760"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1760\/revisions"}],"predecessor-version":[{"id":9570,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1760\/revisions\/9570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4209"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}