<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
	
</div>
<div class="circles right">
	
</div>

* {
	position:relative;
}

html {
	--color: red;
  --width: 40vw;
}

.circle {
	opacity:0;
	width:5vw;
	height:5vw;
	border-radius:50%;
	background:black;
	position:absolute;
	top:calc(20vw - 2.5vw);
	left:calc(var(--width) - 5vw);
	mix-blend-mode: multiply;
}

.circles {
	width: var(--width);
	height:var(--width);
/* 	background:rgb(0, 0, 0, 0.3); */
}

.right {
	position:absolute;
/* 	background:#cdcdcd; */
	left:35vw;
	top:0vw;
	z-index:-1;

}

gsap.config({trialWarn: false});
const circles = gsap.utils.toArray(".circle")
const main = gsap.timeline({repeat:30})
console.clear()
gsap.set(circles, {
  backgroundColor: (index, target, targets) => {
	 console.log((index / targets.length) * 120)
    let hue =  (index / targets.length) * 120
    return `hsl(${hue}, 80%, 50%)`
  }
})

circles.forEach( (circle, index) => {
	let tl = gsap.timeline({repeat:10})
	
	tl.set(circle, {transformOrigin:"-15vw 2.5vw", opacity:1})
	tl.to(circle, {rotation:-360, duration:1, ease:"none"})

	tl.set(circle, {transformOrigin:"20vw 2.5vw", rotation:0})
	tl.to(circle, {rotation:360, duration:1, ease:"none"})
	main.add(tl, index * 0.05) // change 0.05 to 0.1
	
})

main.timeScale(0.2)
//GSDevTools.create({animation:main})

// did you enjoy this?
// let me show you everything I know about GreenSock Animation
// full course bundle
// https://www.creativecodingclub.com/bundles/creative-coding-club