Webflow Joe

F'in Sweet Webflow Hacks

Show page intro based on time with cookies

What can this be used for?

  • To avoid overwhelming your visitor with the same intro page animation over and over and over
  • Used together with our "Use GIF as intro animation" article to show a complex animation without a complex ix2 interaction sequence

Overview

Sometimes a page animation can get annoying after seeing it on every page load. If you have an intro screen, you may not want the user to see the animation EVERY time. Maybe you want the user to see it once and only once. Maybe you want to see them once per day. Maybe once per minute. We will walkthrough how to make your ix2 page interaction show/hide in the time interval of your choosing.

We are going to give the user a cookie when they load the webpage and the intro screen plays. That cookie will have a time attached to it. Each time the user loads the page, we check for their 'playedintro' cookie. If they have the cookie and it's within your desired time, we don't run the ix2 animation. If it is outside your desired time frame, we run the ix2 animation as planned.

Step 1

Set up your ix2 intro

You can have a very simple page load animation or a highly complex page load animation. As long as all of the animations are tied to one interaction, it will work. Give the class ".intro-loader" to the outer parent of the intro load wrapper.

[ pics of ix2 intro Setup ]

Step 2

Add this code to the <head> of custom code section</head>

What the heck does that mean?

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

EXPLANATION

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

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!