.wrapper
  - for (let i = 0; i < 10; i++) {
      .box
  - }

html, body
  width: 100%
  height: 100%
  font-family: Arial, sans-serif
  color: #fff
  font-size: 20px
  margin: 0

*
  position: relative
  box-sizing: border-box

body
  overflow: hidden
  background: #1d1d1d
  background-image: linear-gradient(12deg, rgba(193, 193, 193,0.05) 0%, rgba(193, 193, 193,0.05) 2%,rgba(129, 129, 129,0.05) 2%, rgba(129, 129, 129,0.05) 27%,rgba(185, 185, 185,0.05) 27%, rgba(185, 185, 185,0.05) 66%,rgba(83, 83, 83,0.05) 66%, rgba(83, 83, 83,0.05) 100%),linear-gradient(321deg, rgba(240, 240, 240,0.05) 0%, rgba(240, 240, 240,0.05) 13%,rgba(231, 231, 231,0.05) 13%, rgba(231, 231, 231,0.05) 34%,rgba(139, 139, 139,0.05) 34%, rgba(139, 139, 139,0.05) 71%,rgba(112, 112, 112,0.05) 71%, rgba(112, 112, 112,0.05) 100%),linear-gradient(236deg, rgba(189, 189, 189,0.05) 0%, rgba(189, 189, 189,0.05) 47%,rgba(138, 138, 138,0.05) 47%, rgba(138, 138, 138,0.05) 58%,rgba(108, 108, 108,0.05) 58%, rgba(108, 108, 108,0.05) 85%,rgba(143, 143, 143,0.05) 85%, rgba(143, 143, 143,0.05) 100%),linear-gradient(96deg, rgba(53, 53, 53,0.05) 0%, rgba(53, 53, 53,0.05) 53%,rgba(44, 44, 44,0.05) 53%, rgba(44, 44, 44,0.05) 82%,rgba(77, 77, 77,0.05) 82%, rgba(77, 77, 77,0.05) 98%,rgba(8, 8, 8,0.05) 98%, rgba(8, 8, 8,0.05) 100%),linear-gradient(334deg, hsl(247,0%,2%),hsl(247,0%,2%))
  
.wrapper
  height: 90%
  display: grid
  gap: 20px 0
  padding: 40px
  
  
.box
  width: 50px
  height: 50px
  border-radius: 50%
  background: pink
  

// 原codepen
// https://codepen.io/snorkltv/pen/VwKGVjb
// 注册插件
gsap.registerPlugin(GSDevTools)


let animation = gsap.to('.box', {
  x: 500,
  duration: 5,
  // 10个小球的变色规律是依次循环
  // red purple green red purple green red purple green red
  // background: gsap.utils.wrap(['red', 'purple', 'green']),
  
  // 10个小球的变色规律是 循环往复
  // red purple green purple red purple green purple red purple
  background: gsap.utils.wrapYoyo(['red', 'purple', 'green']),
  stagger: {
    each: 0.2
  }
})


GSDevTools.create({ animation })