---
title: "OrbitingCircles — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Plaiter HQ · Sections. Animated avatars and images rotating"
canonical: "https://framer.elliotli.dev/component/orbitingcircles"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/OrbitingCircles

# OrbitingCircles

Animated avatars and images rotating

[View on Framer](https://framer.com/marketplace/components/orbitingcircles/?via=elliot-li)

![OrbitingCircles preview image 1](https://framer.elliotli.dev/og/component/orbitingcircles/8db5e8f9fa3e5e8f/1600x1200.jpg)

## Summary

Animated avatars and images rotating

## Description

Orbiting Circles creates smooth circular motion by rotating image items around a central element using pure CSS animations. You can display one or two independent orbits, each with its own radius, rotation speed, direction, and start delay.

Each orbit distributes images evenly around the circle, making it perfect for showcasing avatars, logos, or feature highlights in a dynamic and visually balanced layout. Optional dashed paths can be displayed to visually show the orbit tracks.

A center image can be enabled to anchor the animation and act as a focal point. All images support adjustable sizing and object-fit modes, allowing you to control how each item is cropped or scaled inside its circular frame.

This component is fully responsive within its container and works well for hero sections, testimonials, team showcases, and brand ecosystems.

**Key Features**

Two independent orbit layersCustom radius and rotation speed per orbitReverse direction toggleStart delay for staggered motionEven image distribution around each circleOptional dashed orbit pathsOptional center image with custom sizeObject-fit controls for all imagesPure CSS animation for smooth performance

**Use Cases**

Team member showcasesCustomer avatar displaysLogo and partner carouselsFeature highlight animationsHero section visual accents

**Best Practices / Tips**

Use different speeds for each orbit to create depthEnable reverse direction on one orbit for dynamic contrastKeep image sizes small to avoid visual clutterUse dashed paths only when you want to emphasize motionCenter image works best as a logo or main profile

**What’s Included**

Orbit 1 image ring with full controlsOptional Orbit 2 image ringCenter image elementCustom animation timing and directionOptional orbit path indicators

**Who It’s For**

Designers building animated hero sectionsProduct teams showcasing users or partnersMarketing pages needing motion and depthNo-code builders adding visual storytelling

## Rank history [How rankings work →](/terms#rankings)

-   All · #6331

## Details

- **Author**: Plaiter HQ
- **Price**: $10.00
- **Published**: 2026-04-27
- **Updated**: 2026-04-27
- **Added**: 2026-01-18
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes