Infinite Orbit Animation with CSS Trigonometry

1993 zegarkidawida

Open In Editor Video Publish Your Code

Infinite Orbit Animation with CSS Trigonometry

<section class="section">
    <div class="section-wrapper">
      <header class="header">
        <hgroup class="hgroup">
          <h2 class="headline">Meet Our Team!</h2>
          <p class="tagline">Creative minds shaping the future</p>
        </hgroup>
        <a href="#" class="section-link"> View All </a>
      </header>
      
      <ul class="cards" style="--nth-siblings: 5">
        <li class="card" style="--nth-child: 1">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-1.avif"
                width="144" height="144" alt="Ethan B., DevOps Engineer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Ethan B.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">DevOps Engineer</p>
                <p class="team-bio">
                  Master of servers, pipelines, and keeping things running
                  smoothly.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 2">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-2.avif"
                width="144" height="144" alt="Ava L., UI/UX Designer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Ava L.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">UI/UX Designer</p>
                <p class="team-bio">
                  Turning ideas into stunning designs, one pixel at a time.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 3">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-3.avif"
                width="144" height="144" alt="Liam J., Mobile Developer" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Liam J.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Mobile Developer</p>
                <p class="team-bio">
                  Crafting sleek, intuitive apps for users on the go.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 4">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-4.avif"
                width="144" height="144" alt="Sophia K., Data Scientist" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Sophia K.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Data Scientist</p>
                <p class="team-bio">
                  Decoding patterns and finding insights in the chaos.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 5">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-5.avif"
                width="144" height="144" alt="Codey X, AI Code Assistant" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Codey X</h3>
              <div class="team-content-wrapper">
                <p class="team-title">AI Code Assistant</p>
                <p class="team-bio">
                  Powered by algorithms, driven by collaboration.
                </p>
              </div>
            </div>
          </a>
        </li>
        <li class="card" style="--nth-child: 6">
          <a href="#" class="avatar-link-wrapper">
            <div class="visual">
              <img class="avatar-img"
                src="https://raw.githubusercontent.com/mobalti/modern-web-ui/refs/heads/main/css-trig-functions/images/img-6.avif"
                width="144" height="144" alt="Maya R., Project Manager" />
            </div>
            <div class="tooltiptext">
              <h3 class="team-name">Maya R.</h3>
              <div class="team-content-wrapper">
                <p class="team-title">Project Manager</p>
                <p class="team-bio">
                  Keeping the team in sync and deadlines on track.
                </p>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </section>

CSS

