Component
Gravity Component for Framer
This is a Framer component that adds realistic gravity and physics to any set of frames. Just drop it into your project, set your objects, tweak gravity, bounce, or drag—and watch them fall, collide, and move like they’re alive.
Created by
About the resource
To use the Gravity Component in Framer, add the frames you want to simulate with physics. You can control how they're arranged using Distribution X (even or random spacing) and Distribution Y (vertical start position), while Distribution Angle lets you set their initial tilt. Adjust Gravity X and Y to pull objects horizontally or vertically, simulating gravity or anti-gravity effects.
Customize behavior with Body Friction for surface resistance, Restitution for bounce, and Density for how heavy objects feel. Choose between Rectangle or Circle shapes using Body Type, and make elements Draggable for user interaction. Turn on Preview to see the full simulation live in the Framer editor.
About the resource
To use the Gravity Component in Framer, add the frames you want to simulate with physics. You can control how they're arranged using Distribution X (even or random spacing) and Distribution Y (vertical start position), while Distribution Angle lets you set their initial tilt. Adjust Gravity X and Y to pull objects horizontally or vertically, simulating gravity or anti-gravity effects.
Customize behavior with Body Friction for surface resistance, Restitution for bounce, and Density for how heavy objects feel. Choose between Rectangle or Circle shapes using Body Type, and make elements Draggable for user interaction. Turn on Preview to see the full simulation live in the Framer editor.
About the resource
To use the Gravity Component in Framer, add the frames you want to simulate with physics. You can control how they're arranged using Distribution X (even or random spacing) and Distribution Y (vertical start position), while Distribution Angle lets you set their initial tilt. Adjust Gravity X and Y to pull objects horizontally or vertically, simulating gravity or anti-gravity effects.
Customize behavior with Body Friction for surface resistance, Restitution for bounce, and Density for how heavy objects feel. Choose between Rectangle or Circle shapes using Body Type, and make elements Draggable for user interaction. Turn on Preview to see the full simulation live in the Framer editor.
Properties of the gravity component in Framer.
Properties of the gravity component in Framer.
Properties of the gravity component in Framer.
