How to play a load interaction only once

Design help Animations & Interactions
1

Hi all,

I’m hoping someone can help me.

I wish to play a load animation only when the user first arrives on home page and not the next time the user comes back to home page. Is this possible? I’m using various page transitions so the load animation looks bad when transitioning back to home page. The load animation I want to use is just a fixed black div that becomes transparent so show the site.

Thanks, much appreciated

Niall

https://preview.webflow.com/preview/niallmcdermott?utm_source=niallmcdermott&preview=54f7d9e4da89ae78b8a2752af3c6e28f

1 Like
2

Update answer (July 2019) -

Tutorial:

Clonable Template (hack 10 page)

js-cookie docs

± this topic:

2 Likes
3

Thanks for the reply. I don’t understand it really though. I’m just looking to have a full screen div fade from block 100% transparency to 0% transparency and then none. It’s to act like a preloader.

1 Like
4

Yeah for something like this I think you would need custom code.
I found this post on stackoverflow: cookies - How can one make an animation run only once per session only at the beginning of the session using jQuery? - Stack Overflow

<script type="text/javascript">
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
    var expiration = new Date();
    expiration.setDate(expiration.getDate()+1);
    document.cookie = 'visited=1;expires=' + expiration + ';path=/';

    var element = document.getElementById('slider');
    element.style.display = 'block';
}
</script>

Im sure @samliew could possibly confirm this.

2 Likes
5

As a workaround, create two homepages: one with the page-load animation and one without. Set the one with the animation as your actual homepage, and then, throughout your site, link to the one without.

1 Like
6

Bad for SEO + hard to maintain (For such small task duplicate the entire main page).

1 Like
7

@Niall_Mc_Dermott, You could use a 3rd party system like RightMessage that would allow you to do that. However there is a monthly fee attached to it. The JS code might be your better bet.

8

How bad is it for SEO? I would make a trade off for it to work. It seems like a good solution. I could be wrong.

I don’t understand how to manipulate the code to get the right result. I tried a few variations but couldn’t get it working

9

First, over time - your should duplicate any change (Styles/images/text) twice.

About SEO: Google spiders will go “crazy” because of this trick hh (It’s risky - maybe your SEO/ranking even increase - but still “risky”).

Canonical

You must declare Canonical (Otherwise you get duplicate content issues).

Very simple (On both pages put this tag in the head):
<link rel="canonical" href="https://example.com/the-page-withloader"/>

analytics

Also under google analytics (MOZ, or any other software) - always you should analize you homepage twice

summary

google give more power for the root page “/” in your case you want “/homepage-with-loader” to be the mainpage.

1 Like
10

@Siton_Systems Hi Ezra,

I have an animation consisting of three separate divs, rather than one single wrapper, as in the tutorial from Fin Sweet. I am unsure how I can work with this animation, since it seems to need three different targets in the code and I don’t know enough about coding to make that happen. Do you have any advice? Thank you