Animating a repeating conic gradient

I was working on a new website for my wife and we had the idea of creating an interesting effect within her main call-to-action. It involved a "sunburst" effect with a very subtle animation. The finished product can be seen below. I decided to write something up quick because I couldn't find any articles on this as I was researching it.

Unfortunately, there is no way to animate this with pure CSS, I had to use some JavaScript (gsap) to acheive the effect.

For the HTML, this effect actually has two things going on, a regular radial gradient applied to .blue-gradient-2 and then a "sunburst" effect using that doesn't contain color, just shading via rgba(0,0,0,.5);

Just show me the code #

html

<section class="py-8 px-4 blue-gradient-2">
  <div class="blue-gradient-bg-2"></div>
  <div class="max-w-5xl m-auto md:flex gap-4 items-center">
    <p
      class="text-xl md:text-xl text-white font-serif italic m-0 md:w-2/3 text-white"
    >
      Contact me for your free 15 minute phone consultation. I can help you
      decide if I’m a good fit for what you’d like to accomplish.
    </p>
    <a
      class="block text-xl w-full md:w-1/3 mt-4 md:mt-0 text-center button"
      href="/contact"
      >Free Consultation</a
    >
  </div>
</section>

css

.blue-gradient-2 {
  position: relative;
  background: white;
  background: radial-gradient(
    farthest-corner at 0px 0px,
    var(--main-color) 0%,
    rgba(18, 57, 111, 0.927) 100%
  );
  z-index: 1;
}

.blue-gradient-2 .blue-gradient-bg-2 {
  position: absolute;
  inset: 0;
  background-image: repeating-conic-gradient(
    from 0deg at 100% 100%,
    rgba(255, 255, 255, 0.5) 0 9deg,
    rgba(0, 0, 0, 0) 9deg 18deg
  );
  z-index: 2;
}

.blue-gradient-2 * {
  position: relative;
  z-index: 3;
}

js

This is really where the magic happens. GSAP takes over the heavy lifting and animates the conic-gradient's degree property smoothly.

gsap.fromTo(
  ".blue-gradient-bg-2",
  {
    "background-image":
      "repeating-conic-gradient(from 0deg at 50% 205%, rgba(0, 0, 0, .075) 0 9deg, rgba(0, 0, 0, 0) 9deg 18deg)",
  },
  {
    "background-image":
      "repeating-conic-gradient(from 45deg at 50% 205%, rgba(0, 0, 0, .075) 0 9deg, rgba(0, 0, 0, 0) 9deg 18deg)",
    duration: 90,
    repeat: -1,
  }
);