Webflow Joe

F'in Sweet Webflow Hacks

Use a GIF animation as an intro screen

What can this be used for?

  • Playing a badass gif animation as a website loading/intro screen

Understand what are we doing

Before we jump into implementation, we need to understand what we're doing here. GIFs are very useful and flexible for somethings and very frustrating for other things. GIFs are particularly frustrating for controlling movement and timing. We're going to use javascript to take control of our GIF so it can be used for an animation intro.

We're going to:

  • Use Webflow interactions to start and stop our loading screen, as we would normally do for an intro screen
  • Manually add a query to the url of the gif upon load to force it to play again from the beginning each time
  • Optional: Prevent the intro animation from playing if the user has visited the site within X amount of time

What do you need for this?

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

Part 1

Create your loading intro screen with Webflow interactions

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 ]

Part 2

Add this to the <body> of custom code</body>

What the heck does that mean?

Let's learn by going step by step through the code

EXPLANATION

Part 3

Customize the replay variable

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

  • Every load = .01
  • Every minute = new Date(new Date().getTime() + 60  * 1000); 
  • Every hour = new Date(new Date().getTime() + 60 * 60  * 1000); 
  • Every day = 1
  • Every week = 7
  • Every month = 30
  • Every year = 365
  • .... and so on....

Nice! You're done. See it live!

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!