Component
Circle Animator Component in Framer
This is the Circle Animator component for Framer, from Daniel’s work as seen on fancycomponents.dev. It lets you animate images or components in a smooth, fully customizable circular motion. Feel free to copy the component into your projects to create engaging, interactive circular animations.
About the resource
To use the Circle Animator, start by toggling Preview to show or hide the animation while editing. Choose a Mode: either Images (upload your own) or Components (connect Framer components). In Components mode, add your elements under Content, and adjust the Count to set how many items appear in the circle.
Use Sizing to decide between Fixed (uniform size) or Fit content (natural size), and adjust Width, Height, and Radius to control size and spacing. Speed sets how fast the circle rotates, while Direction lets you choose clockwise or counter-clockwise motion.
With Orientation, select Fixed to rotate items as they move or Pin to keep them upright. If using Fixed orientation, customize Rotation (Fixed angle, Radial, or Tangent) and fine-tune the Angle. You can also pause the animation on hover using the On Hover control.
About the resource
To use the Circle Animator, start by toggling Preview to show or hide the animation while editing. Choose a Mode: either Images (upload your own) or Components (connect Framer components). In Components mode, add your elements under Content, and adjust the Count to set how many items appear in the circle.
Use Sizing to decide between Fixed (uniform size) or Fit content (natural size), and adjust Width, Height, and Radius to control size and spacing. Speed sets how fast the circle rotates, while Direction lets you choose clockwise or counter-clockwise motion.
With Orientation, select Fixed to rotate items as they move or Pin to keep them upright. If using Fixed orientation, customize Rotation (Fixed angle, Radial, or Tangent) and fine-tune the Angle. You can also pause the animation on hover using the On Hover control.
About the resource
To use the Circle Animator, start by toggling Preview to show or hide the animation while editing. Choose a Mode: either Images (upload your own) or Components (connect Framer components). In Components mode, add your elements under Content, and adjust the Count to set how many items appear in the circle.
Use Sizing to decide between Fixed (uniform size) or Fit content (natural size), and adjust Width, Height, and Radius to control size and spacing. Speed sets how fast the circle rotates, while Direction lets you choose clockwise or counter-clockwise motion.
With Orientation, select Fixed to rotate items as they move or Pin to keep them upright. If using Fixed orientation, customize Rotation (Fixed angle, Radial, or Tangent) and fine-tune the Angle. You can also pause the animation on hover using the On Hover control.
The circle animator component properties in Framer.
The circle animator component properties in Framer.
The circle animator component properties in Framer.
