#Frame

Set the CSS width property. Set to 200 by default. Accepts all CSS value types (including pixels, percentages, keywords and more).

// Pixels
<Frame width={100} />

// Percentages
<Frame width={"100%"} />

Set the CSS height property. Set to 200 by default. Accepts all CSS value types (including pixels, percentages, keywords and more).

// Pixels
<Frame height={100} />

// Percentages
<Frame height={"100%"} />

Shortcut for setting the width and height simultaneously.

<Frame size={100} />

Distance from the top in pixels. Set to 0 by default.

<Frame top={100} />

Distance from the right in pixels. Set to 0 by default.

<Frame right={100} />

Distance from the bottom in pixels. Set to 0 by default.

<Frame bottom={100} />

Distance from the left in pixels. Set to 0 by default.

<Frame left={100} />

Shortcut for centering Frames.

// Center
<Frame center />

// Center horizontally
<Frame center="x" />

// Center vertically
<Frame center="y" />

Set the CSS position property. Set to "absolute" by default.

<Frame position={"relative"} />

The React DOM style prop, useful for setting CSS properties that aren't explicitly exposed by Frame props.

<Frame style={{ mixBlendMode: "difference" }}  />

Defines whether or not the Frame is visible. Unlike opacity, this property cannot be animated. Set to true by default. Maps to CSS.

<Frame visible={false} />

Set the opacity value, which allows you to make elements semi-transparent or entirely hidden. Useful for show-and-hide animations. Set to 1 by default.

<Frame opacity={0.5} />

Set the background of a Frame. Supports color strings, color objects and images by using src. Set to a semi-transparent blue color by default. This will override the values set by the image property. To use a color and a image, use backgroundColor instead

<Frame background="#09F"/>
<Frame background={Color({r: 255, g: 0, b: 102})} />
<Frame background={{ alpha: 1, angle: 75, start: "#09F", end: "#F09"}} />
<Frame background={{ src: "https://example.com/logo.png"}} />

Set the background color of a Frame. Supports color strings and objects. Use this property to set a background color alongside the image property.

<Frame backgroundColor="#09F"/>
<Frame backgroundColor={Color({r: 255, g: 0, b: 102})} />

Sets a background image of a Frame. Will wrap the passed value in a url('') if needed.

<Frame image="https://source.unsplash.com/random" />

Set the color for text elements inside of a Frame. By default, text within Frames will be rendered in black.

<Frame color="#09F" />

Set the CSS border property, which accepts width, style and color. Set to "none" by default.

<Frame border="1px solid #09F" />

Set the CSS border-radius property, in pixels or percentages. Set to 0 by default.

// Radius with pixels
<Frame radius={10} />

// Radius with percentages
<Frame radius="50%" />

Set the CSS box-shadow property.

<Frame shadow="10px 5px 5px black" />

Set the CSS overflow property. Set to "visible" by default.

<Frame overflow="hidden" />

Set the CSS transform translateX property.

<Frame x={100} />

Set the CSS transform translateY property.

<Frame y={100} />

Set the CSS transform translateZ property.

<Frame z={100} />

Set the CSS transform rotate property in degrees.

<Frame rotate={45}/>

Set the CSS transform rotateX property in degrees.

<Frame rotateX={45}/>

Set the CSS transform rotateY property in degrees.

<Frame rotateY={45}/>

Set the CSS transform rotateZ property in degrees.

<Frame rotateZ={45}/>

Set the CSS transform scale property.

<Frame scale={1.5} />

Set the CSS transform scaleX property.

<Frame scaleX={1.5} />

Set the CSS transform scaleY property.

<Frame scaleY={2} />

Set the CSS transform skew property in degrees.

<Frame skew={15} />

Set the CSS transform skewX property in degrees.

<Frame skewX={15} />

Set the CSS transform skewY property in degrees.

<Frame skewY={15} />

Set the CSS transform originX property.

<Frame originX={0.5} />

Set the CSS transform originY property.

<Frame originY={0.5} />

Set the CSS transform originZ property. Defaults to px units.

<Frame originZ={100} />

Set the CSS perspective property.

<Frame perspective={500} />

Position the children of the frame in 3D space. Set to false by default.

<Frame preserve3d={true} />

Sets whether the back face is visible when turned towards the user. Set to true by default.

<Frame backfaceVisible={true} />

Properties, variant label or array of variant labels to start in.

Set to false to initialise with the values in animate (disabling the mount animation)

