🗺️ getting Oriented
Overlays let you present additional content without making the visitor navigate around or leave the current page. Whether you’re collecting emails, showcasing media, or displaying extra details on hover, overlays are an efficient way to support your visitors goals in a way that avoids cluttering the page.
In this lesson, you’ll learn the difference between fixed and relative overlays, when to use each, and how to configure things like position, alignment, dismiss settings, and collision behaviour. You’ll also create your own overlay step-by-step.
Learning Outcomes
By the end of this lesson, you’ll be able to:
Distinguish between fixed and relative overlays in Framer
Create modal overlays with input forms and triggers
Apply and configure popovers, dropdowns, and tooltips
Adjust positioning, alignment, dismissal behaviour, and edge collision rules
Contents
What are Fixed Overlays
Create a Fixed-Modal Overlay 🏋🏻♂️
What are Relative Overlays?
Relative Overlays: Configurable Properties Explained
What Are Fixed Overlays?
Fixed overlays appear detached from the triggering element. What appears on screen appears in relation to the VIEWPORT.
Modals
A modal is essentially a popup that triggers when the user clicks or taps something. It blocks interaction with the rest of the page until closed.
Popups
A popup triggers automatically based on timing or scroll behaviour, without user input.
Unfortunately, Framer’s overlay tool doesn’t support time-based triggers. The closest out-of-the-box-popup solution is a fixed modal that triggers on hover (⚠️ just don't make the element too big).
If time/scroll based triggers are required, you'll need to use components, scripts, or plugins.
Toasts
A toast is a small, temporary message that appears on screen to confirm an action or show a brief update.
i.e. success / error / try again / failed etc.
Media Showcases
Fixed overlays are frequently used to make videos and galleries accessible without clogging up valuable on-screen real-estate.
🏋️♂️ Exercise: Create a Fixed-Modal Overlay
Let's jump into your project file and go through each section, making sure it links to the correct page.
🎯 Instructions
Follow along with interactive demo at the bottom of this section to create a fixed modal contact form.
🎯 Target
🛠️ What you'll Need
'Pop-Up' Content
A Trigger
You'll need to add an overlay to the 'Enquire' button below
Interactive Demo
Demo not appearing?
You can find it here: https://guides.uptrak.io/share/cmblk5cij000ak107e3jhpnjq/tour
What are Relative Overlays?
Relative overlays are called relative, as they are attached to a specific position RELATIVE to an element.
Popovers
A popover is a small floating panel that appears near a clicked element. It shows extra options or info and closes when you click away.
Hover your cursor over the below image for a demo.
Dropdowns
A dropdown is a hidden list of options that appears when you click or tap a trigger. It lets users choose from a set of actions or navigate to different pages.
Member Benefits
Tooltips
How to make them
Demo not appearing?
You can find it here: https://guides.uptrak.io/share/cmbltxuhz000ljp071i8hedwf/tour
Relative Overlays: Configurable Properties Explained
Position & Alignment
Position: Set where the overlay appears relative to the trigger element (Top, Bottom, Left, Right).
Alignment: Adjust where the overlay canvas/pop up should appear relative to the trigger element (Left, Center, or Right).
Offset
Fine-tune the overlay’s position relative to the trigger element with X (horizontal) and Y (vertical) spacing.
The following overlays all have
Pos:⬆️ Aln➡️⬅️
Dismiss
Controls how the overlay closes
Auto closes when the cursor exists the overlay frame.
Click requires another click.
⚠️⚠️IMPORTANT NOTE! If you plan to have this menu live in mobile or tablet mode, then CLICK is the option you want to set.
HOVER Will create ISSUES and Glitches for your User Experience!
Collision
Collision: Prevent the overlay from getting cut off by the edge of a frame.
Auto repositions if needed
None disables this
The pixel value sets how close it can get to the edge.
