![]() ![]() This is how you expose control over props via the Framer X UI. It has a single property, text, with a title of “Text”. Go to the source code of your component and take a look at the render function. If you replace “Hello world!”, your component will update with the input text. Notice in the right-hand inspector there’s a section named after your component with a text input labelled “Text”. Go back to your editor and highlight your component. ![]() New Framer interactions! Expose pose controls It’ll react to your hovering as expected. You can add this to the Framer X editor by dragging and dropping it in place.Ĭlick the play icon in the top and hover over your new component. In the components panel you’ll see your new component. The only Framer X-specific code in here is a static property called propert圜ontrols, which we’ll explore in a moment.įirst, import Pose and make a simple hoverable component: You’ll be greeted with a TypeScript file containing some simple React code. Click that, give your component a name, choose “from code” and press “Create and edit”. Create a posed Framer componentĪt the bottom of the Framer X Component panel, there’s a button labelled “New Component”. I’m also unclear as to whether yarn dependencies are saved to the project file itself, as Show Project Folder opens a directory in the app cache. The current limitation with this process is you have to repeat it for every project you want to use Pose in. This folder is a typical yarn package, so you can add Pose by running yarn add react-pose. Then, in VS Code’s file browser, right click in the project root and choose “Open in Terminal”. If you’re using VS Code, drag and drop the highlighted folder onto the VS Code dock icon. Open this folder in your terminal of choice. You should have the container folder highlighted. With our project open in Framer X, go to File > Show Project Folder. ![]() Install Poseįirst we need to add Pose to our Framer project. You can also already use Framer X to test animations by exposing pose logic via the UI.īut there are currently limitations, and we’ll take a look at those, too. It’s early days at the moment so integration isn’t seamless but it’s already possible to add UI events like drag, hover and press. Framer X beta invites are going out and it’s already possible to use Pose in Framer X prototypes. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |