Radial stagger

In this example below you will see how to do a Radial stagger with some HTML / CSS and Javascript

https://greensock.com/forums/topic/16750-radial-stagger

Thumbnail
This awesome code was written by Manfred Kempener, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Manfred Kempener ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Radial stagger</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg id="Radar_-colour" data-name="Radar -colour" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1334 1334"><defs><style>.cls-1{fill:#bd464a;}</style></defs><title>Radar_colour</title><path class="cls-1" d="M709.43,210.93l-4.71,59.81c-10.46-.82-21.11-1.24-31.66-1.24a403.69,403.69,0,0,0-42.18,2.21L624.57,212A463.93,463.93,0,0,1,673,209.5c12.12,0,24.36.48,36.38,1.43"/><path class="cls-1" d="M613.68,212.07l7.82,59.49c-10.4,1.37-20.91,3.17-31.23,5.37a403.69,403.69,0,0,0-40.79,10.93l-18.56-57.06a463.93,463.93,0,0,1,46.88-12.57c11.85-2.52,23.93-4.59,35.88-6.17"/><path class="cls-1" d="M520.26,233.1l20,56.56c-9.89,3.5-19.79,7.45-29.43,11.74a403.69,403.69,0,0,0-37.63,19.18l-30-51.95a463.93,463.93,0,0,1,43.25-22c11.07-4.93,22.45-9.47,33.82-13.49"/><path class="cls-1" d="M433.25,273.09l31.34,51.16c-8.95,5.48-17.81,11.41-26.35,17.61a403.69,403.69,0,0,0-32.82,26.58l-40.17-44.57A463.93,463.93,0,0,1,403,293.32c9.8-7.12,20-13.93,30.27-20.23"/><path class="cls-1" d="M356.46,330.3l41.3,43.53c-7.61,7.22-15.05,14.86-22.11,22.7a403.69,403.69,0,0,0-26.58,32.82L300.51,394.1a463.93,463.93,0,0,1,30.54-37.72c8.11-9,16.66-17.78,25.4-26.08"/><path class="cls-1" d="M293.24,402.22l49.44,34c-5.94,8.65-11.63,17.66-16.91,26.8a403.69,403.69,0,0,0-19.17,37.63l-54.82-24.38a463.93,463.93,0,0,1,22-43.25c6.06-10.49,12.59-20.85,19.43-30.79"/><path class="cls-1" d="M246.36,485.72l55.43,23c-4,9.69-7.71,19.7-11,29.73a403.69,403.69,0,0,0-10.93,40.8L221.2,566.76a463.93,463.93,0,0,1,12.56-46.88c3.74-11.52,8-23,12.6-34.16"/><path class="cls-1" d="M217.86,577.13l59,10.94c-1.91,10.32-3.44,20.87-4.55,31.36a403.69,403.69,0,0,0-2.21,42.18l-60,0a463.93,463.93,0,0,1,2.54-48.47c1.27-12.05,3-24.17,5.22-36"/><path class="cls-1" d="M209,672.48l60-1.56c.27,10.49,1,21.13,2.07,31.62a403.69,403.69,0,0,0,6.61,41.71L219,756.75a463.93,463.93,0,0,1-7.6-47.94c-1.27-12.05-2.07-24.27-2.38-36.33"/><path class="cls-1" d="M220.14,767.59l58.34-14c2.45,10.2,5.34,20.46,8.6,30.5a403.69,403.69,0,0,0,15.14,39.43l-54.8,24.43A463.93,463.93,0,0,1,230,802.63c-3.74-11.52-7.07-23.31-9.88-35"/><path class="cls-1" d="M250.82,858.29,305,832.47c4.52,9.47,9.48,18.91,14.76,28a403.69,403.69,0,0,0,23,35.42l-48.53,35.29a463.93,463.93,0,0,1-26.44-40.71c-6.06-10.49-11.76-21.33-17-32.22"/><path class="cls-1" d="M299.68,940.64l47.61-36.52c6.39,8.33,13.2,16.52,20.26,24.36a403.69,403.69,0,0,0,29.86,29.86L357.29,1003A463.93,463.93,0,0,1,323,968.63c-8.11-9-15.94-18.42-23.28-28"/><path class="cls-1" d="M364.6,1011l39-45.62c8,6.82,16.35,13.42,24.89,19.62a403.69,403.69,0,0,0,35.42,23l-30,52a463.93,463.93,0,0,1-40.71-26.43c-9.8-7.12-19.42-14.71-28.59-22.54"/><path class="cls-1" d="M442.74,1066.39l28.64-52.73c9.22,5,18.78,9.72,28.42,14a403.69,403.69,0,0,0,39.43,15.13l-18.52,57.07a463.93,463.93,0,0,1-45.31-17.39c-11.07-4.93-22.06-10.35-32.65-16.1"/><path class="cls-1" d="M530.68,1104.28l17-57.53c10.06,3,20.39,5.61,30.71,7.8a403.69,403.69,0,0,0,41.71,6.61l-6.25,59.67a463.93,463.93,0,0,1-47.94-7.59c-11.85-2.52-23.73-5.53-35.29-9"/><path class="cls-1" d="M624.57,1123.07l4.71-59.81c10.46.82,21.11,1.24,31.66,1.24a403.69,403.69,0,0,0,42.18-2.21l6.3,59.67A463.93,463.93,0,0,1,661,1124.5c-12.12,0-24.36-.48-36.38-1.43"/><path class="cls-1" d="M720.32,1121.93l-7.82-59.49c10.4-1.37,20.91-3.17,31.23-5.37a403.69,403.69,0,0,0,40.79-10.93l18.56,57.06a463.93,463.93,0,0,1-46.88,12.57c-11.85,2.52-23.93,4.59-35.88,6.17"/><path class="cls-1" d="M813.74,1100.9l-20-56.56c9.89-3.5,19.79-7.45,29.43-11.74a403.69,403.69,0,0,0,37.63-19.18l30,51.95a463.93,463.93,0,0,1-43.25,22c-11.07,4.93-22.45,9.47-33.82,13.49"/><path class="cls-1" d="M900.75,1060.91l-31.34-51.16c8.95-5.48,17.81-11.41,26.35-17.61a403.69,403.69,0,0,0,32.82-26.58l40.17,44.57A463.93,463.93,0,0,1,931,1040.68c-9.8,7.12-20,13.93-30.27,20.23"/><path class="cls-1" d="M977.54,1003.7l-41.3-43.53c7.61-7.22,15.05-14.86,22.11-22.7a403.69,403.69,0,0,0,26.58-32.82l48.56,35.25a463.93,463.93,0,0,1-30.54,37.72c-8.11,9-16.66,17.78-25.4,26.08"/><path class="cls-1" d="M1040.76,931.78l-49.44-34c5.94-8.65,11.63-17.66,16.91-26.8a403.69,403.69,0,0,0,19.17-37.63l54.82,24.38a463.93,463.93,0,0,1-22,43.25c-6.06,10.49-12.59,20.85-19.43,30.79"/><path class="cls-1" d="M1087.64,848.28l-55.43-23c4-9.69,7.71-19.7,11-29.73a403.69,403.69,0,0,0,10.93-40.8l58.69,12.45a463.93,463.93,0,0,1-12.56,46.88c-3.74,11.52-8,23-12.6,34.16"/><path class="cls-1" d="M1116.14,756.87l-59-10.94c1.91-10.32,3.44-20.87,4.55-31.36a403.69,403.69,0,0,0,2.21-42.18l60,0a463.93,463.93,0,0,1-2.54,48.47c-1.27,12.05-3,24.17-5.22,36"/><path class="cls-1" d="M1125,661.52l-60,1.56c-.27-10.49-1-21.13-2.07-31.62a403.69,403.69,0,0,0-6.61-41.71l58.68-12.5a463.93,463.93,0,0,1,7.6,47.94c1.27,12.05,2.07,24.27,2.38,36.33"/><path class="cls-1" d="M1113.86,566.41l-58.34,14c-2.45-10.2-5.34-20.46-8.6-30.5a403.69,403.69,0,0,0-15.14-39.43l54.8-24.43a463.93,463.93,0,0,1,17.4,45.31c3.74,11.52,7.07,23.31,9.88,35"/><path class="cls-1" d="M1083.18,475.71,1029,501.53c-4.52-9.47-9.48-18.91-14.76-28a403.69,403.69,0,0,0-23-35.42l48.53-35.29a463.93,463.93,0,0,1,26.44,40.71c6.06,10.49,11.76,21.33,17,32.22"/><path class="cls-1" d="M1034.32,393.36l-47.61,36.52c-6.39-8.33-13.2-16.52-20.26-24.36a403.69,403.69,0,0,0-29.86-29.86L976.71,331A463.93,463.93,0,0,1,1011,365.37c8.11,9,15.94,18.42,23.28,28"/><path class="cls-1" d="M969.4,323l-39,45.62c-8-6.82-16.35-13.42-24.89-19.62a403.69,403.69,0,0,0-35.42-23l30-52a463.93,463.93,0,0,1,40.71,26.43c9.8,7.12,19.42,14.71,28.59,22.54"/><path class="cls-1" d="M891.26,267.61l-28.64,52.73c-9.22-5-18.78-9.72-28.42-14a403.69,403.69,0,0,0-39.43-15.13l18.52-57.07a463.93,463.93,0,0,1,45.31,17.39c11.07,4.93,22.06,10.35,32.65,16.1"/><path class="cls-1" d="M803.32,229.72l-17,57.53c-10.06-3-20.39-5.61-30.71-7.8a403.69,403.69,0,0,0-41.71-6.61l6.25-59.67A463.93,463.93,0,0,1,768,220.75c11.85,2.52,23.73,5.53,35.29,9"/></svg>

