Trigger or Javascript Event when Lottie is fully loaded

Design help General
6

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