Docs
→
Circling Elements

Circling Elements

A component that creates a circling effect on its children.

Curated.For you.

View Gallery

image
image
image
image
image
image
image
image

Source code

Copy and paste the following code into your project:

Add the following animation and keyframes to your tailwind.config.js file:

module.exports = {
  // ...
  theme: {
    // ...
    animation: {
      "circling": "circling calc(var(--duration)*1s) linear infinite",
    },
    keyframes: {
      "circling": {
        "0%": {
          transform:
            "rotate(calc(var(--offset) * 1deg)) translate(calc(var(--radius) * 1px), 0) rotate(calc(var(--offset) * -1deg))",
        },
        "100%": {
          transform:
            "rotate(calc(360deg + (var(--offset) * 1deg))) translate(calc(var(--radius) * 1px), 0) rotate(calc(-360deg + (var(--offset) * -1deg)))",
        },
      },
    },
  },
};

Usage

You only need to wrap your elements with the CirclingElements component, everything else is taken care of by the component itself.

Under the hood, the component wraps all the children in a relative container, then sets all children to absolute to allow the circling movement.

The animation is done with only a few animation keyframes, as you can see in the tailwind config above.

Props

PropTypeDefaultDescription
children*ReactNode-The elements to be circled
radiusnumber100The radius of the circle in pixels
durationnumber10The duration of one complete rotation in seconds
classNamestring-Additional CSS classes for the container