Guide
- Interactions
- Elements
Guide
- Interactions
- Elements
Guide
- Interactions
- Elements
How to Trigger Interactions with Any Element in Framer
In this Framer blog, I'm introducing a game-changing solution for one of Framer's biggest limitations: cross-component interactions. You'll learn how to make any elements interact with each other anywhere on your site, without wrapping everything in a single component. Say goodbye to complex workarounds and hello to clean, maintainable interactions.
Posted by
Nandi
Table of contents
The old way
Here’s a typical scenario: you’ve got a pricing page with a little toggle at the top to switch between Monthly and Yearly pricing. Naturally, you want the cards below to update when you hit that toggle.
In native Framer logic, you’d need to:
Wrap the toggle and all the pricing cards in one giant component.
Create variants for Monthly and Yearly.
Link the toggle to change those variants.
Pray it still behaves well when you try to make your page responsive.
And that’s the problem, once everything’s locked in a component, your layout gets stiff. Responsiveness? Broken. Layout freedom? Gone.
It’s a nightmare if your site has multiple sections, or you want to trigger something on a completely different part of the page.
The old way
Here’s a typical scenario: you’ve got a pricing page with a little toggle at the top to switch between Monthly and Yearly pricing. Naturally, you want the cards below to update when you hit that toggle.
In native Framer logic, you’d need to:
Wrap the toggle and all the pricing cards in one giant component.
Create variants for Monthly and Yearly.
Link the toggle to change those variants.
Pray it still behaves well when you try to make your page responsive.
And that’s the problem, once everything’s locked in a component, your layout gets stiff. Responsiveness? Broken. Layout freedom? Gone.
It’s a nightmare if your site has multiple sections, or you want to trigger something on a completely different part of the page.
The old way
Here’s a typical scenario: you’ve got a pricing page with a little toggle at the top to switch between Monthly and Yearly pricing. Naturally, you want the cards below to update when you hit that toggle.
In native Framer logic, you’d need to:
Wrap the toggle and all the pricing cards in one giant component.
Create variants for Monthly and Yearly.
Link the toggle to change those variants.
Pray it still behaves well when you try to make your page responsive.
And that’s the problem, once everything’s locked in a component, your layout gets stiff. Responsiveness? Broken. Layout freedom? Gone.
It’s a nightmare if your site has multiple sections, or you want to trigger something on a completely different part of the page.
Wrapper component.
Wrapper component.
Wrapper component.
The solution
This is where the magic comes in. With the Cross Component Interactions component, you can trigger changes between elements that aren’t in the same component, and keep your site flexible, responsive, and tidy.
Here’s how it works:
The component has two modes:
Trigger
Target
And you can drop it anywhere on your page—no wrapping required.
Setting up the trigger
Let’s use our Monthly/Yearly toggle example. Copy the Cross Component Interactions component into your project. You’ll find it in your Assets panel under the “Framer University” folder.
Find the variant where the action happens—say, when someone clicks the “Monthly” button.
Drop the Cross Component Interactions component inside the inactive Monthly variant (because that’s when the user is actually switching modes). Set its mode to Trigger.
Now, tweak a few settings:
Set width & height to Fit content
Position it absolute so it doesn’t affect layout
Give it a unique ID like monthly
Set the trigger to happen onClick
Do the same for the Yearly variant. Just duplicate the component, change the ID to yearly, and drop it into the inactive Yearly variant. You now have invisible triggers for each button.
Setting up the target
Now let’s hook up the pricing cards. Find the cards section. Drop the Cross Component Interactions component into that part of your canvas.
This time, set the mode to Target.
Then:
Use the same ID (monthly or yearly) to connect it to the trigger
Set the action you want to happen when that trigger fires—like switching to a new variant or revealing a hidden layer.
Repeat this for each target element you want to respond to the toggle. And just like that—you’ve connected two totally separate parts of your site. No wrapping. No layout headaches. Full responsiveness preserved.
The solution
This is where the magic comes in. With the Cross Component Interactions component, you can trigger changes between elements that aren’t in the same component, and keep your site flexible, responsive, and tidy.
Here’s how it works:
The component has two modes:
Trigger
Target
And you can drop it anywhere on your page—no wrapping required.
Setting up the trigger
Let’s use our Monthly/Yearly toggle example. Copy the Cross Component Interactions component into your project. You’ll find it in your Assets panel under the “Framer University” folder.
Find the variant where the action happens—say, when someone clicks the “Monthly” button.
Drop the Cross Component Interactions component inside the inactive Monthly variant (because that’s when the user is actually switching modes). Set its mode to Trigger.
Now, tweak a few settings:
Set width & height to Fit content
Position it absolute so it doesn’t affect layout
Give it a unique ID like monthly
Set the trigger to happen onClick
Do the same for the Yearly variant. Just duplicate the component, change the ID to yearly, and drop it into the inactive Yearly variant. You now have invisible triggers for each button.
Setting up the target
Now let’s hook up the pricing cards. Find the cards section. Drop the Cross Component Interactions component into that part of your canvas.
This time, set the mode to Target.
Then:
Use the same ID (monthly or yearly) to connect it to the trigger
Set the action you want to happen when that trigger fires—like switching to a new variant or revealing a hidden layer.
Repeat this for each target element you want to respond to the toggle. And just like that—you’ve connected two totally separate parts of your site. No wrapping. No layout headaches. Full responsiveness preserved.
The solution
This is where the magic comes in. With the Cross Component Interactions component, you can trigger changes between elements that aren’t in the same component, and keep your site flexible, responsive, and tidy.
Here’s how it works:
The component has two modes:
Trigger
Target
And you can drop it anywhere on your page—no wrapping required.
Setting up the trigger
Let’s use our Monthly/Yearly toggle example. Copy the Cross Component Interactions component into your project. You’ll find it in your Assets panel under the “Framer University” folder.
Find the variant where the action happens—say, when someone clicks the “Monthly” button.
Drop the Cross Component Interactions component inside the inactive Monthly variant (because that’s when the user is actually switching modes). Set its mode to Trigger.
Now, tweak a few settings:
Set width & height to Fit content
Position it absolute so it doesn’t affect layout
Give it a unique ID like monthly
Set the trigger to happen onClick
Do the same for the Yearly variant. Just duplicate the component, change the ID to yearly, and drop it into the inactive Yearly variant. You now have invisible triggers for each button.
Setting up the target
Now let’s hook up the pricing cards. Find the cards section. Drop the Cross Component Interactions component into that part of your canvas.
This time, set the mode to Target.
Then:
Use the same ID (monthly or yearly) to connect it to the trigger
Set the action you want to happen when that trigger fires—like switching to a new variant or revealing a hidden layer.
Repeat this for each target element you want to respond to the toggle. And just like that—you’ve connected two totally separate parts of your site. No wrapping. No layout headaches. Full responsiveness preserved.
Pricing cards.
Pricing cards.
Pricing cards.
Why this is a game-changer
This method gives you total flexibility:
No more giant, bloated components
Keep everything modular and easy to maintain
Build truly interactive experiences without wrecking your layout
Works anywhere on the page
You can use it for things like:
Navigation buttons that trigger modal content
Sticky toggles that update data below the fold
Global state switches for themes, languages, pricing, etc.
Ready to try It?
Grab the Cross Component Interactions component, paste it into your project, and start experimenting. It’s free, super lightweight, and honestly… a bit of a game-changer. Hope this helps you build cleaner, smarter interactions in Framer. Catch you in the next one!
Why this is a game-changer
This method gives you total flexibility:
No more giant, bloated components
Keep everything modular and easy to maintain
Build truly interactive experiences without wrecking your layout
Works anywhere on the page
You can use it for things like:
Navigation buttons that trigger modal content
Sticky toggles that update data below the fold
Global state switches for themes, languages, pricing, etc.
Ready to try It?
Grab the Cross Component Interactions component, paste it into your project, and start experimenting. It’s free, super lightweight, and honestly… a bit of a game-changer. Hope this helps you build cleaner, smarter interactions in Framer. Catch you in the next one!
Why this is a game-changer
This method gives you total flexibility:
No more giant, bloated components
Keep everything modular and easy to maintain
Build truly interactive experiences without wrecking your layout
Works anywhere on the page
You can use it for things like:
Navigation buttons that trigger modal content
Sticky toggles that update data below the fold
Global state switches for themes, languages, pricing, etc.
Ready to try It?
Grab the Cross Component Interactions component, paste it into your project, and start experimenting. It’s free, super lightweight, and honestly… a bit of a game-changer. Hope this helps you build cleaner, smarter interactions in Framer. Catch you in the next one!
