Developers

Search

Using event variables

Events in Framer allow actions in components to trigger changes in parent component or on the canvas, such as opening and closing overlays. This guide explains how to add events to create seamless interactions across components.

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. See Using Events for nested interactions in Framer.

However, manually adding events can be useful for more complex workflows or when you need greater control over when certain interactions trigger.

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.

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. See Using Events for nested interactions in Framer.

However, manually adding events can be useful for more complex workflows or when you need greater control over when certain interactions trigger.

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.

FAQ

  • How does Framer handle event variables for nested components?

    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.

  • When should I manually add event variables in Framer?

    Manually adding events can be useful for more complex workflows or when you need greater control over when certain interactions trigger.

  • How can I use a button inside a card to open and close a fixed overlay using event variables?

    Design a button component and add an interaction with a new event (e.g., 'Open overlay'). Place the button inside a card component and add another event variable to the card to expose the button’s event. Design a fixed overlay component and, in its settings, set 'Show On' to the 'Open overlay' event. To close the overlay, create a 'Close overlay' event and add an interaction to the overlay component that triggers this event.

Updated

Related articles

Using layout templates

Using text styles

Using Triggers

Why aren’t my text style breakpoints working in components?

Adding custom fonts