<div class="circles">
<div class="circle"></div>
<div class="radius"></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);
}

.radius {
	width:15vw;
	height:2px;
	background:red;
	position:absolute;
	top:20vw;
	left:20vw;
}

.right {
	position:absolute;

	left:35vw;
	top:0vw;
	z-index:-1;

}

gsap.config({trialWarn: false});
const circle = document.querySelector(".circle")
const radius = document.querySelector(".radius")
console.clear()


	let tl = gsap.timeline({repeat:10})
	
	tl.set(circle, {transformOrigin:"-15vw 2.5vw", opacity:1})
   tl.set(radius, {transformOrigin:"0% 50%"})
	tl.to([circle, radius], {rotation:-360, ease:"none"})

	tl.set(circle, {transformOrigin:"20vw 2.5vw", rotation:0})
   tl.set(radius, {x:"20vw", rotation:0,transformOrigin:"100% 50%"})
	tl.to([circle, radius], {rotation:360,  ease:"none"})

let c = true
document.addEventListener("click", ()=> {
 	c = !c
	gsap.set(radius, {opacity:+c})
})

tl.timeScale(0.2)


// 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