<svg id="Radar02" data-name="Radar -colour" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1334 1334"><defs><style>.cls-1{fill:#bd464a;}</style></defs><title>Radar_colour</title><path class="cls-1" d="M709.43,210.93l-4.71,59.81c-10.46-.82-21.11-1.24-31.66-1.24a403.69,403.69,0,0,0-42.18,2.21L624.57,212A463.93,463.93,0,0,1,673,209.5c12.12,0,24.36.48,36.38,1.43"/><path class="cls-1" d="M613.68,212.07l7.82,59.49c-10.4,1.37-20.91,3.17-31.23,5.37a403.69,403.69,0,0,0-40.79,10.93l-18.56-57.06a463.93,463.93,0,0,1,46.88-12.57c11.85-2.52,23.93-4.59,35.88-6.17"/><path class="cls-1" d="M520.26,233.1l20,56.56c-9.89,3.5-19.79,7.45-29.43,11.74a403.69,403.69,0,0,0-37.63,19.18l-30-51.95a463.93,463.93,0,0,1,43.25-22c11.07-4.93,22.45-9.47,33.82-13.49"/><path class="cls-1" d="M433.25,273.09l31.34,51.16c-8.95,5.48-17.81,11.41-26.35,17.61a403.69,403.69,0,0,0-32.82,26.58l-40.17-44.57A463.93,463.93,0,0,1,403,293.32c9.8-7.12,20-13.93,30.27-20.23"/><path class="cls-1" d="M356.46,330.3l41.3,43.53c-7.61,7.22-15.05,14.86-22.11,22.7a403.69,403.69,0,0,0-26.58,32.82L300.51,394.1a463.93,463.93,0,0,1,30.54-37.72c8.11-9,16.66-17.78,25.4-26.08"/><path class="cls-1" d="M293.24,402.22l49.44,34c-5.94,8.65-11.63,17.66-16.91,26.8a403.69,403.69,0,0,0-19.17,37.63l-54.82-24.38a463.93,463.93,0,0,1,22-43.25c6.06-10.49,12.59-20.85,19.43-30.79"/><path class="cls-1" d="M246.36,485.72l55.43,23c-4,9.69-7.71,19.7-11,29.73a403.69,403.69,0,0,0-10.93,40.8L221.2,566.76a463.93,463.93,0,0,1,12.56-46.88c3.74-11.52,8-23,12.6-34.16"/><path class="cls-1" d="M217.86,577.13l59,10.94c-1.91,10.32-3.44,20.87-4.55,31.36a403.69,403.69,0,0,0-2.21,42.18l-60,0a463.93,463.93,0,0,1,2.54-48.47c1.27-12.05,3-24.17,5.22-36"/><path class="cls-1" d="M209,672.48l60-1.56c.27,10.49,1,21.13,2.07,31.62a403.69,403.69,0,0,0,6.61,41.71L219,756.75a463.93,463.93,0,0,1-7.6-47.94c-1.27-12.05-2.07-24.27-2.38-36.33"/><path class="cls-1" d="M220.14,767.59l58.34-14c2.45,10.2,5.34,20.46,8.6,30.5a403.69,403.69,0,0,0,15.14,39.43l-54.8,24.43A463.93,463.93,0,0,1,230,802.63c-3.74-11.52-7.07-23.31-9.88-35"/><path class="cls-1" d="M250.82,858.29,305,832.47c4.52,9.47,9.48,18.91,14.76,28a403.69,403.69,0,0,0,23,35.42l-48.53,35.29a463.93,463.93,0,0,1-26.44-40.71c-6.06-10.49-11.76-21.33-17-32.22"/><path class="cls-1" d="M299.68,940.64l47.61-36.52c6.39,8.33,13.2,16.52,20.26,24.36a403.69,403.69,0,0,0,29.86,29.86L357.29,1003A463.93,463.93,0,0,1,323,968.63c-8.11-9-15.94-18.42-23.28-28"/><path class="cls-1" d="M364.6,1011l39-45.62c8,6.82,16.35,13.42,24.89,19.62a403.69,403.69,0,0,0,35.42,23l-30,52a463.93,463.93,0,0,1-40.71-26.43c-9.8-7.12-19.42-14.71-28.59-22.54"/><path class="cls-1" d="M442.74,1066.39l28.64-52.73c9.22,5,18.78,9.72,28.42,14a403.69,403.69,0,0,0,39.43,15.13l-18.52,57.07a463.93,463.93,0,0,1-45.31-17.39c-11.07-4.93-22.06-10.35-32.65-16.1"/><path class="cls-1" d="M530.68,1104.28l17-57.53c10.06,3,20.39,5.61,30.71,7.8a403.69,403.69,0,0,0,41.71,6.61l-6.25,59.67a463.93,463.93,0,0,1-47.94-7.59c-11.85-2.52-23.73-5.53-35.29-9"/><path class="cls-1" d="M624.57,1123.07l4.71-59.81c10.46.82,21.11,1.24,31.66,1.24a403.69,403.69,0,0,0,42.18-2.21l6.3,59.67A463.93,463.93,0,0,1,661,1124.5c-12.12,0-24.36-.48-36.38-1.43"/><path class="cls-1" d="M720.32,1121.93l-7.82-59.49c10.4-1.37,20.91-3.17,31.23-5.37a403.69,403.69,0,0,0,40.79-10.93l18.56,57.06a463.93,463.93,0,0,1-46.88,12.57c-11.85,2.52-23.93,4.59-35.88,6.17"/><path class="cls-1" d="M813.74,1100.9l-20-56.56c9.89-3.5,19.79-7.45,29.43-11.74a403.69,403.69,0,0,0,37.63-19.18l30,51.95a463.93,463.93,0,0,1-43.25,22c-11.07,4.93-22.45,9.47-33.82,13.49"/><path class="cls-1" d="M900.75,1060.91l-31.34-51.16c8.95-5.48,17.81-11.41,26.35-17.61a403.69,403.69,0,0,0,32.82-26.58l40.17,44.57A463.93,463.93,0,0,1,931,1040.68c-9.8,7.12-20,13.93-30.27,20.23"/><path class="cls-1" d="M977.54,1003.7l-41.3-43.53c7.61-7.22,15.05-14.86,22.11-22.7a403.69,403.69,0,0,0,26.58-32.82l48.56,35.25a463.93,463.93,0,0,1-30.54,37.72c-8.11,9-16.66,17.78-25.4,26.08"/><path class="cls-1" d="M1040.76,931.78l-49.44-34c5.94-8.65,11.63-17.66,16.91-26.8a403.69,403.69,0,0,0,19.17-37.63l54.82,24.38a463.93,463.93,0,0,1-22,43.25c-6.06,10.49-12.59,20.85-19.43,30.79"/><path class="cls-1" d="M1087.64,848.28l-55.43-23c4-9.69,7.71-19.7,11-29.73a403.69,403.69,0,0,0,10.93-40.8l58.69,12.45a463.93,463.93,0,0,1-12.56,46.88c-3.74,11.52-8,23-12.6,34.16"/><path class="cls-1" d="M1116.14,756.87l-59-10.94c1.91-10.32,3.44-20.87,4.55-31.36a403.69,403.69,0,0,0,2.21-42.18l60,0a463.93,463.93,0,0,1-2.54,48.47c-1.27,12.05-3,24.17-5.22,36"/><path class="cls-1" d="M1125,661.52l-60,1.56c-.27-10.49-1-21.13-2.07-31.62a403.69,403.69,0,0,0-6.61-41.71l58.68-12.5a463.93,463.93,0,0,1,7.6,47.94c1.27,12.05,2.07,24.27,2.38,36.33"/><path class="cls-1" d="M1113.86,566.41l-58.34,14c-2.45-10.2-5.34-20.46-8.6-30.5a403.69,403.69,0,0,0-15.14-39.43l54.8-24.43a463.93,463.93,0,0,1,17.4,45.31c3.74,11.52,7.07,23.31,9.88,35"/><path class="cls-1" d="M1083.18,475.71,1029,501.53c-4.52-9.47-9.48-18.91-14.76-28a403.69,403.69,0,0,0-23-35.42l48.53-35.29a463.93,463.93,0,0,1,26.44,40.71c6.06,10.49,11.76,21.33,17,32.22"/><path class="cls-1" d="M1034.32,393.36l-47.61,36.52c-6.39-8.33-13.2-16.52-20.26-24.36a403.69,403.69,0,0,0-29.86-29.86L976.71,331A463.93,463.93,0,0,1,1011,365.37c8.11,9,15.94,18.42,23.28,28"/><path class="cls-1" d="M969.4,323l-39,45.62c-8-6.82-16.35-13.42-24.89-19.62a403.69,403.69,0,0,0-35.42-23l30-52a463.93,463.93,0,0,1,40.71,26.43c9.8,7.12,19.42,14.71,28.59,22.54"/><path class="cls-1" d="M891.26,267.61l-28.64,52.73c-9.22-5-18.78-9.72-28.42-14a403.69,403.69,0,0,0-39.43-15.13l18.52-57.07a463.93,463.93,0,0,1,45.31,17.39c11.07,4.93,22.06,10.35,32.65,16.1"/><path class="cls-1" d="M803.32,229.72l-17,57.53c-10.06-3-20.39-5.61-30.71-7.8a403.69,403.69,0,0,0-41.71-6.61l6.25-59.67A463.93,463.93,0,0,1,768,220.75c11.85,2.52,23.73,5.53,35.29,9"/></svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/radial-stagger-bRMPyJ */
#Radar_-colour, #Radar02{width:40%; height:auto; float:left;}

.cls-1{
  visibility:hidden;
}

/*Downloaded from https://www.codeseek.co/mikeK/radial-stagger-bRMPyJ */

// more info:  https://greensock.com/docs/TimelineMax/staggerTo()

TweenMax.staggerTo('#Radar_-colour .cls-1',1,{autoAlpha:1},0.4)

TweenMax.staggerTo('#Radar02 .cls-1',1,{autoAlpha:1},-0.4) // neg. stagger value = starting with the last element

Comments