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”.
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 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>
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?
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.
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.
