This tutorial is going to create a unique Lottie scrolling effect in Elementor.

I saw this effect in the Elementor Facebook Group a few days ago, and wanted to figure out the best way to create a unique scrolling effect in Elementor.

The final result was the combination of two of our existing Elementor tutorials:

This resulted in a unique effect using Lotties, Sticky Effects and Elementor, quite similar to the example in the Facebook Group, which was a screen recording of the Moka Bank website:

It's actually a really simple thing to implement in an Elementor site, specifically because the Page Builder recently added native support for Lottie animations in version 2.10. Let's get into it.

Structure

The underlying needed for our effect is quite simple. First, make a section with two individual columns (50% each). The first column houses our Lottie. The second column hoses our content (Cool Point #1,2 and 3).

Finding The Lottie

Out of all of our steps, this one is the most critical. Finding the right lottie will make or break the effect.

• Lottie duration is measured in frames. You need to find one with a lot of frames, which will play as you scroll through your content.
• The lottie will be quite large ~50% of your screen, so it needs to have enough detail for this size.
• If you're looking for a really cool effect, try to find one that has a noticeable change every collection of frames. For example, if its a 300 frame lottie, finding one that has a major change every 100 frames can make each change sync with each content element.

You can choose to use a preexisting lottie, or get a new one made.

For preexisting lotties, lottiefiles.com is the best place to find the perfect asset. In this example, we found the perfect file:

To add it to our site, simply scroll down, copy the URL and add it to the lottiefile element on your Elementor page.

For a production site, getting a custom made lottie is always the best option. We always use Fiverr to get our lotties made, meaning we can specify the number of frames, and sync it to our content:

We've used this seller in the past, and recommend it for basic custom lotties.

Once you have your lottie, add it to the website by dragging the lottie element into the page like so:

Manipulate the sizing and positioning by using negative margins and lottie width.

Making The Lottie Sticky

We have the lottie selected/made and plopped it into our Elementor website - now it's time to make it sticky. This keeps it fixed in one position as the content to the right scrolls past it.

To do this, add this custom css to the lottie (advanced tab -> custom css input):

selector {
    position: sticky; position: -webkit-sticky; top: 25%;
}Code language: CSS (css)

This will keep the lottie positioned in the middle of the column, and remain sticky as the user scrolls down the page. It will stop being sticky when it hits the bottom of the column/section.

Adding The Content

The final part of our effect is the content. As we scroll, our Lottie remains fixed, while the content scrolls. To do this, we're going to add several inner sections which contain our content.

Each inner section has a heading and body text. In our example we added three, but you can add as many as you want.

The margin-bottom of each inner section is set to be ~100px, spacing each section, and giving the lottie the scrolling distance it needs to complete its animation.

Delay the heading animation by 0ms, and display the subtext animation by 500-1000ms. This adds a subtle effect that makes the site a bit more professional.

Adjusting The Lottie

Finally, you're going to want to adjust the animation of the lottie to best match when the content enters the viewport. To do this, manually manipulate the viewport input until you get the best effect:

At the time of writing, where's no way to set effects relative to a section, which would be the best option here. You can add a chunk of code to set this up, but that's out of the scope of this article. To do it, the lottie would need to be added via html, and you would add something similar to this code:

<script>
LottieInteractivity.create({
    mode:"scroll",
    player: "#lottie",
    container: "#MyContainerId",
    actions: [
    {
      visibility:[0,1],
      type: "seek",
      frames: [0, 301]
    }
  ]
});
</script>Code language: HTML, XML (xml)