Unique Lottie Scrolling Effect In Elementor

By James LePage
 on August 15, 2020
Last modified on January 7th, 2022

Unique Lottie Scrolling Effect In Elementor

By James LePage
 on August 15, 2020
Last modified on January 7th, 2022

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

Here's what we're making

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.


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, 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:

Lottie is placed into the left column

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:

    player: "#lottie",
    container: "#MyContainerId",
    actions: [
      type: "seek",
      frames: [0, 301]
</script>Code language: HTML, XML (xml)
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Martin Luht
Martin Luht
2 years ago

Tried it and it worked very well. I also tried it with other motion effects such as scroll and rotate and blur etc. Same code works aswell.

But is there also a Css code for where effects are relative to viewport for better control for the animation trigger timing?

I would like to scroll a still animation into the middle height of viewport, where it would stick and scroll trigger would start. Once it reaches the column bottom, it stops the animation and scrolls away upwards.

Thank you

9 months ago

Attempting this approach, but the animation stalls when it is sticky in the viewport. Any ideas why this happens?

Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram