How to disable preloader animation from appearing more than once?

Hey guys,

So I have designed a preloader which has two animations. first animation is the logo setup which setups up the different parts of the logo and the second animation is where the parts all become visible shift into the right place and then the preloader fades away.

The first animation I have set to show while the page is loading as there is nothing visible that happens.

The second animations shows once the page has finished loading for about 2.5 seconds.

But the problem is it shows up every time I click on the home button.

I have tried other solutions on the forums which mostly ask to use cookies in the custom code.

But the posts are too old and most of them don’t work.

I have trying to hide the div if the page is visited once using some custom js in the exported code but although the first animation part is not visible the second animation awkwardly shows itself.

Can someone help me do this.

Here is my public share link:
(how to access public share link)

You might find this helpful