We're going to:
You need a GIF that PLAYS ONCE. I repeat, A GIF THAT PLAYS ONCE. If you have a repeating GIF, this won't work. To make your gif play once, do this.....
Create an intro screen for your site and place the single playing GIF image inside the intro screen. Upon load this intro will start as display block or display flex and then hides itself after X seconds. X should be a little more time than the total playing time of your gif. In our live example, our gif is 5000ms long, so we've set our loading screen to go to opacity 0% and then display none after 5400ms.
[ Image of single div, flex center center, gif in middle ]
Let's learn by going step by step through the code
How often do you want this to play? On every load? Once every hour? Once a year? It can be annoying to have a loading animation play every time you navigate to a homepage. By changing the xVar we can play it only once every Y time frame.
The xVar can be a date instance or a number representing days from time of creation.
Here's a quick list of values to set xVar to
We're Webflow Experts!