Using event variables

In most cases, Framer generates event variables automatically when you add interactions to nested components. For example, if a component within another component has an interaction, Framer detects it and sets up the required events.

However, manually adding events can be useful for more complex workflows or when you need greater control over interactions, such as triggering animations on mouse enter or element appearance.

Example: Using a button in a card to open a fixed overlay

Suppose you want a button inside a card to open a fixed overlay displaying additional details. Since a fixed overlay can’t exist directly within the card component, you can connect the button to the overlay using events.

Steps to set up events in Framer

1. Design a button component in your project. In the interactions panel, click the “+” icon, select “New Event”, and name it (e.g., “Open overlay”).

2. Create a card component and add the button inside it. This button will act as the trigger.

3. Add another event variable to the card component to expose the button’s event outside the card. This makes the button’s interaction accessible from the main canvas.

4. Design a fixed overlay component. In the overlay settings, under “Show On”, select the “Open overlay” event. Now, clicking the button will trigger the overlay to appear.

5. To close the overlay, create a “Close overlay” event. Add an interaction to the overlay component, and in the interaction settings, choose the “Close overlay” event.

Event variables in Framer are powerful tools, especially for nested components. They enable elements like buttons within a card to trigger actions—such as opening or closing overlays—elsewhere in your project. Try applying events to other scenarios, such as menu items triggering different variants in a parent component, to unlock new ways for components to interact dynamically.