{"id":7230,"date":"2021-12-21T10:18:49","date_gmt":"2021-12-21T10:18:49","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7230"},"modified":"2023-02-21T09:44:23","modified_gmt":"2023-02-21T09:44:23","slug":"amazing-layouts-with-svg-lottie-motion-effects","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/","title":{"rendered":"Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7230\" class=\"elementor elementor-7230\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-39ff21b7 thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"39ff21b7\" 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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4479744c\" data-id=\"4479744c\" 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-5b4d9787 elementor-widget elementor-widget-video\" data-id=\"5b4d9787\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/mcCZNlLGezc&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-1d1452 thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d1452\" 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-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4e2674a4\" data-id=\"4e2674a4\" 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-723cf035 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"723cf035\" 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-1911\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1911\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1912\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1912\" 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-1911\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1911\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1911\" tabindex=\"0\" hidden=\"false\"><p>In this advanced tips &amp; tricks tutorial we will learn how to create an advanced website layout using a combination of SVG, Lottie &amp; Motion Effects.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Using Shape Dividers<br \/>\u2714\ufe0e Using Lottie Animations<br \/>\u2714\ufe0e Adding Custom SVG Illustrations<br \/>\u2714\ufe0e Using Motion Effects<\/p><p>Custom CSS:<\/p><p>selector{<br \/>position: absolute;<br \/>}<\/p><p>selector{<br \/>pointer-events: none;<br \/>}<\/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-1912\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1912\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1912\" tabindex=\"0\" hidden=\"hidden\"><p>He heard the wings of a murder of crows as he approached the windmill, a gentle rustle of leaves came from above. Inside, the boy knew, were stories of the old land. The ancient wisdom of sages long past was waiting for him below the blades of the mill. As he passed the wishing well, the whispers increased, he heard voices of ancient wise women. The door creaked open as he went inside. Books of history greeted him. Books of tales, books of magic. He was home.<\/p><p>Whether you\u2019re an illustrator, storyteller or general web creator, creating advanced layouts requires planning and extensive Elementor knowledge.<\/p><p>I\u2019m Ash from Elementor, and in this advanced tips &amp; tricks tutorial we\u2019re going to learn how to create this mind blowing website layout using a combination of SVG\u2019s, Lotties &amp; Motion Effects.<\/p><p>We\u2019ll first create the entrance area by setting a shape divider and adding a Lottie animation.<\/p><p>We\u2019ll then add in our custom drawn SVG illustration of the body of our windmill, followed by our windmill blades which we&#8217;ll set with a custom position and scrolling animation.<\/p><p>Next up we\u2019ll create our revealing leaves area by first setting a mask on top of our background images to create a window effect, and then by adding our SVG leaves with custom positioning and motion effects.<\/p><p>After this we\u2019ll then configure our trees, well &amp; bucket to move along with the users mouse actions.<\/p><p>Finally, we\u2019ll add in our Google Map and mask it with an SVG shape.<\/p><p>To follow along with this tutorial, you will require basic knowledge of the editor, as well as an understanding of Lottie\u2019s &amp; Motion Effects. We\u2019ve provided links in the description below to our dedicated tutorials on each of these incase you need to brush up on your knowledge.<\/p><p>Be sure to follow along with your own assets to adopt these techniques for your own website creations.<\/p><p>So if you\u2019re ready to take your web creator skills to the next level, get comfortable and let\u2019s get started.<\/p><p>We\u2019ll start in the Elementor editor. We\u2019ll be using the Default layout and we\u2019ve hidden the title. We\u2019ve also pre-populated this page with its basic structure so that we can focus on the SVG\u2019s, Lotties &amp; Motion Effects.<\/p><p>We\u2019ve also ensured that we have enabled unfiltered uploads via the Elementor settings. Doing so means we\u2019re able to upload SVG &amp; JSON files via the Elementor Editor. If you would like to find out more about unfiltered uploads, check out the link in the description below.<\/p><p>\u201cTo create the first section we\u2019ll first use a shape divider to display the clouds followed by adding a Lottie animation to display the birds.\u201d<\/p><p>Let\u2019s select the first section&#8230;and then in the style tab choose \u2018Shape Divider\u2019. With \u2018Top\u2019 selected, change the type to \u2018Clouds\u2019, and then set the height.<\/p><p>Now open up a new tab and visit the Lottie website. Lotties are JSON-based animations. They work great on websites because they are small files which work on any device and can scale up or down without pixelation.<\/p><p>If you would like to learn more about Lotties, do check out our dedicated tutorial.<\/p><p>We\u2019ll search for \u2018Birds\u2019 &#8230;and the first result here, made by Orhan Deniz looks ideal for our design.<\/p><p>Select the download button and choose \u2018Lottie JSON\u2019 to save the file to your computer.<\/p><p>Please note you will need a free Lottie account to do this.<\/p><p>Now back in the editor, search for the Lottie widget and drop it above the main heading.<\/p><p>Select the upload icon, then drag and drop the download JSON file into the media library. Once uploaded select \u2018Insert Media\u2019.<\/p><p>Let\u2019s now configure the settings for this Lottie animation. Expand the settings tab and set the trigger to \u2018scroll\u2019 and start point to \u201815\u2019.<\/p><p>We\u2019ll amend the position next, so open up the advanced tab and under positioning, set this as absolute, then the horizontal offset and vertical offset.<\/p><p>If we now scroll down slowly, you can see the animation plays for us.<\/p><p>Perfect!<\/p><p>Let\u2019s now move onto the next section.<\/p><p>\u201cWe\u2019ll first add our custom SVG illustration of our windmill, then we\u2019ll add the windmill blades which we\u2019ll position absolutely and animate using rotating scrolling effects.\u201d<\/p><p>We\u2019ll first start off with a new full width section\u2026<\/p><p>Select the column and set the horizontal alignment to center. Since we will be working a lot with absolute positioning, it will ease our workflow to have all the elements centered to the page when we position them.<\/p><p>Drop in a new image widget and choose the windmill SVG. Then in the style tab, set the image width, as well as the margin.<\/p><p>Now drop in a new image widget and choose the windmill blades. Set the width first of all, then open the advanced tab.<\/p><p>Set the z-index to 10 to ensure it appears above our windmill SVG, then configure the position. Set a custom width&#8230;change the positioning to absolute&#8230;horizontal offset&#8230;.and vertical offset.<\/p><p>By setting the units to viewport width and height, we are able to position the elements according to the vertical and horizontal alignment settings configured via the column.<\/p><p>Open the motion effect tabs next and configure this SVG to rotate when a user scrolls.<\/p><p>Turn the scrolling effects on, then select the edit icon next to \u2018rotate\u2019 to switch on this motion effect. If we now scroll down and back up, you can see the blades rotate.<\/p><p>Scroll to the top of the page now and choose the first section. We\u2019ll apply some negative margin here to align our windmill perfectly.<\/p><p>OK, that looks great.<\/p><p>Let\u2019s now move onto the next section and create our revealing leaves area.<\/p><p>\u201cWe\u2019ve already placed our three images which will appear in the background for this area. We\u2019ll then place a custom shape on top of these images to create a mask. After this we\u2019ll add in our illustrated leaves which will all be custom positioned and animated using motion effects.\u201d<\/p><p>We\u2019ll first of all add in an inner section here above our images.<\/p><p>Remove one of the columns&#8230;then set it to full width&#8230;with no gap&#8230;and a minimum height of 100vh.<\/p><p>Now in the style tab, set the background to \u2018classic\u2019 and choose the \u2018mask oval\u2019 image from the library. Set the position&#8230;repeat&#8230;and size.<\/p><p>Then in the advanced tab, set the z-index to 2 to ensure it sits on top of the other elements in this section.<\/p><p>We now need to add some custom CSS to set a custom position for our frame and remove any unwanted space.<\/p><p>In the advanced tab&#8230;under custom CSS&#8230;type \u2018selector and then open and close the curly brackets. Now inside type \u2018position&#8230;colon&#8230;absolute&#8230;semicolon\u2019.<\/p><p>Adding this CSS ensures it stays on top of our image, and if we scroll you\u2019ll see that it acts as a frame for our images.<\/p><p>In the motion effects tab set \u2018sticky\u2019 to \u2018top\u2019 and \u2018stay in column\u2019 to \u2018yes\u2019.<\/p><p>Scrolling down you can see our mask image now stays in position while our image in the background scrolls with the users actions.<\/p><p>We\u2019ll now populate the inner-section with a heading and we\u2019ll use the divider widget to achieve this.<\/p><p>Search for and drop in the divider widget.<\/p><p>Set the width&#8230;alignment&#8230;and then add a text element with the text \u201cHave a look inside\u201d. Finally change the HTML tag to a H2 heading.<\/p><p>If we now open the style tab, we can set the visual aspects for this heading.<\/p><p>We\u2019ll set the weight first to 2&#8230;then in the text dropdown, set the color&#8230;font family&#8230;font size&#8230;and spacing.<\/p><p>Now in the advanced tab, open motion effects and switch on transparency. The default settings here work great, so we\u2019ll leave them.<\/p><p>With the first elements configured here, it\u2019s time to add in our frame.<\/p><p>In the widgets menu find and drop in the image widget underneath our divider title, and choose the frame from the media library.<\/p><p>In the style tab, set the width&#8230;and then in the advanced tab, set the motion effects. We\u2019ll choose scrolling effects, followed by enabling rotate&#8230;and then we\u2019ll amend the speed slightly.<\/p><p>Next we\u2019re going to add in our leaves, which when scrolled will reveal our library image &amp; mask.<\/p><p>We\u2019ll first select the \u2018eye icon\u2019 next to our inner-section which will temporarily remove it from our view, allowing us to see more clearly.<\/p><p>Now add in a new image widget and select an image from the library.<\/p><p>We\u2019ll amend the width and maximum width first of all by heading to the style tab&#8230;then in the advanced tab set a higher z-index to ensure the leaf appears above our existing content.<\/p><p>Amend the positioning next by changing this to inline&#8230;the position to absolute&#8230;and then set the horizontal offset&#8230;and vertical offset.<\/p><p>These values work great for our design, but for your website you may need different adjustments. We recommend you test out the values which will work best for you.<\/p><p>With our positioning set, let\u2019s now configure the motion effects.<\/p><p>Enable scrolling effects first of all, then set the horizontal scroll&#8230;and rotate.<\/p><p>Let\u2019s now create our second leaf.<\/p><p>Right click and duplicate the first leaf.<\/p><p>Set the width&#8230;and then in the advanced tab the positioning. We\u2019ll also amend the horizontal offset&#8230;and vertical offset.<\/p><p>Next, amend the motion effects.<\/p><p>Vertical scroll first&#8230;followed by the horizontal scroll&#8230;and finally rotate.<\/p><p>OK, two down, two to go!<\/p><p>But before we move on let\u2019s scroll up and down to see if our first two leaves move as expected\u2026 Perfect<\/p><p>Duplicate the first leaf again, and if you have trouble selecting it in the editor, be sure to make good use of the navigator.<\/p><p>Change the image first of all&#8230;then set it\u2019s width&#8230;and in the advanced tab the positioning, which includes the horizontal offset&#8230;then the vertical offset&#8230;and finally the motion effects. We\u2019ll configure the horizontal scroll first&#8230;.and then rotate.<\/p><p>And now for the final leaf&#8230;duplicate the last leaf&#8230;set it\u2019s width&#8230;and in the advanced tab head to positioning.<\/p><p>Then we\u2019ll amend the horizontal offset, followed by the vertical offset.<\/p><p>In the motion effects tab we\u2019ll set the vertical scroll&#8230;horizontal scroll&#8230;and finally rotate.<\/p><p>Let\u2019s now re-enable our inner-section by selecting the \u2018eye icon\u2019 in the navigator.<\/p><p>Because we\u2019re working with multiple absolutely positioned elements, from time to time the preview inside the editor may not appear as expected. In this instance, save your page as a draft, and then refresh. Doing so will ensure you\u2019re seeing the layout as expected.<\/p><p>And if we scroll up and down you can see our leaves are finished and have created a beautiful reveal for when the user scrolls down through our page.<\/p><p>\u201cLet\u2019s now move onto our next section where we have these four trees which we\u2019d like to move outwards as the user scrolls down the page, so let\u2019s configure that now.\u201d<\/p><p>These trees consist of two images which already have absolute positioning applied, so all we need to do is configure the motion effects to achieve the \u201cwalking through the woods\u201d feeling.<\/p><p>Select the first image and head over the advanced tab. From here navigate to \u2018Motion Effects\u2019 and enable \u2018Scrolling Effects\u2019.<\/p><p>Here we\u2019ll switch on and configure the vertical scroll which will create the illusion of passing through&#8230;then the horizontal scroll to push the image towards the edges of the screen as we scroll down&#8230;and finally the scale, which we\u2019ll set to scale down to fit the perspective of the idea .<\/p><p>As you can see if we scroll up and down, these motion effects are now applied to our image.<\/p><p>Select the other image next, follow the same steps.<\/p><p>Go to advanced&#8230;motion effect&#8230;and then switch on and configure the vertical scroll&#8230;horizontal scroll&#8230;and scale.<\/p><p>OK, that looks great.<\/p><p>Let\u2019s now add in another Lottie animation.<\/p><p>Search for and drop in the Lottie widget above our images.<\/p><p>Select upload and choose the \u2018Birds JSON\u2019 file which we previously used at the start of this tutorial. This time we will leave the trigger on Viewport.<\/p><p>Now expand the settings and set \u2018Loop\u2019 to \u2018Yes\u2019 to ensure the animation plays continuously whenever the widget is within the viewport.<\/p><p>\u201cIt\u2019s now time to add the bucket to our well. We\u2019ll amend the positioning and motion effects to place the bucket behind the well and to move up and down when the user scrolls.\u201d<\/p><p>We would like a slight movement of the pot going up as we scroll down, as well as making the upper part remain invisible behind the well, so let\u2019s see how we can achieve this.<\/p><p>Add in a new image widget and in the navigator, move this to above the image of the well.<\/p><p>We\u2019ll choose the pot image from the media library and then set it\u2019s width.<\/p><p>Now in the advanced tab we\u2019ll set the width to inline&#8230;position to absolute&#8230;horizontal offset&#8230;and vertical offset.<\/p><p>In the motion effects tab next, turn on the scrolling effects and configure the vertical scroll.<\/p><p>OK, great. That works really well.<\/p><p>Let\u2019s now bring this entire section up by giving it a negative margin. This will create an effect of the well revealing within the forest as we scroll down\u2026 then via the motion effects tab, we\u2019ll apply a subtle scrolling effect.<\/p><p>OK, we\u2019re making great progress so far.<\/p><p>\u201cNow it\u2019s time to configure our four books so that the first &amp; third books float up, as the second &amp; fourth books float down.\u201d<\/p><p>Select the first book and head over to the motion effects area located in the advanced tab.<\/p><p>Turn scrolling effects on and set the vertical scroll like so.<\/p><p>Now we\u2019ll select the second book and again head over to the motion effects area&#8230;enable&#8230;and configure the vertical scrolling effects.<\/p><p>OK, this looks great. As you can see, giving a low speed value to the vertical scroll helps us achieve the subtle floating effect.<\/p><p>Let\u2019s now set up the third and fourth books.<\/p><p>Select the third book&#8230;head to motion effects&#8230;enable and configure the vertical scroll.<\/p><p>And then finally the fourth book&#8230;motion effects&#8230;enable scrolling animations\u2026.and set up the vertical scroll.<\/p><p>If we now scroll down, we can see these books are animating as expected. Great!<\/p><p>Our final area is just above the website footer and it shows a map widget.<\/p><p>\u201cWe\u2019re going to adjust this with CSS filters to get this to match the colours associated with our design, and then we\u2019ll apply a mask so that the map appears contained in our custom shape.\u201d<\/p><p>Choose map widget first of all and head over to style&#8230;CSS Filters.<\/p><p>We\u2019ll reduce the brightness first&#8230;followed by increasing the contrast&#8230;and finally we\u2019ll reduce the saturation.<\/p><p>OK, we achieved a nice grayscale color scheme for our map. Let\u2019s now add our mask.<\/p><p>In the advanced tab, select Mask and turn this on.<\/p><p>Choose \u2018Custom\u2019 from the \u2018Shape\u2019 dropdown and then choose your mask image.<\/p><p>Amend the size&#8230;position&#8230;and repeat.<\/p><p>Let now add in our overlay.<\/p><p>In the widget menu drag and drop in an image widget above the map.<\/p><p>Choose the image&#8230;and then in the style tab, set the width&#8230;and in the advanced tab, open the positioning area&#8230;change the width to inline&#8230;and the position to absolute.<\/p><p>Finally open the motion effects tab&#8230;turn on the scrolling effects&#8230; enable rotate&#8230;and configure.<\/p><p>Scroll up and down you can see these effects in action.<\/p><p>And if we try to move around the map you can see this isn\u2019t working as expected. It\u2019s because our frame in the image widget sits in front of the map widget overriding it\u2019s functionality. Let\u2019s fix that now.<\/p><p>Expand the custom CSS tab.<\/p><p>Type \u2018selector\u2019&#8230;followed by opening and closing the curly brackets. Now within the curly brackets type \u2018pointer&#8230;hyphen&#8230;events&#8230;colon&#8230;none&#8230;semicolon\u2019.<\/p><p>And if we now drag the map around, you can see that it moves as expected.<\/p><p>And there we have it, our web page is now complete.<\/p><p>In this advanced tips &amp; trick tutorial we first learnt how to insert SVGs &amp; Lottie Animations into our design using custom positioning.<\/p><p>We then explored how to add motion effects to further enhance our website to act upon user actions.<\/p><p>Finally we gained knowledge on when and how to apply shape masks.<\/p><p>Thank you for watching.<\/p><p>Be sure to comment below with any questions, and don\u2019t forget to subscribe to our channel for more tips &amp; tricks tutorials.<\/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 In this advanced tips &amp; tricks tutorial we will learn how to create an advanced website layout using a combination of SVG, Lottie &amp; Motion Effects. The tutorial will cover: \u2714\ufe0e Using Shape Dividers \u2714\ufe0e Using Lottie Animations \u2714\ufe0e Adding Custom SVG Illustrations \u2714\ufe0e Using Motion Effects Custom CSS: selector{ position: absolute; [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":7231,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-7230","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","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>Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced] - 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\/amazing-layouts-with-svg-lottie-motion-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this advanced tips &amp; tricks tutorial we will learn how to create an advanced website layout using a combination of SVG, Lottie &amp; Motion Effects. The tutorial will cover: \u2714\ufe0e Using Shape Dividers \u2714\ufe0e Using Lottie Animations \u2714\ufe0e Adding Custom SVG Illustrations \u2714\ufe0e Using Motion Effects Custom CSS: selector{ position: absolute; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-21T10:18:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:44:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/Create-amazing-layouts.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced] - 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\/amazing-layouts-with-svg-lottie-motion-effects\/","og_locale":"en_US","og_type":"article","og_title":"Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced] - Academy","og_description":"Overview Transcript Overview In this advanced tips &amp; tricks tutorial we will learn how to create an advanced website layout using a combination of SVG, Lottie &amp; Motion Effects. The tutorial will cover: \u2714\ufe0e Using Shape Dividers \u2714\ufe0e Using Lottie Animations \u2714\ufe0e Adding Custom SVG Illustrations \u2714\ufe0e Using Motion Effects Custom CSS: selector{ position: absolute; [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/","og_site_name":"Academy","article_published_time":"2021-12-21T10:18:49+00:00","article_modified_time":"2023-02-21T09:44:23+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/Create-amazing-layouts.png","type":"image\/png"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced]","datePublished":"2021-12-21T10:18:49+00:00","dateModified":"2023-02-21T09:44:23+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/"},"wordCount":2928,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/Create-amazing-layouts.png","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/","url":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/","name":"Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/Create-amazing-layouts.png","datePublished":"2021-12-21T10:18:49+00:00","dateModified":"2023-02-21T09:44:23+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/Create-amazing-layouts.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/Create-amazing-layouts.png","width":1280,"height":720,"caption":"Amazing Layouts With SVG, Lottie & Motion Effects"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/amazing-layouts-with-svg-lottie-motion-effects\/#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":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Amazing Layouts With SVG, Lottie &amp; Motion Effects [Advanced]"}]},{"@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\/a83ee0af0700704f04acf44839f06bd8","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","url":"https:\/\/elementor.com\/academy\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7230","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\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=7230"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7230\/revisions"}],"predecessor-version":[{"id":9325,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7230\/revisions\/9325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7231"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}