Cross Component Interactions in Framer

Copy component

Cross Component Interactions in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Cross Component Interactions in Framer

This is a Framer component for cross-component interactions. It lets you trigger variant switches in components from elements that aren’t inside them. Just set one as the trigger, the other as the target, match their IDs — and you’ve got clean, connected interactions without any nesting.

image of Nandi Muzsik
image of David
image of Prianca S.

Created by

,

and

Framer interface displaying 'Cross component interactions' with a glowing blue Framer logo and a clickable phone icon labeled 'Click Me' in the bottom right corner
Framer interface displaying 'Cross component interactions' with a glowing blue Framer logo and a clickable phone icon labeled 'Click Me' in the bottom right corner
Framer interface displaying 'Cross component interactions' with a glowing blue Framer logo and a clickable phone icon labeled 'Click Me' in the bottom right corner
Framer feature turning frame into component

Related Lesson

New in Framer: Cross Component Interactions (Full Tutorial)

Framer feature turning frame into component

Related Lesson

New in Framer: Cross Component Interactions (Full Tutorial)

Framer feature turning frame into component

Related Lesson

New in Framer: Cross Component Interactions (Full Tutorial)

About the resource

To use the Cross Component Interactions in Framer, start by setting the Mode to either Trigger or Target. A Trigger initiates the interaction, while a Target responds to it with variant changes. In the Trigger Controls, use a unique ID to link the trigger to one or more target components. Choose when the interaction should happen—on hover, click, or when the trigger appears on screen—and optionally set a Delay or keep it working even when the trigger is Off Screen.

In the Target Controls, connect the component that should animate or respond, and define its layout with Width and Height options.

Use Interactions to match the trigger's ID, choose whether to Repeat the animation or not, and specify a Variant if you're not cycling through multiple states. This setup allows you to create connected, coordinated behaviors between components—without wrapping them in a common component.

About the resource

To use the Cross Component Interactions in Framer, start by setting the Mode to either Trigger or Target. A Trigger initiates the interaction, while a Target responds to it with variant changes. In the Trigger Controls, use a unique ID to link the trigger to one or more target components. Choose when the interaction should happen—on hover, click, or when the trigger appears on screen—and optionally set a Delay or keep it working even when the trigger is Off Screen.

In the Target Controls, connect the component that should animate or respond, and define its layout with Width and Height options.

Use Interactions to match the trigger's ID, choose whether to Repeat the animation or not, and specify a Variant if you're not cycling through multiple states. This setup allows you to create connected, coordinated behaviors between components—without wrapping them in a common component.

About the resource

To use the Cross Component Interactions in Framer, start by setting the Mode to either Trigger or Target. A Trigger initiates the interaction, while a Target responds to it with variant changes. In the Trigger Controls, use a unique ID to link the trigger to one or more target components. Choose when the interaction should happen—on hover, click, or when the trigger appears on screen—and optionally set a Delay or keep it working even when the trigger is Off Screen.

In the Target Controls, connect the component that should animate or respond, and define its layout with Width and Height options.

Use Interactions to match the trigger's ID, choose whether to Repeat the animation or not, and specify a Variant if you're not cycling through multiple states. This setup allows you to create connected, coordinated behaviors between components—without wrapping them in a common component.

Framer interface showcasing setup for cross-component interactions using trigger and target modes with interaction ID and click event configuration

The trigger and target modes from the properties panel in the cross interactions component in Framer.

Framer interface showcasing setup for cross-component interactions using trigger and target modes with interaction ID and click event configuration

The trigger and target modes from the properties panel in the cross interactions component in Framer.

Framer interface showcasing setup for cross-component interactions using trigger and target modes with interaction ID and click event configuration

The trigger and target modes from the properties panel in the cross interactions component in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Digital sculpture card with zoom hover and selfie theme

    Image Zoom Repeat on Hover

    Component

    Digital sculpture card with zoom hover and selfie theme

    Image Zoom Repeat on Hover

    Component

    Digital sculpture card with zoom hover and selfie theme

    Image Zoom Repeat on Hover

    Component

  • Framer University text made of interactive animated particles

    Particles Text for Framer

    Component

    Framer University text made of interactive animated particles

    Particles Text for Framer

    Component

    Framer University text made of interactive animated particles

    Particles Text for Framer

    Component