<div aria-label="100 followers">
	<div class="one foo"></div>
	<div class="zero first"></div>
	<div class="zero second"></div>
</div>

$background: #111401;
$pink: #c51870;
$green: #1af802;
$blue: #05dbf8;
$white: #fff;
$shadow: 0 0 3vmin 2vmin;

body {
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: $background;

	> div {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 1rem;
		transform: translatex(-10vmin);
	}
}

.one {
	height: 12vmin;
	width: 40vmin;
	border-radius: 10vmin;
	transform-origin: right bottom;
	transform: translatex(-5rem);
	background: $white;
	box-shadow: $shadow $pink, inset $shadow $pink;
}

.zero {
	border-radius: 50%;
	height: 38vmin;
	width: 38vmin;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: $white;

	&::after {
		content: "";
		width: 60%;
		height: 60%;
		border-radius: 50%;
		background: $background;
	}

	&.first {
		box-shadow: $shadow $green, inset $shadow $green;

		&::after {
			box-shadow: $shadow $green, inset $shadow $green;
		}
	}

	&.second {
		box-shadow: $shadow $blue, inset $shadow $blue;

		&::after {
			box-shadow: $shadow $blue, inset $shadow $blue;
		}
	}
}

const tl = gsap.timeline({ delay: 0.5, repeat: -1, repeatDelay: 2 });
const one = document.querySelector("div.one");
const zeroFirst = document.querySelector("div.zero.first");
const zeroSecond = document.querySelector("div.zero.second");

tl.set(one, { x: "-12vmin" });
tl.from(one, { y: "-150vh", rotate: 90, duration: 1.8, ease: "power4.in" });
tl.to(one, { rotate: 90, duration: 1.8, delay: 0.2, ease: "power4.in" });

tl.from(zeroFirst, { y: "-150vh", duration: 3, delay: 0.5, ease: "bounce" });

tl.from(zeroSecond, {
	x: "80vw",
	rotate: -540,
	duration: 3,
	delay: 0.5,
	ease: "ease"
});