// As values
<Frame initial={{ opacity: 1 }} />

// As variant
<Frame initial="visible" variants={variants} />

// Multiple variants
<Frame initial={["visible", "active"]} variants={variants} />

// As false (disable mount animation)
<Frame initial={false} animate={{ opacity: 0 }} />

Values to animate to, variant label(s), or AnimationControls.

// As values
<Frame animate={{ opacity: 1 }} />

// As variant
<Frame animate="visible" variants={variants} />

// Multiple variants
<Frame animate={["visible", "active"]} variants={variants} />

// AnimationControls
<Frame animate={animation} />

A target to animate to when this component is removed from the tree.

This component **must** be the first animatable child of an AnimatePresence to enable this exit animation.

This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the AnimatePresence component will be unnecessary.

import { Frame, AnimatePresence } from 'framer'

export function MyComponent(props) {
  return (
    <AnimatePresence>
       {props.isVisible && (
         <Frame
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
         />
       )}
    </AnimatePresence>
  )
}

Default transition. If no transition is defined in animate, it will use the transition defined here.

const spring = {
  type: "spring",
  damping: 10,
  stiffness: 100
}

<Frame transition={spring} animate={{ scale: 1.2 }} />

Variants allow you to define animation states and organise them by name. They allow you to control animations throughout a component tree by switching a single animate prop.

Using transition options like delayChildren and staggerChildren, you can orchestrate when children animations play relative to their parent.

After passing variants to one or more Frame's variants prop, these variants can be used in place of values on the animate, initial, whileFocus, whileTap and whileHover props.

const variants = {
  active: {
    backgroundColor: "#f00"
  },
  inactive: {
    backgroundColor: "#fff",
    transition: { duration: 2 }
  }
}

<Frame variants={variants} animate="active" />

Properties or variant label to animate to while the component is pressed.

<Frame whileTap={{ scale: 0.8 }} />

Properties or variant label to animate to while the hover gesture is recognised.

<Frame whileHover={{ scale: 1.2 }} />

Enable dragging for this element. Set to false by default. Set true to drag in both directions. Set "x" or "y" to only drag in a specific direction.

<Frame drag="x" />

Applies constraints on the permitted draggable area.

It can accept an object of optional top, left, right, and bottom values, measured in pixels. This will define a distance the named edge of the draggable component.

Alternatively, it can accept a ref to another component created with React's useRef hook. This ref should be passed both to the draggable component's dragConstraints prop, and the ref of the component you want to use as constraints.

// In pixels
<Frame
  drag="x"
  dragConstraints={{ left: 0, right: 300 }}
/>

// As a ref to another component
function MyComponent() {
  const constraintsRef = useRef(null)

  return (
     <Frame ref={constraintsRef} width={400} height={400}>
         <Frame drag dragConstraints={constraintsRef} />
     </Frame>
  )
}

The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.

Set to 0.5 by default. Can also be set as false to disable movement.

By passing an object of top/right/bottom/left, individual values can be set per constraint. Any missing values will be set to 0.

<Frame
  drag={true}
  dragConstraints={{ left: 0, right: 300 }}
  dragElastic={0.2}
/>

Apply momentum from the pan gesture to the component when dragging finishes. Set to true by default.

<Frame
  drag={true}
  dragConstraints={{ left: 0, right: 300 }}
  dragMomentum={false}
/>

Allows you to change dragging inertia parameters. When releasing a draggable Frame, an animation with type inertia starts. The animation is based on your dragging velocity. This property allows you to customize it. See Inertia for all properties you can use.

<Frame
  drag={true}
  dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
/>

Allows drag gesture propagation to child components. Set to false by default.

<Frame drag="x" dragPropagation={true} />

Contains x and y values for the tap gesture relative to the device or page.

function onTapStart(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onTapStart={onTapStart} />

Contains x and y values for the distance moved since the last event.

function onPan(event, info) {
  console.log(info.delta.x, info.delta.y)
}

<Frame onPan={onPan} />

Contains x and y values for the distance moved from the first pan event.

function onPan(event, info) {
  console.log(info.offset.x, info.offset.y)
}

<Frame onPan={onPan} />

Contains x and y values for the current pan position relative to the device or page.

function onPan(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onPan={onPan} />

Contains x and y values for the current velocity of the pointer.

function onPan(event, info) {
  console.log(info.velocity.x, info.velocity.y)
}

<Frame onPan={onPan} />