Amazing Layouts With SVG, Lottie & Motion Effects [Advanced]

In this advanced tips & tricks tutorial we will learn how to create an advanced website layout using a combination of SVG, Lottie & Motion Effects.

The tutorial will cover:
✔︎ Using Shape Dividers
✔︎ Using Lottie Animations
✔︎ Adding Custom SVG Illustrations
✔︎ Using Motion Effects

Custom CSS:

selector{
position: absolute;
}

selector{
pointer-events: none;
}

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.

Whether you’re an illustrator, storyteller or general web creator, creating advanced layouts requires planning and extensive Elementor knowledge.

I’m Ash from Elementor, and in this advanced tips & tricks tutorial we’re going to learn how to create this mind blowing website layout using a combination of SVG’s, Lotties & Motion Effects.

We’ll first create the entrance area by setting a shape divider and adding a Lottie animation.

We’ll then add in our custom drawn SVG illustration of the body of our windmill, followed by our windmill blades which we’ll set with a custom position and scrolling animation.

Next up we’ll 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.

After this we’ll then configure our trees, well & bucket to move along with the users mouse actions.

Finally, we’ll add in our Google Map and mask it with an SVG shape.

To follow along with this tutorial, you will require basic knowledge of the editor, as well as an understanding of Lottie’s & Motion Effects. We’ve provided links in the description below to our dedicated tutorials on each of these incase you need to brush up on your knowledge.

Be sure to follow along with your own assets to adopt these techniques for your own website creations.

So if you’re ready to take your web creator skills to the next level, get comfortable and let’s get started.

We’ll start in the Elementor editor. We’ll be using the Default layout and we’ve hidden the title. We’ve also pre-populated this page with its basic structure so that we can focus on the SVG’s, Lotties & Motion Effects.

We’ve also ensured that we have enabled unfiltered uploads via the Elementor settings. Doing so means we’re able to upload SVG & 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.

“To create the first section we’ll first use a shape divider to display the clouds followed by adding a Lottie animation to display the birds.”

Let’s select the first section…and then in the style tab choose ‘Shape Divider’. With ‘Top’ selected, change the type to ‘Clouds’, and then set the height.

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.

If you would like to learn more about Lotties, do check out our dedicated tutorial.

We’ll search for ‘Birds’ …and the first result here, made by Orhan Deniz looks ideal for our design.

Select the download button and choose ‘Lottie JSON’ to save the file to your computer.

Please note you will need a free Lottie account to do this.

Now back in the editor, search for the Lottie widget and drop it above the main heading.

Select the upload icon, then drag and drop the download JSON file into the media library. Once uploaded select ‘Insert Media’.

Let’s now configure the settings for this Lottie animation. Expand the settings tab and set the trigger to ‘scroll’ and start point to ‘15’.

We’ll amend the position next, so open up the advanced tab and under positioning, set this as absolute, then the horizontal offset and vertical offset.

If we now scroll down slowly, you can see the animation plays for us.

Perfect!

Let’s now move onto the next section.

“We’ll first add our custom SVG illustration of our windmill, then we’ll add the windmill blades which we’ll position absolutely and animate using rotating scrolling effects.”

We’ll first start off with a new full width section…

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.

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.

Now drop in a new image widget and choose the windmill blades. Set the width first of all, then open the advanced tab.

Set the z-index to 10 to ensure it appears above our windmill SVG, then configure the position. Set a custom width…change the positioning to absolute…horizontal offset….and vertical offset.

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.

Open the motion effect tabs next and configure this SVG to rotate when a user scrolls.

Turn the scrolling effects on, then select the edit icon next to ‘rotate’ to switch on this motion effect. If we now scroll down and back up, you can see the blades rotate.

Scroll to the top of the page now and choose the first section. We’ll apply some negative margin here to align our windmill perfectly.

OK, that looks great.

Let’s now move onto the next section and create our revealing leaves area.

