Guide
- Complex
- Interactions
Guide
- Complex
- Interactions
Guide
- Complex
- Interactions
How to Use Events in Framer for Complex Interactions
In this Framer blog, I'm talking about one of the lesser-known features in Framer: events. I believe if you master this, you can build much more complex animations and interactions with nested components. Make sure you watch the full video, and let me know in the comments if anything is still unclear!
Posted by
Nandi
Table of contents
What are events?
Think of Events as communication signals between elements in your project. They let one element tell another to do something, even if they live in completely different layers or component hierarchies.
For example:
You have a button inside a card component, and you want that button to open a full-screen overlay. Normally, that’s tricky because you can’t assign an overlay directly to something nested inside another component. That’s exactly the kind of situation where Events shine.
What are events?
Think of Events as communication signals between elements in your project. They let one element tell another to do something, even if they live in completely different layers or component hierarchies.
For example:
You have a button inside a card component, and you want that button to open a full-screen overlay. Normally, that’s tricky because you can’t assign an overlay directly to something nested inside another component. That’s exactly the kind of situation where Events shine.
What are events?
Think of Events as communication signals between elements in your project. They let one element tell another to do something, even if they live in completely different layers or component hierarchies.
For example:
You have a button inside a card component, and you want that button to open a full-screen overlay. Normally, that’s tricky because you can’t assign an overlay directly to something nested inside another component. That’s exactly the kind of situation where Events shine.
Event from button inside card component.
Event from button inside card component.
Event from button inside card component.
Setting up a simple example
Start with a simple setup:
A button that says Open Image.
An overlay that displays an image when triggered.
You can assign an overlay by selecting the button, going to the Overlays section in the right panel, and choosing between Relative or Fixed.
Relative overlays behave like dropdowns — they appear near the element.
Fixed overlays cover the whole screen and stay in place.
So far, pretty simple. But things get interesting when you try to use that same button inside a component.
The problem with nested components
Let’s say you move your button inside a card component. Now you want the button to open an overlay, but when you try assigning it, Framer applies the overlay to the entire card, not just the button.
Click anywhere on the card, and the overlay appears. Not great. You only want the button click to trigger it. This is where Events save the day.
Creating a custom event
Go inside the component (double-click to enter edit mode).
Select the button you want to act as the trigger.
On the right panel, open Interactions → click + → and select Create Event.
You can name it something like openOverlay.
Now, this button will fire the openOverlay event whenever it’s clicked — but that event can be listened to from higher up, like at the card or even the page level.
Setting up a simple example
Start with a simple setup:
A button that says Open Image.
An overlay that displays an image when triggered.
You can assign an overlay by selecting the button, going to the Overlays section in the right panel, and choosing between Relative or Fixed.
Relative overlays behave like dropdowns — they appear near the element.
Fixed overlays cover the whole screen and stay in place.
So far, pretty simple. But things get interesting when you try to use that same button inside a component.
The problem with nested components
Let’s say you move your button inside a card component. Now you want the button to open an overlay, but when you try assigning it, Framer applies the overlay to the entire card, not just the button.
Click anywhere on the card, and the overlay appears. Not great. You only want the button click to trigger it. This is where Events save the day.
Creating a custom event
Go inside the component (double-click to enter edit mode).
Select the button you want to act as the trigger.
On the right panel, open Interactions → click + → and select Create Event.
You can name it something like openOverlay.
Now, this button will fire the openOverlay event whenever it’s clicked — but that event can be listened to from higher up, like at the card or even the page level.
Setting up a simple example
Start with a simple setup:
A button that says Open Image.
An overlay that displays an image when triggered.
You can assign an overlay by selecting the button, going to the Overlays section in the right panel, and choosing between Relative or Fixed.
Relative overlays behave like dropdowns — they appear near the element.
Fixed overlays cover the whole screen and stay in place.
So far, pretty simple. But things get interesting when you try to use that same button inside a component.
The problem with nested components
Let’s say you move your button inside a card component. Now you want the button to open an overlay, but when you try assigning it, Framer applies the overlay to the entire card, not just the button.
Click anywhere on the card, and the overlay appears. Not great. You only want the button click to trigger it. This is where Events save the day.
Creating a custom event
Go inside the component (double-click to enter edit mode).
Select the button you want to act as the trigger.
On the right panel, open Interactions → click + → and select Create Event.
You can name it something like openOverlay.
Now, this button will fire the openOverlay event whenever it’s clicked — but that event can be listened to from higher up, like at the card or even the page level.
Creating custom event.
Creating custom event.
Creating custom event.
Understanding root events
When you create an event, Framer attaches it to a root trigger, something like a click or hover. If you go one level deeper (inside the button), you’ll see this trigger listed as Root Event.
That’s the foundation, it’s what actually starts the chain. You can even rename it (e.g., rootEvent) and change what causes it, maybe onClick, onMouseEnter, etc.
Then, on your card level, you can connect that root event to your openOverlay event. In other words:
Button click → fires root event → triggers openOverlay → opens overlay
Connecting events across layers
Once you’ve set up your events correctly, head back up to the page level. Now, when you open the Overlays panel, you’ll see openOverlay listed as an option.
Select it, choose Fixed Overlay, and paste in your image or whatever content you want to show. Now, when you click the button inside the card, the overlay opens. Perfect.
Using events for variant transitions
Overlays are just the beginning. You can also use events to trigger variant transitions.
Let’s say your card has two variants:
Variant 1: Normal
Variant 2: Faded (lower opacity)
You can use your event connection to make the card transition between these two variants when the button is clicked.
That means:
Clicking the button inside the card fires an event.
That event triggers a variant transition at the card level.
You can build really modular, reusable components this way, each one with internal triggers that communicate with parent layers.
Extending events across multiple nesting levels
What if your design is really nested, like multiple layers of components inside components? No problem. You can just chain events through multiple levels.
Each level “listens” for one event and “fires” another that bubbles up further until it reaches the element you want to control.
For example:
Button → fires root event
Card → listens for root event → fires openOverlay
Page → listens for openOverlay → shows overlay
This structure gives you full control over complex interactions, even when elements are deeply nested.
Why events are a game-changer
Once you start using events, you’ll realize how flexible Framer really is. You can:
Trigger overlays from deeply nested elements.
Transition between variants conditionally.
Chain multiple events to build custom interactions.
Keep your components clean and modular.
It’s like giving every element in your site the ability to talk to each other, all visually, no code required.
Wrapping up
Events might seem confusing at first, but once you understand how root events and triggers work, they open up a whole new world of interaction design inside Framer.
If you’ve ever struggled to connect interactions between nested components, give this a try.
Understanding root events
When you create an event, Framer attaches it to a root trigger, something like a click or hover. If you go one level deeper (inside the button), you’ll see this trigger listed as Root Event.
That’s the foundation, it’s what actually starts the chain. You can even rename it (e.g., rootEvent) and change what causes it, maybe onClick, onMouseEnter, etc.
Then, on your card level, you can connect that root event to your openOverlay event. In other words:
Button click → fires root event → triggers openOverlay → opens overlay
Connecting events across layers
Once you’ve set up your events correctly, head back up to the page level. Now, when you open the Overlays panel, you’ll see openOverlay listed as an option.
Select it, choose Fixed Overlay, and paste in your image or whatever content you want to show. Now, when you click the button inside the card, the overlay opens. Perfect.
Using events for variant transitions
Overlays are just the beginning. You can also use events to trigger variant transitions.
Let’s say your card has two variants:
Variant 1: Normal
Variant 2: Faded (lower opacity)
You can use your event connection to make the card transition between these two variants when the button is clicked.
That means:
Clicking the button inside the card fires an event.
That event triggers a variant transition at the card level.
You can build really modular, reusable components this way, each one with internal triggers that communicate with parent layers.
Extending events across multiple nesting levels
What if your design is really nested, like multiple layers of components inside components? No problem. You can just chain events through multiple levels.
Each level “listens” for one event and “fires” another that bubbles up further until it reaches the element you want to control.
For example:
Button → fires root event
Card → listens for root event → fires openOverlay
Page → listens for openOverlay → shows overlay
This structure gives you full control over complex interactions, even when elements are deeply nested.
Why events are a game-changer
Once you start using events, you’ll realize how flexible Framer really is. You can:
Trigger overlays from deeply nested elements.
Transition between variants conditionally.
Chain multiple events to build custom interactions.
Keep your components clean and modular.
It’s like giving every element in your site the ability to talk to each other, all visually, no code required.
Wrapping up
Events might seem confusing at first, but once you understand how root events and triggers work, they open up a whole new world of interaction design inside Framer.
If you’ve ever struggled to connect interactions between nested components, give this a try.
Understanding root events
When you create an event, Framer attaches it to a root trigger, something like a click or hover. If you go one level deeper (inside the button), you’ll see this trigger listed as Root Event.
That’s the foundation, it’s what actually starts the chain. You can even rename it (e.g., rootEvent) and change what causes it, maybe onClick, onMouseEnter, etc.
Then, on your card level, you can connect that root event to your openOverlay event. In other words:
Button click → fires root event → triggers openOverlay → opens overlay
Connecting events across layers
Once you’ve set up your events correctly, head back up to the page level. Now, when you open the Overlays panel, you’ll see openOverlay listed as an option.
Select it, choose Fixed Overlay, and paste in your image or whatever content you want to show. Now, when you click the button inside the card, the overlay opens. Perfect.
Using events for variant transitions
Overlays are just the beginning. You can also use events to trigger variant transitions.
Let’s say your card has two variants:
Variant 1: Normal
Variant 2: Faded (lower opacity)
You can use your event connection to make the card transition between these two variants when the button is clicked.
That means:
Clicking the button inside the card fires an event.
That event triggers a variant transition at the card level.
You can build really modular, reusable components this way, each one with internal triggers that communicate with parent layers.
Extending events across multiple nesting levels
What if your design is really nested, like multiple layers of components inside components? No problem. You can just chain events through multiple levels.
Each level “listens” for one event and “fires” another that bubbles up further until it reaches the element you want to control.
For example:
Button → fires root event
Card → listens for root event → fires openOverlay
Page → listens for openOverlay → shows overlay
This structure gives you full control over complex interactions, even when elements are deeply nested.
Why events are a game-changer
Once you start using events, you’ll realize how flexible Framer really is. You can:
Trigger overlays from deeply nested elements.
Transition between variants conditionally.
Chain multiple events to build custom interactions.
Keep your components clean and modular.
It’s like giving every element in your site the ability to talk to each other, all visually, no code required.
Wrapping up
Events might seem confusing at first, but once you understand how root events and triggers work, they open up a whole new world of interaction design inside Framer.
If you’ve ever struggled to connect interactions between nested components, give this a try.
