Introduction

When designing user experiences, sometimes you want to show an element (like a banner or modal) only on the first visit and hide it on subsequent visits. In Framer, we can achieve this using React's useEffect and useState, along with localStorage to track user visits.

In this tutorial, we'll walk through a simple way to hide an element when the user visits the page for the second time.

Implementation

We will use a Framer Override that checks if the user has visited the page before. If they have, the element will be hidden; otherwise, it will be shown and marked as visited.

Code Implementation

import { useEffect, useState } from "react"
import type { Override } from "framer"

/**
 * @framerDisableUnlink
 * BannerVisibilityOverride
 * This override manages the visibility of a banner based on the `visited` key in localStorage.
 * If the user has visited the page before (visited = 1), the banner is hidden.
 * If not, the banner is displayed, and the key is set to 1 in localStorage.
 */

export const BannerVisibilityOverride: Override = () => {
    const [isVisible, setIsVisible] = useState(true)
    const visitedKey = "visited"

    useEffect(() => {
        // Check if the user has already visited the page
        const visited = localStorage.getItem(visitedKey)

        if (visited === "1") {
            setIsVisible(false) // Hide banner
        } else {
            setIsVisible(true) // Show banner and mark as visited
            localStorage.setItem(visitedKey, "1")
        }
    }, []) // Run once on component mount

    // Apply the visibility logic
    return {
        style: {
            display: isVisible ? "flex" : "none", // Show as flex if visible, otherwise hide
            backgroundColor: "white",
            width: "100%",
        },
    }
}

Explanation

1. State Management (useState): We initialize a state variable isVisible to control the visibility of the element.

2. Checking Visit Status (localStorage):

   • We check if visited is set to 1 in localStorage.

   • If it exists, we hide the element.

   • If not, we show the element and set visited to 1 in localStorage.

3. Lifecycle (useEffect):

   • Runs once when the component mounts.

   • Ensures the check happens only once per page load.

Use Case

This method is useful for:

• Hiding promotional banners after the first visit

• Preventing repetitive UI elements from showing up for returning users

• Creating a more dynamic and personalized user experience

Limitations & Considerations

• localStorage is browser-based: If a user clears their cache or switches devices, they will see the element again.

• Session-specific behavior: If you want this to reset after a session, consider using sessionStorage instead.

Conclusion

By using localStorage in combination with useEffect, we can easily control the visibility of UI elements based on user visits. This is a lightweight and effective way to enhance user experience in Framer projects.