CodePen Embed - Rolling balls animation

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 1000 500" style="enable-background:new 0 0 1000 600;" xml:space="preserve">
   <style type="text/css">
      .st0{fill:url(#ball_6_);stroke:#000000;stroke-miterlimit:10;}
      .st1{fill:url(#ball_7_);stroke:#000000;stroke-miterlimit:10;}
      .st2{fill:url(#ball_8_);stroke:#000000;stroke-miterlimit:10;}
      .st3{fill:url(#ball_9_);stroke:#000000;stroke-miterlimit:10;}
      .st4{fill:url(#ball_10_);stroke:#000000;stroke-miterlimit:10;}
      .st5{fill:url(#ball_11_);stroke:#000000;stroke-miterlimit:10;}
   </style>
   <linearGradient id="ball_6_" gradientUnits="userSpaceOnUse" x1="229.5" y1="153.5" x2="229.5" y2="193.5">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="7.234823e-003" style="stop-color:#F6F6F6"/>
      <stop  offset="4.673683e-002" style="stop-color:#C8C8C8"/>
      <stop  offset="9.125553e-002" style="stop-color:#9D9D9D"/>
      <stop  offset="0.1391" style="stop-color:#777777"/>
      <stop  offset="0.1912" style="stop-color:#575757"/>
      <stop  offset="0.2487" style="stop-color:#3B3B3B"/>
      <stop  offset="0.3137" style="stop-color:#252525"/>
      <stop  offset="0.3896" style="stop-color:#141414"/>
      <stop  offset="0.4834" style="stop-color:#090909"/>
      <stop  offset="0.615" style="stop-color:#020202"/>
      <stop  offset="0.9803" style="stop-color:#000000"/>
   </linearGradient>
   <circle id="ball" class="st0 ball" cx="229.5" cy="173.5" r="20"/>
   <linearGradient id="ball_7_" gradientUnits="userSpaceOnUse" x1="310.5" y1="153.5" x2="310.5" y2="193.5">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="7.234823e-003" style="stop-color:#F6F6F6"/>
      <stop  offset="4.673683e-002" style="stop-color:#C8C8C8"/>
      <stop  offset="9.125553e-002" style="stop-color:#9D9D9D"/>
      <stop  offset="0.1391" style="stop-color:#777777"/>
      <stop  offset="0.1912" style="stop-color:#575757"/>
      <stop  offset="0.2487" style="stop-color:#3B3B3B"/>
      <stop  offset="0.3137" style="stop-color:#252525"/>
      <stop  offset="0.3896" style="stop-color:#141414"/>
      <stop  offset="0.4834" style="stop-color:#090909"/>
      <stop  offset="0.615" style="stop-color:#020202"/>
      <stop  offset="0.9803" style="stop-color:#000000"/>
   </linearGradient>
   <circle id="ball_1_" class="st1 ball" cx="310.5" cy="173.5" r="20"/>
   <linearGradient id="ball_8_" gradientUnits="userSpaceOnUse" x1="391.5" y1="153.5" x2="391.5" y2="193.5">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="7.234823e-003" style="stop-color:#F6F6F6"/>
      <stop  offset="4.673683e-002" style="stop-color:#C8C8C8"/>
      <stop  offset="9.125553e-002" style="stop-color:#9D9D9D"/>
      <stop  offset="0.1391" style="stop-color:#777777"/>
      <stop  offset="0.1912" style="stop-color:#575757"/>
      <stop  offset="0.2487" style="stop-color:#3B3B3B"/>
      <stop  offset="0.3137" style="stop-color:#252525"/>
      <stop  offset="0.3896" style="stop-color:#141414"/>
      <stop  offset="0.4834" style="stop-color:#090909"/>
      <stop  offset="0.615" style="stop-color:#020202"/>
      <stop  offset="0.9803" style="stop-color:#000000"/>
   </linearGradient>
   <circle id="ball_2_" class="st2 ball" cx="391.5" cy="173.5" r="20"/>
   <linearGradient id="ball_9_" gradientUnits="userSpaceOnUse" x1="472.5" y1="153.5" x2="472.5" y2="193.5">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="7.234823e-003" style="stop-color:#F6F6F6"/>
      <stop  offset="4.673683e-002" style="stop-color:#C8C8C8"/>
      <stop  offset="9.125553e-002" style="stop-color:#9D9D9D"/>
      <stop  offset="0.1391" style="stop-color:#777777"/>
      <stop  offset="0.1912" style="stop-color:#575757"/>
      <stop  offset="0.2487" style="stop-color:#3B3B3B"/>
      <stop  offset="0.3137" style="stop-color:#252525"/>
      <stop  offset="0.3896" style="stop-color:#141414"/>
      <stop  offset="0.4834" style="stop-color:#090909"/>
      <stop  offset="0.615" style="stop-color:#020202"/>
      <stop  offset="0.9803" style="stop-color:#000000"/>
   </linearGradient>
   <circle id="ball_3_" class="st3 ball" cx="472.5" cy="173.5" r="20"/>
   <linearGradient id="ball_10_" gradientUnits="userSpaceOnUse" x1="553.5" y1="153.5" x2="553.5" y2="193.5">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="7.234823e-003" style="stop-color:#F6F6F6"/>
      <stop  offset="4.673683e-002" style="stop-color:#C8C8C8"/>
      <stop  offset="9.125553e-002" style="stop-color:#9D9D9D"/>
      <stop  offset="0.1391" style="stop-color:#777777"/>
      <stop  offset="0.1912" style="stop-color:#575757"/>
      <stop  offset="0.2487" style="stop-color:#3B3B3B"/>
      <stop  offset="0.3137" style="stop-color:#252525"/>
      <stop  offset="0.3896" style="stop-color:#141414"/>
      <stop  offset="0.4834" style="stop-color:#090909"/>
      <stop  offset="0.615" style="stop-color:#020202"/>
      <stop  offset="0.9803" style="stop-color:#000000"/>
   </linearGradient>
   <circle id="ball_4_" class="st4 ball" cx="553.5" cy="173.5" r="20"/>
   <linearGradient id="ball_11_" gradientUnits="userSpaceOnUse" x1="634.5" y1="153.5" x2="634.5" y2="193.5">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="7.234823e-003" style="stop-color:#F6F6F6"/>
      <stop  offset="4.673683e-002" style="stop-color:#C8C8C8"/>
      <stop  offset="9.125553e-002" style="stop-color:#9D9D9D"/>
      <stop  offset="0.1391" style="stop-color:#777777"/>
      <stop  offset="0.1912" style="stop-color:#575757"/>
      <stop  offset="0.2487" style="stop-color:#3B3B3B"/>
      <stop  offset="0.3137" style="stop-color:#252525"/>
      <stop  offset="0.3896" style="stop-color:#141414"/>
      <stop  offset="0.4834" style="stop-color:#090909"/>
      <stop  offset="0.615" style="stop-color:#020202"/>
      <stop  offset="0.9803" style="stop-color:#000000"/>
   </linearGradient>
   <circle id="ball_5_" class="st5 ball" cx="634.5" cy="173.5" r="20"/>
   </svg>

html, body{
    width: 100%;
    height: 100vh;
    margin: 0;
    margin-left: 1%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: hidden;
}

gsap.to('.ball', {
    duration: 3,
    x: 70,
    transformOrigin: "50% 50%",
    rotateZ: 360,
    ease: "back.out(1.7)",
    stagger: 0.5,
    repeat: -1,
})

Run Pen

This Pen is owned by Rahul Jain on CodePen.

See more by @rahuldkjain on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js