Is it possible to have a load animation only display for the user's first visit to the home page in Webflow, without being shown on subsequent visits?
TL;DR
- Create a page load animation in Webflow and assign a unique ID to the loader element.
- Add custom JavaScript using localStorage to check if the user has visited before; if so, skip the animation on future visits.
To show a load animation only on a user’s first visit to the homepage in Webflow, you can use a simple cookie or localStorage method with a bit of custom code.
1. Build Your Load Animation in Webflow
- Create your load animation in the Webflow interactions panel.
- Use a Page Load (when page finishes loading) trigger.
- Set the animation to affect your loader element (e.g., fade out and hide it).
- Be sure to set the loader container to display: block or similar, then hide after animation.
2. Add a Unique ID or Class to the Loader
- Assign a unique ID or Class (e.g.,
#page-loader) to the loader element. - This is needed for targeting the element with custom JavaScript.
3. Insert Custom Code to Store Visit State
- Use localStorage to track whether the user has already visited.
- Go to Page Settings for your homepage > Custom Code > Footer Custom Code.
- Paste this just before the
</body>tag:
<script> document.addEventListener("DOMContentLoaded", function() { if (localStorage.getItem("hasVisited")) { // User has visited - hide the loader instantly const loader = document.getElementById("page-loader"); if (loader) loader.style.display = "none"; } else { // First visit - run animation and set flag localStorage.setItem("hasVisited", "true"); } });</script>4. Publish Your Site and Test
- Publish the site, then load it in an incognito or cleared-cache browser.
- On first load, the animation should show.
- On subsequent loads, the loader should skip entirely.
Summary
To show a loader only on a user’s first visit in Webflow, create the loader with page load animation, then use localStorage in custom code to detect first-time visitors. This works across sessions until the user clears storage.