Help with logo animation triggered by page loading

Hi! I’m trying to create a full page logo animation that

  1. starts when page starts loading
  2. slides up and reveals home page below 0.5 sec after the logo animation is finished

I tried doing this with a lottie animation but the result was quite jumpy and I was wondering if I could do this with a mp4 file or a gif (so that the gif only runs once). Also one problem that I had was that page loading first revealed the page below the animation and then the animation itself. What would be the best approach to this kind of problem?

Would really appreciate your help with this!