Lottie not loading on intial page-load on mobile

Design help Layout & Design
1

Hey guys,
I am running in circles for finally making my lottie-animations work on the INITIAL pageload on Mobile (Safari, Chrome, Firefox). 1/5 times it doesn‘t work.

Preview: https://smarter-start-2022-b44bb8828d4d564e9eff.webflow.io/

Already read some similar requests incl. Trigger or Javascript Event when Lottie is fully loaded - #4 by SimonvonSchmude, but nothing seemed to help or I am still make a failure. Has it to do with https? As I might not be the only one encountering this issue, any help is welcome. Many thanks.

2

What do you mean by saying “INITIAL”? + Also can you add a screenshot of the animation that’s not working (The Hero animation working fine **arrow moving on a path).

3

Many thanks for your reply. With “INITIAL” I mean the first time I load the page into an empty cache/session. No matter the browser, if one keeps on reloading the page, after several tries the page will have fully loaded. I assume it has nothing to do with the files of which are two on the page (the arrow on a path and a suitcase, further down below).

Loading worked, how it should look like: Dropbox - IMG_0016.PNG - Simplify your life
Both Lottie-files didn‘t load - the div-containers take up no vertical space: Dropbox - IMG_0017.PNG - Simplify your life

4

“Space” until the Lottie loads (above fold):

  1. Use relative boxes (Google => CLS) “trick”
  1. You could also put image placeholder (The first frame of the Lottie) and hide the image after 1 second.
5

Many thanks @Siton_Systems! Not entirely sure if it now really loads better, it still fails 1/6 times on my bandwidth. Did test it on Safari, Chrome, Firefox. See my applied settings - was that all you did imagine I would need to do?
Should I now add an image placeholder too? I definitely could.

Bildschirmfoto 2022-12-23 um 14.35.37
Bildschirmfoto 2022-12-23 um 14.35.371920×648 78.6 KB