“We’ve already placed our three images which will appear in the background for this area. We’ll then place a custom shape on top of these images to create a mask. After this we’ll add in our illustrated leaves which will all be custom positioned and animated using motion effects.”

We’ll first of all add in an inner section here above our images.

Remove one of the columns…then set it to full width…with no gap…and a minimum height of 100vh.

Now in the style tab, set the background to ‘classic’ and choose the ‘mask oval’ image from the library. Set the position…repeat…and size.

Then in the advanced tab, set the z-index to 2 to ensure it sits on top of the other elements in this section.

We now need to add some custom CSS to set a custom position for our frame and remove any unwanted space.

In the advanced tab…under custom CSS…type ‘selector and then open and close the curly brackets. Now inside type ‘position…colon…absolute…semicolon’.

Adding this CSS ensures it stays on top of our image, and if we scroll you’ll see that it acts as a frame for our images.

In the motion effects tab set ‘sticky’ to ‘top’ and ‘stay in column’ to ‘yes’.

Scrolling down you can see our mask image now stays in position while our image in the background scrolls with the users actions.

We’ll now populate the inner-section with a heading and we’ll use the divider widget to achieve this.

Search for and drop in the divider widget.

Set the width…alignment…and then add a text element with the text “Have a look inside”. Finally change the HTML tag to a H2 heading.

If we now open the style tab, we can set the visual aspects for this heading.

We’ll set the weight first to 2…then in the text dropdown, set the color…font family…font size…and spacing.

Now in the advanced tab, open motion effects and switch on transparency. The default settings here work great, so we’ll leave them.

With the first elements configured here, it’s time to add in our frame.

In the widgets menu find and drop in the image widget underneath our divider title, and choose the frame from the media library.

In the style tab, set the width…and then in the advanced tab, set the motion effects. We’ll choose scrolling effects, followed by enabling rotate…and then we’ll amend the speed slightly.

Next we’re going to add in our leaves, which when scrolled will reveal our library image & mask.

We’ll first select the ‘eye icon’ next to our inner-section which will temporarily remove it from our view, allowing us to see more clearly.

Now add in a new image widget and select an image from the library.

We’ll amend the width and maximum width first of all by heading to the style tab…then in the advanced tab set a higher z-index to ensure the leaf appears above our existing content.

Amend the positioning next by changing this to inline…the position to absolute…and then set the horizontal offset…and vertical offset.

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.

With our positioning set, let’s now configure the motion effects.

Enable scrolling effects first of all, then set the horizontal scroll…and rotate.

Let’s now create our second leaf.

Right click and duplicate the first leaf.

Set the width…and then in the advanced tab the positioning. We’ll also amend the horizontal offset…and vertical offset.

Next, amend the motion effects.

Vertical scroll first…followed by the horizontal scroll…and finally rotate.

OK, two down, two to go!

But before we move on let’s scroll up and down to see if our first two leaves move as expected… Perfect

Duplicate the first leaf again, and if you have trouble selecting it in the editor, be sure to make good use of the navigator.

Change the image first of all…then set it’s width…and in the advanced tab the positioning, which includes the horizontal offset…then the vertical offset…and finally the motion effects. We’ll configure the horizontal scroll first….and then rotate.

And now for the final leaf…duplicate the last leaf…set it’s width…and in the advanced tab head to positioning.

Then we’ll amend the horizontal offset, followed by the vertical offset.

In the motion effects tab we’ll set the vertical scroll…horizontal scroll…and finally rotate.

Let’s now re-enable our inner-section by selecting the ‘eye icon’ in the navigator.

Because we’re 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’re seeing the layout as expected.

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.

“Let’s now move onto our next section where we have these four trees which we’d like to move outwards as the user scrolls down the page, so let’s configure that now.”

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 “walking through the woods” feeling.

Select the first image and head over the advanced tab. From here navigate to ‘Motion Effects’ and enable ‘Scrolling Effects’.

Here we’ll switch on and configure the vertical scroll which will create the illusion of passing through…then the horizontal scroll to push the image towards the edges of the screen as we scroll down…and finally the scale, which we’ll set to scale down to fit the perspective of the idea .

As you can see if we scroll up and down, these motion effects are now applied to our image.

Select the other image next, follow the same steps.

Go to advanced…motion effect…and then switch on and configure the vertical scroll…horizontal scroll…and scale.

OK, that looks great.

Let’s now add in another Lottie animation.

Search for and drop in the Lottie widget above our images.

Select upload and choose the ‘Birds JSON’ file which we previously used at the start of this tutorial. This time we will leave the trigger on Viewport.

Now expand the settings and set ‘Loop’ to ‘Yes’ to ensure the animation plays continuously whenever the widget is within the viewport.

“It’s now time to add the bucket to our well. We’ll amend the positioning and motion effects to place the bucket behind the well and to move up and down when the user scrolls.”

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’s see how we can achieve this.

Add in a new image widget and in the navigator, move this to above the image of the well.

We’ll choose the pot image from the media library and then set it’s width.

Now in the advanced tab we’ll set the width to inline…position to absolute…horizontal offset…and vertical offset.

In the motion effects tab next, turn on the scrolling effects and configure the vertical scroll.

OK, great. That works really well.

Let’s 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… then via the motion effects tab, we’ll apply a subtle scrolling effect.

OK, we’re making great progress so far.

“Now it’s time to configure our four books so that the first & third books float up, as the second & fourth books float down.”

Select the first book and head over to the motion effects area located in the advanced tab.

Turn scrolling effects on and set the vertical scroll like so.

Now we’ll select the second book and again head over to the motion effects area…enable…and configure the vertical scrolling effects.

OK, this looks great. As you can see, giving a low speed value to the vertical scroll helps us achieve the subtle floating effect.

Let’s now set up the third and fourth books.

Select the third book…head to motion effects…enable and configure the vertical scroll.

And then finally the fourth book…motion effects…enable scrolling animations….and set up the vertical scroll.

If we now scroll down, we can see these books are animating as expected. Great!

Our final area is just above the website footer and it shows a map widget.

“We’re going to adjust this with CSS filters to get this to match the colours associated with our design, and then we’ll apply a mask so that the map appears contained in our custom shape.”

Choose map widget first of all and head over to style…CSS Filters.

We’ll reduce the brightness first…followed by increasing the contrast…and finally we’ll reduce the saturation.

OK, we achieved a nice grayscale color scheme for our map. Let’s now add our mask.

In the advanced tab, select Mask and turn this on.

Choose ‘Custom’ from the ‘Shape’ dropdown and then choose your mask image.

Amend the size…position…and repeat.

Let now add in our overlay.

In the widget menu drag and drop in an image widget above the map.

Choose the image…and then in the style tab, set the width…and in the advanced tab, open the positioning area…change the width to inline…and the position to absolute.

Finally open the motion effects tab…turn on the scrolling effects… enable rotate…and configure.

Scroll up and down you can see these effects in action.

And if we try to move around the map you can see this isn’t working as expected. It’s because our frame in the image widget sits in front of the map widget overriding it’s functionality. Let’s fix that now.

Expand the custom CSS tab.

Type ‘selector’…followed by opening and closing the curly brackets. Now within the curly brackets type ‘pointer…hyphen…events…colon…none…semicolon’.

And if we now drag the map around, you can see that it moves as expected.

And there we have it, our web page is now complete.

In this advanced tips & trick tutorial we first learnt how to insert SVGs & Lottie Animations into our design using custom positioning.

We then explored how to add motion effects to further enhance our website to act upon user actions.

Finally we gained knowledge on when and how to apply shape masks.

Thank you for watching.

Be sure to comment below with any questions, and don’t forget to subscribe to our channel for more tips & tricks tutorials.