Creating And Animating Lottie Files For Elementor Pro

The Elementor Lottie Widget is an awesome new tool for web creators. While I originally labeled it as "cute," I am finding more useful and a way to present our feature.

Table of Contents

Tools Used

Elementor Pro
Adobe Dimension
Adobe Photoshop
Adobe After Effects
Bodymovin Extension for Ae

Difficulty Level
Difficulty 95%
More Tips

The Tutorial

Using the Elementor Lottie Widget To Animate Your Websites

The Elementor Lottie Widget is an awesome new tool for web creators. While I originally labeled it as “cute,” I am finding more useful and a way to present our feature. We will build a cabin in this tutorial.

Let’s Start Building

Here is a demo.

Animated Image Of Cabin Being Built

Creating Our Cabin

We first need a model. I am going to use Adobe Dn to create a basic structure. I will use the cube and cylinder assets to create my cabin.

Add A Foundation

It all starts with a foundation. I added a cube and set the Y to thin and sized. For color, I added the cracked cement filter.

The Foundation Cube

Start The Walls

Next, we use the cylinder widget to create five logs and set them on the foundation. I left a gap for a door. I used the wood textures to create the skin, We can duplicate this layer several times to the right level we need.

Add cylinders to create layer of logs.

Lets Let Some Air In

I now create a new layer with a gap for a window and duplicate this layer as needed.

Adding a window.

Finish The Walls

We can now finish the walls with four logs up top.

Finishing The Walls

Add The Roof

Here I am stacking layers of logs with diminishing widths. I then do the same for the back. We wont see these in this render, but if we need different angles of the cabin later, it is done.

Adding the eaves

We will create our roof with two more cubes and angles. We texture and color as desired.

Adding a roof.

Rendering Our Layers

Next we need to render each of our twelve layers to Psd files. This will let us optimize them for final animation in Ae.

Render each layer separate to PSD.

Optimizing in Photoshop.

We can open these files now in Ps and take out the background layer, and make final edits.

Render each layer as psd file

Saving Our Files For Ae

When creating Lottie files, the final size of the Lottie will depend on all the pieces of the puzzle. Save each layer at 50% for better final size.

Make final edits and resize for optimization,

Animate In After Effects

Here I have added all my layers to Ae and re-constructed my cabin. I begin animating each layer to drop in from the top at 3 marker intervals

The full build cabin
Adding our keyframes one

Repeat this till all layers drop in from the top. For each layer, I am only using keyframes on the Y position. You will need to adjust each to fit the need of your projects speed.

Add the walls.
Add the roof.

Export With Bodymovin Extension

Use the Bodymovin extension to render the JSON file for our Lottie Widget You can download this from the Lottie website. Add it to your Ae extensions. We will be rendering with this rather than creating a movie file.

Create a destination and settings for our JSON,

Include The Files In Assets.

This is needed for the png files to show up on the website. In Settings > Advanced tick include Images. You may also adjust the compression levels here.

Include file assets or Lottie will be blank.

Add To Our Website with The Lottie Widget.

We can now use the Elementor Lottie Widget to upload and display our JSON file.

Drag Lottie widget to page and upload the file.

Set to Scroll Animation

In the widget settings. Try using the scroll trigger animation function, Test in both desktop and mobile for the best results.

Setting the trigger and viewports.

Happy Building!

Tutorial Is Free For Personal Use Only.

Please do not use this for commercial websites. It is for personal creative learning use only. If you would like us to create a file for your commercial project, ask us.