@layer reset, base, utilities, components, layout, overrides;

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --direction {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

:where(:not(dialog)) {
    margin: 0;
  }

:where(html) {
    -webkit-text-size-adjust: none;

@media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

:where(body) {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
  }
}

@layer base {
  html {
    --surface-1: oklch(20% 0.03 269);
    --surface-2: oklch(26% 0.04 269);
    --text-1: oklch(91% 0.03 61);
    --body: 400 1rem/1.5rem system-ui, sans-serif;
    --display: 400 3.562rem/4rem system-ui, sans-serif;
    --display-small: 400 2.25rem/2.75rem system-ui, sans-serif;
    --label: 500 0.875rem/1.25rem system-ui, sans-serif;
    --title: 400 1.375rem/1.75rem system-ui, sans-serif;
    color-scheme: dark;
  }

body {
    background-color: var(--surface-1);
    color: var(--text-1);
    font: var(--body);
  }
}

@layer layout {
  .section {
    display: grid;
    max-inline-size: 100%;
    min-block-size: 100svb;
    overflow-x: clip;
    padding-block: 80px;
    place-items: center;
  }

.section-wrapper {
    display: grid;
    place-items: center;
  }

.header {
    display: grid;
    place-items: center;
    gap: 16px;
    z-index: 2;

/* lg-n-above */
    @media (width >=1024px) {
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
    }
  }

.hgroup {
    display: grid;
    place-items: center;
    gap: 8px;
  }

.headline {
    font: var(--display-small);

/* lg-n-above */
    @media (width >=1200px) {
      font: var(--display);
    }
  }

.section-link {
    color: var(--text-1);
    text-decoration: underline;
    font: var(--label);

/* lg-n-below */
    @media (width < 1024px) {
      display: none;
    }
  }

.cards {
    list-style: none;
    padding: 0;

/* lg-n-below */
    @media (width < 1024px) {
      display: grid;
      grid-auto-flow: column;
      gap: 32px;
      max-inline-size: 100%;
      overflow-x: scroll;
      padding-block: 32px;
      padding-inline: 32px;
    }

/* lg-n-above */
    @media (width >=1024px) {
      --avatar-opacity: 1;
      --avatar-img-scale: 1;
      --tooltip-visibility: hidden;
      --tooltip-opacity: 0;
      --animation-state: running;

display: grid;
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
      min-block-size: 700px;
      place-items: center;

&:has(.avatar-link-wrapper:is(:hover, :focus-visible, :active)) {
        --animation-state: paused;
        /* Reduces opacity of non-hovered avatars to create a layered effect */
        --avatar-opacity: 0.4;
      }
    }
  }

.card {
    padding: 0;

/* lg-n-above */
    @media (width >=1024px) {
      --radius: min(620px, 40cqi);
      --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));
      --angle-offset: calc(var(--nth-child) * var(--offset-per-child));
      --inline-ratio: 1/1;
      /* Keeps the horizontal scaling unchanged */
      --block-ratio: 1/2;
      /* Reduces vertical scaling, making it an oval */

/* Adjusts tooltip direction based on avatar position */
      /* Future improvement: Replace with the sign() CSS function when it becomes widely supported */
      /* Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sign */
      --direction: min(max(calc(cos((var(--angle) + var(--angle-offset))) * -100), -1), 1);

/* Stack all cards in the same grid cell */
      grid-area: 1/1;

/* Based on Bramus' article, modified with inline/block ratios to create an oval shape */
      /* Source: https://web.dev/articles/css-trig-functions */

translate: calc(cos((var(--angle) + var(--angle-offset))) * var(--radius) * var(--inline-ratio))
        calc(sin((var(--angle) + var(--angle-offset))) * var(--radius) * var(--block-ratio) * -1);

animation: adjust-angle linear 40s infinite reverse var(--animation-state);
    }
  }

/* Continuously rotates the avatars in a circular motion */
  @keyframes adjust-angle {
    to {
      --angle: 360deg;
    }
  }

.avatar-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-1);

&:is(:hover, :focus-visible, :active) {
      --avatar-img-scale: 1.1;
      --avatar-opacity: 1;
      --tooltip-opacity: 1;
      --tooltip-visibility: visible;
    }

/* lg-n-below */
    @media (width < 1024px) {
      flex-direction: column;
      gap: 16px;
    }
  }

.visual {
    aspect-ratio: 1;
    border-radius: 1rem;
    box-shadow: 0 2px 4px 0 oklch(0 0 0 / 10%);
    inline-size: 240px;
    opacity: var(--avatar-opacity);
    overflow: clip;
    transition: opacity 0.3s ease;

/* lg-n-above */
    @media (width >=1024px) {
      inline-size: 144px;
      border-radius: 1e5px;
    }
  }

.avatar-img {
    background-color: var(--surface-2);
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    scale: var(--avatar-img-scale, 1);
    transition: scale 0.3s ease;
  }

.tooltiptext {
    display: grid;
    gap: 4px;

/* lg-n-above */
    @media (width >=1024px) {
      position: absolute;
      /* Adjusts tooltip placement based on avatar position */
      /* Moves the tooltip to the left or right depending on the avatar's location */
      /* --direction is either 1 (right) or -1 (left) */
      max-inline-size: 20ch;
      opacity: var(--tooltip-opacity);
      transition-duration: 0.3s;
      transition-property: opacity, visibility;
      transition-timing-function: ease;
      translate: 110% 0;
      visibility: var(--tooltip-visibility);

/* make the tooltips non-interactive */
      pointer-events: none;
      user-select: none;

/* Adjusts text alignment based on avatar position */
      /* Ensures the tooltip text aligns properly when shifted left or right */
      @container style(--direction: -1) {
        text-align: end;
        translate: -110% 0;
      }
    }
  }

.team-name {
    font: var(--title);
  }
}

Infinite Orbit Animation with CSS Trigonometry

Recommended

Credit Card animation using Paystack

Button Hover Animation

CSS Animated Login Form Design

HTML

CSS

JS

Recommended

Credit Card animation using Paystack

Button Hover Animation

CSS Animated Login Form Design

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS