Trigger or Javascript Event when Lottie is fully loaded

This is a more general question about the loading behavior of Lottie Animations. Is there a way to tell when the Lottie Animations on a given page are fully loaded and thus displayable? I tried the window.load() event with javascript, but it fires long before the .json files finished loading (and by that i mean downloading, not being processed).

For Context: I have a website that starts with a long Lottie animation (~15MB ) and I would like to build a preloader that disappears when this Lottie animation is loaded (more importantly of course when it is displayed). The weird thing is, that the window.load() event triggers long before the loading is finished and even the browser’s loading icon stops before that. This also means that the “when page finished loading” Page trigger interaction is useless, as well as the legacy interaction with the optional checkbox “wait for assets to load”.

Any idea on how to do this with JS?

3 Likes

is there maybe another place where someone could help me on this issue?

Hello. I have same problem and not solution founded. I build a preloader and my lottie animation is not load at the end of the preloader. I can cheat with delay but is illogic and don’t work when your connection is very slow.

I am currently using this workaround: I place a div block with a small loading text and animation behind the lottie block. Once the Lottie has loaded, it will cover that loading block. I guess that’s another way of telling people that they might wanna wait for the content to load before scrolling…

I’ve the same problem :frowning:

Hi,

I found a solution to this problem. It is a little hacky, since it depends on Webflow internals, but it works, and I don’t think it will change anytime soon. I also hope we’ll get an official solution at some point.

The idea is to retrieve all Lottie animations from global Webflow object and wait for DOMLoaded event for each of them. It’s important to run the code after Webflow initialization, to make sure that animation objects already exist.

<script>
// Return a promise that resolves to true once animation is loaded
async function animationLoaded (animation) {
  if (animation.isLoaded) {
    return true
  }
  
  return new Promise((resolve, reject) => {
    animation.addEventListener('DOMLoaded', () => {
      resolve(true)
    })
  })
}

// Return a promise that resolves to true once all animations are loaded
async function waitForAnimationsLoaded (animations) {
  await Promise.all(animations.map(animationLoaded))
}

async function initAnimations () {
  const lottie = Webflow.require('lottie').lottie
  const animations = lottie.getRegisteredAnimations()
  await waitForAnimationsLoaded(animations)
}

var Webflow = Webflow || []

Webflow.push(() => {
  initAnimations()
    .then(() => {
      console.log('Initialized animations')
      // hide splash screen
    })
    .catch((error) => {
      console.error(error)
    })
})
</script>
5 Likes

Hi Jarek!

Thanks for your code.
I’m struggling with implementing this though – do I need to put this in the page header or in an embed block? – and how can I use it to hide my pre-loader when the animations are loaded?

Thanks in advance.

Hi Pat,

You can either add the snippet in the Project Settings / Custom Code / Footer Code (preferable) or an embed block located close to the end of </body> tag.

You can hide your preloader by adding some JavaScript code where the // hide splash screen comment is.

For example (not tested):

const splash = document.getElementById('splash')
splash.style.opacity = 0
setTimeout(() => splash.style.display = 'none', 200)

In order for it to work, you need to set the ID of your splash screen element to splash and add an opacity transition with duration 200ms.

If you prefer, you can also trigger Webflow Interaction when trigger is loaded. You can find more information how to do it on the forum, for example How to trigger Webflow interactions using JavaScript - #29 by ma11k. The easiest solution IMHO is to have a hidden button with attached interaction, that you can click() in JavaScript.

Jarek

2 Likes

Fabulous!

Thanks for the help mate, worked wonders.

1 Like

Hi @Jarek – really appreciate you sharing the code! However, I’m having problems with it on my site.

The lottie animation (7MB) fails to load properly on first page load, then works perfectly if you refresh the page.

Is the code still working or am I going wrong somewhere?

Read-only link: Webflow - Personal Website

View live site: www.tobyglass.com

Thanks!

**EDIT: ** think I’m going to go with a simple background video instead, as it does the job fine for what I need.

Hi Toby,

Please let me know if you still want me to take a look at this / whether your site still contains the Lottie animation.

Cheers,
Jarek