Welcome, weary internet traveller. You’ve stumbled onto a great slice of the internet.

Keyframes is a creative community. Share your #wip, get #feedback, find inspiration, and chat with people who make things. It is a bunker from the rest of the garbage internet. No popularity contests here. No circle jerks. No regular jerks. Just a wholesome place to shoot the shit and be real about what you’re making.

You can post in public, or private (with a Plus account). Use it to improve your work, or just feel good about creating things again.

Come on in! We hope you enjoy your stay.

Register here for a very fun time ✨️

Or log in if you’re returning. (Welcome back!)

All posts tagged “framerx”

Bottom Sheet by Iván Flores — Framer X Store

Download this package for Framer X, a game-changing new product that makes interaction design easy for everyone.

I just did an update on the BottomSheet component for Framer X. Now it's not blocking pointer events, so you can interact with the elements behind it!

The best part of this is learning React and the new Framer library 🤯

I want to learn how to build code components into Framer X and improve my skill with React.

Do you think this component could help you to prototype something that you have in mind?

Need help manipulating a component in FramerX
import * as React from "react"; import { PropertyControls, ControlType } from "framer"; import { Chat } from "./canvas"; const style: React.CSSProperties = { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", color: "#8855FF", background: "rgba(136, 85, 255, 0.1)", overflow: "hidden", }; // Define type of property interface Props { text: string; } export class embedTest extends React.Component<Props> { // Set default properties static defaultProps = { text: "Hello World!" } // Items shown in property panel static propertyControls: PropertyControls = { text: { type: ControlType.String, title: "Text" }, } render() { return <div style={style}> {this.props.text} <Chat /> </div>; } }

I'm trying to manipulate the properties of Chat , a "design" component in FramerX. I've imported it, and it renders.

What's the best way to position it inside my embedTest component? I can pass props to it, but not all of them seem to work predictably?

Should I be positioning it inside a wrapper and manipulating that?

I wanna pin it to the left of the parent container, and have its position animatable.

Bit confused about how you're supposed to mix design & code components.

FramerX Source: https://cl.ly/79dbf10ab6b8
FramerX docs: https://framer.gitbook.io/framer/

Playing with FramerX, learning how to create the code components and the design features. The best way to learn is to look the code from other components and take what you need. Boom.

So far this BottomSheet code component inspirited on Maps by Apple. WIP! I hope be able so publish the code into the Framer Store later this week.