Popups and modals are useful in Framer when you need to capture emails, confirm actions, or show extra information without sending the visitor to another page. The good news is that you can build a Framer popup on click without writing code. Framer's Overlay feature, combined with component variants, handles the open and close states for you.
We build Framer templates, and one of the most common customization requests we get is adding a newsletter signup or contact modal. Done well, a popup keeps the main page clean while giving visitors a clear action. Done poorly, it annoys people and hurts conversions. This Framer popup tutorial focuses on the useful kind. This Framer popup tutorial focuses on the useful kind.
If you are new to Framer's component system, our Framer CMS tutorial and template customization guide are good companions to this walkthrough.
What does this Framer popup tutorial cover?
The best no-code approach is to build your popup as a component with two variants, closed and open, then use Framer's Overlay feature to trigger it. This gives you full control over the design, animation, and behavior while keeping the setup simple.
For more advanced triggers, such as exit intent or timed delays, you may want a paid component from the Framer Marketplace or a small custom code embed. But for click-triggered modals, native Framer overlays are enough.
Build the popup frame first
Start by designing the popup content on the canvas. Create a frame that contains your message, form, image, or buttons. Size it for the content, not the full screen. A centered modal is usually 400 to 600 pixels wide on desktop.
If the popup contains a form, add the form fields and a submit button inside the frame. If it is an announcement, keep the copy short and add one clear close button. Avoid packing too much into a popup. The whole point is to reduce friction, not add it.
Convert it into a component with open and close variants
Select your popup frame and convert it into a component. In Framer, you can do this with the keyboard shortcut or the component menu. Name it clearly, such as "Newsletter Popup."
Now create two variants:
- Closed variant: opacity 0, scale 0.95, pointer events none, or position it off-canvas.
- Open variant: opacity 1, scale 1, pointer events auto, centered on screen.
Set up an interaction between the variants. The open variant should animate from the closed variant with a spring or ease-out timing. Add a second interaction for closing, so the popup fades and scales back down.
Add the overlay layer
A modal needs a dimmed background behind it. Create a full-screen frame that covers the entire viewport. Set its background to a dark color with reduced opacity, such as black at 60%. Place this overlay behind your popup content in the layer order.
Make the overlay part of the component so it animates with the popup. In the closed variant, the overlay should have opacity 0. In the open variant, opacity 1. This gives the familiar modal backdrop effect.
For a screen-centered modal, set both the overlay and popup container to fixed positioning. This keeps the popup centered even when the visitor scrolls.
Trigger the popup on click
Now add a trigger element on your main page. This is usually a button labeled "Sign up," "Get in touch," or "Learn more." Select the button, then in the properties panel click Overlay and choose Fixed.
Set the overlay to show on click. Then connect it to your popup component. When a visitor clicks the button, Framer will display your popup component as a fixed overlay on top of the page.
This is the core of any Framer popup on click setup. The trigger can be a button, a link, an image, or any interactive element.
Add a close button and outside-click behavior
Every popup needs an obvious way out. Add a close button inside your popup component, usually an X icon in the top-right corner. Select it and add an interaction that switches the component back to the closed variant.
For outside-click closing, you can make the dimmed overlay itself tappable. Add an interaction to the overlay layer that triggers the close transition. When a visitor clicks the dark area, the modal closes. This matches the behavior people expect from modal windows.
Test both closing methods on desktop and mobile. A modal that traps mobile users is a conversion killer.
Set fixed positioning for screen-centered modals
If you want your popup to appear centered on the screen regardless of scroll position, use fixed positioning. In the popup component, set the container frame to fixed and center it horizontally and vertically. Set width and height to auto or a specific value that fits your design.
On mobile, consider making the popup take most of the screen width with a small margin. A desktop-centered modal that is 500 pixels wide will feel tiny and awkward on a phone if you do not adjust it.
Style and animate the popup states
Keep the animation fast and subtle. A 200 to 300 millisecond fade and scale transition feels responsive. Avoid long, bouncy entrances that delay the user. The popup is a tool, not a showcase.
Use Framer's smart animation between variants so the transition is smooth. Make sure text and buttons inside the popup have enough contrast against the background. If your popup contains a form, style focus states clearly so visitors know where they are typing.
When to use a Framer Marketplace popup instead
Native Framer overlays work for most click-triggered modals. But there are cases where a Marketplace component saves time:
- Exit-intent popups: These trigger when a visitor moves to close the browser tab. Native Framer does not detect exit intent, so you need a component or custom code.
- Timed delay popups: If you want a popup to appear after 10 seconds or after scrolling 50% of the page, a Marketplace component handles the logic for you.
- Cookie banners and age gates: These have specific legal and persistence requirements that specialized components manage better.
- Complex multi-step modals: If your popup is more like a wizard or checkout flow, a pre-built component may give you better state management.
Search the Framer Marketplace for "popup" or "modal" to see current options. Many are one-time purchases and drop straight into your project.
Frequently asked questions
Can you make a popup in Framer without code?
Yes. Framer's Overlay feature lets you create click-triggered popups and modals without any custom code. You design the popup as a component, add an overlay trigger to a button, and set the show behavior to click.
How do you close a Framer modal?
Add a close button inside the popup component and link it to the closed variant. You can also add a close interaction to the dimmed overlay background so the modal closes when a visitor clicks outside the popup.
Can Framer popups trigger on page load or scroll?
Not natively. Framer overlays are designed around click or hover triggers. For timed, scroll-based, or exit-intent triggers, you need a Framer Marketplace component or a small custom code embed.
Final tip from this Framer popup tutorial
Popups work when they feel helpful, not when they feel like a trap. Keep the design simple, the copy short, the close button obvious, and the trigger relevant. A visitor who clicks "Get the guide" expects a form. A visitor who is interrupted five seconds after landing expects to leave.
This Framer popup tutorial gives you the foundation for the good kind. Build your popup as a component, use an overlay trigger, animate it cleanly, and test closing behavior on every breakpoint.
Once your popup is working, make sure the rest of your launch setup is solid. Connect a custom domain with our Framer custom domain guide, then run through our Framer SEO checklist before publishing. If you want a template that already includes modal-friendly components, browse our Framer templates.
