rotating-scroll-down-circle

Summary

Bottom-right hero ornament: a circular SVG path with the text Scroll down — Scroll down — wrapping around it, scaled 2× and slowly rotating 360deg as the user scrolls. At its center sits a 40px dark arrow-down button anchored to #about for click-to-scroll. The text fill brightens from 40% white to 100% white on hover.

HTML structure (minimal)

<div class="mil-circle-text">
  <svg viewBox="0 0 300 300" class="mil-ct-svg mil-rotate" data-value="360">
    <defs>
      <path id="circlePath" d="M 150,150 m -60,0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0"/>
    </defs>
    <circle cx="150" cy="100" r="75" fill="none"/>
    <g>
      <use xlink:href="#circlePath" fill="none"/>
      <text style="letter-spacing: 6.5px">
        <textPath xlink:href="#circlePath">Scroll down - Scroll down - </textPath>
      </text>
    </g>
  </svg>
  <a href="#about" class="mil-button mil-arrow-place mil-icon-button mil-arrow-down"></a>
</div>

Key SCSS tokens

.mil-circle-text {
  position: absolute;
  right: 0; bottom: 90px;
  display: flex; justify-content: center; align-items: center;
  width: 140px; height: 140px;

  & .mil-ct-svg {
    transform: scale(2);
    width: 140px; height: 140px;

    & text {
      fill: $lt-40;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 500;
      transition: $t-md;
    }
  }

  & .mil-button { position: absolute; }

  &:hover svg text { fill: $light; }

  @media screen and (max-width: 992px) { display: none; }
}

Animation logic

// declarative rotation primitive
const rotate = document.querySelectorAll(".mil-rotate");
rotate.forEach((section) => {
  const value = $(section).data("value");
  gsap.fromTo(section,
    { rotate: 0 },
    { rotate: value,
      scrollTrigger: { trigger: section, scrub: true } }
  );
});

Notable details

• One reusable .mil-rotate primitive: any element with data-value="<deg>" becomes a scroll-rotated decoration.
• SVG <textPath> keeps the text on a circle without fragile per-letter rotation — adding/changing the slogan is a one-line markup edit.
• Center button uses the global .mil-arrow-place empty placeholder which receives a cloned arrow SVG at document ready — keeps the markup clean.
• transform: scale(2) lets the underlying SVG stay at 140px while displaying as 280px — handy if you want crisp text without extra CSS variables.

Use when

• Heroes that need a self-explanatory "scroll" affordance with a brand twist.
• Editorial sites where text-on-a-circle is part of the visual language.
• Replace any boring ↓ icon when you want personality without animation weight.

Caveats

• Hides below 992px (display: none) — design alternative scroll affordances for mobile.
• The decorative circle (<circle cx="150" cy="100" r="75">) is fill: none and unused beyond visual structure — could be removed without loss.
• Rotation scrubs throughout the page scroll, not just the hero — once you've scrolled to the bottom, the text has rotated 360deg. Acceptable but may surprise designers expecting hero-only motion.