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
- Use Webflow Interactions to create a page load animation wrapped in a fixed, full-screen div.
- Add custom JavaScript using localStorage to detect first-time visits and hide the loader for returning users.
You can show a load animation only on a user’s first visit by combining Webflow interactions with custom code and localStorage. This ensures the animation runs once and is skipped on future visits.
1. Set Up the Load Animation in Webflow
- Use Webflow Interactions to design your animation.
- Create a Page Load trigger animation set to run when the page finishes loading.
- Name this animation clearly (e.g.,
First Visit Loader).
2. Apply a Unique Class to Your Loader Wrapper
- Wrap your animation in a div (e.g.,
#loader-wrapperor.loader). - Make sure this wrapper is position: fixed and covers the entire viewport.
- Set it to display: block or flex by default so it appears during the first visit.
3. Inject Custom Code to Control Visibility via localStorage
- Go to Page Settings of your homepage.
- Scroll down to Before </body> tag area and add this custom script:
<script>
document.addEventListener('DOMContentLoaded', function () {
const hasVisited = localStorage.getItem('hasVisited');
if (hasVisited) {
// Hide the loader immediately so animation doesn't run
const loader = document.querySelector('.loader');
if (loader) {
loader.style.display = 'none';
}
} else {
// Set flag so animation won't run next time
localStorage.setItem('hasVisited', 'true');
}
});
</script>
4. Adjust Main Page Content Behavior
- Ensure your main content is not visible or interactive until the loader completes (e.g., by setting
overflow: hiddenon body during the animation, then released afterward). - Use an interaction to hide the loader and reveal the content after the animation ends.
5. Test in a Private Window or Incognito
- Use an incognito window to simulate a first-time visitor.
- Reload the page normally to verify the animation doesn’t run on subsequent visits.
Summary
To show a load animation just once in Webflow, use localStorage to detect whether a user has visited before, and conditionally show/hide your loader. This requires a mix of Webflow interactions and custom JavaScript added in Page Settings.
