Show Popup - Free

Apply the “Frame” override to the frame you wish to toggle the visibility. Set this frame to be sticky or fixed position on your site.
Apply the “Trigger” override to the button or component that will trigger the frame’s visibility on click
Customize the duration in line 6 of the code. 5 seconds = 5000

Code Preview

import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { motion, AnimatePresence, easeInOut } from "framer-motion"
import { useEffect } from "react"

const duration = 4000 // 4 seconds duration
const useStore = createStore({
    isVisible: false,
})

export function Trigger(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        return (
            <Component
                {...props}
                onClick={() => {
                    setStore({ isVisible: true })
                }}
            />
        )
    }
}

export function Frame(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        useEffect(() => {
            if (store.isVisible) {
                const timer = setTimeout(() => {
                    setStore({ isVisible: false })
                }, duration)

                return () => {
                    clearTimeout(timer)
                }
            }
        }, [store.isVisible, setStore])

        return (
            <AnimatePresence>
                {store.isVisible && (
                    <Component
                        {...props}
                        initial={{ y: 80, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        exit={{ y: 80, opacity: 0 }}
                        transition={{ easing: "easeInOut" }}
                    />
                )}
            </AnimatePresence>
        )
    }
}

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.