We use cookies to personalize content and ads, to offer features for social media and to analyze the access to our website. We also share information about your use of our website with our social media, weaving and analytics partners. Our partners may combine this information with other information that you have provided to them or that they have collected as part of your use of the Services. You accept our cookies when you click "Allow cookies" and continue to use this website.

Share data between code components in FramerX

At zauberware we love to build prototypes with FramerX. We also love to write React components in FramerX! If you have never created a react component before I recommend you to do this how-to first.

CodingSimon Franzen –
23 December 2018

Your prototype usually needs click handlers, animations, transitions etc. Let's dive into a real world example and I show you how you can connect clicks with animations and how to share data between code components.

As an example we will create a button component and a menu component. The click on the button should slide in the menu.

Steps to create a menu toggler in FramerX:

Create a simple Menu component

Create a Button

Setup a Menu Code Override in FramerX

Setup toggler with onTap

Using framers Animatable

1. Create a simple Menu component

Let's start with the Menu we want to slide in from the top. Go to the component tab in FramerX and create a new code component:

Add a property isOpen to the Menu component. Dependent on this property we let the Menu slide in or up.

// Define type of property
interface Props {
isOpen: boolean;
}

Add a default value for isOpen. I would say: false

// Set default properties
static defaultProps = {
isOpen: false
}

To test the component view Controls in FramerX you could add a property control as well

You are looking for someone to solve your problem. And here are just a few nice people sitting and waiting to just do that. Please send us a message to hello@zauberware.com or call us at +49 8051 988 69 46.