Show an HTML element once per visit

I have a small animation on the home page of a site. I want to show it during the first time the user visits the home page (not everytime they visit it again while browsing). If they close the window/tab, it should appear again on the next visit. Hope it makes sense!

I tried Kirby’s session, but I can’t find a way to make the duration last for a single site visit. I also tried the browser’s sessionStorage, but since JS must be executed, reading from it introduces a small delay from hiding the animation to showing the page.

Any ideas how to approach this?

You could probably drop a simple cookie when they visit and then unset it when they leave. You might find these useful:

I tried the cookie solution, but a proper way to detect window/tab closing doesn’t seem to exist. unload/beforeunload events happen on every page load, not for a site visiting session.

I think I will have the animation as a separate page and transition it to the main one.