garethclews/achievement.css

## achievement.css
body {
    width: 100vw;
    height: 100vh;
    padding: none;
    margin: 0;
    overflow: hidden;
    margin: auto auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.port {
    display: flex;
    flex-flow: row nowrap;

    justify-content: center;
}

.popout {
    opacity: 0;
    position: absolute;
    overflow: hidden;
    z-index: -1;
}

.main {
    background-color: #16161c;

    width: 650px;
    height: 150px;

    border-radius: 10px 50px 50px 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);

    display: flex;
    flex-flow: column nowrap;
    padding-left: 50px;
    gap: 10px;

    justify-content: center;

    overflow: hidden;
}

.container {
    width: 600px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    padding-left: 50px;
}


.title {
    color: #fff;
    font-family: 'KG HAPPY';
    font-size: 26pt;
    line-height: 30pt;
    height:40px;
}

.achievement {
    color: #fff;
    font-family: 'Rounded Mplus 1c';
    font-size: 28pt;
    line-height: 12pt;
    width: 500px;
    font-weight: 600;
}


/* LOADING/ICON */

.loading {opacity: 0;}

.ablock {
    font-family: "KG HAPPY Solid";
    color: #ffb600;
    position: absolute;
    z-index: 9;
    margin-left: 35px;
}

.ashadow {
    font-family: "KG HAPPY Shadows";
    color: #ff6b00;
    position: absolute;
    z-index: 8;
    margin-left: 35px;
}

.logo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color:#16161c;
    font-size: 66pt;
}

.loaded {
    opacity: 0;
    position: absolute;
    margin-left: 27px;
    margin-top: 30px;
    color: #07DA8C;
    text-shadow: 0px 0px 4px #000;
}


.emp {
    color: #da103f;
}

## achievement.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="achievement.css">
    <script src="<my fontawesome kit>" crossorigin="anonymous"></script>

    <script src="gsap.min.js" defer></script>
    <script src="jquery.js" defer></script>
    <script src="achievement.js" defer></script>

</head>
<body>
    <div class="port">
        <div class="logo">
            <div class="loading">
                <div class="ablock">A</div>
                <div class="ashadow">A</div>
            </div>
            <div class="loaded"><i class="fa-solid fa-trophy"></i></div>
        </div>
        <div class="popout">
            <div class="main">
                <div class="container">
                    <div class="title">Achievement unlocked</div>
                    <div class="achievement"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

## achievement.js
// -- Variables ----------------------------------------------------------------
const achievement = document.getElementsByClassName("achievement");

var tl = gsap.timeline({repeat: 0});

// -- Functions ----------------------------------------------------------------
// get the name of the most recent follower
function getFollower() {
	return new Promise(function (resolve) {
		const oReq = new XMLHttpRequest();
		oReq.addEventListener("load", reqListener);
		oReq.overrideMimeType("text/plain");
		oReq.open("GET", './achievement.txt');
		oReq.send();

		//will trigger when file loads
		function reqListener () {
			resolve(oReq.responseText)
		}
	})
}


async function parse(data) {
    achievement[0].innerHTML = data;

	// pop in the circular logo
	tl.fromTo('.logo', {scale: 0}, {scale: 1, duration: 0.6, ease: 'elastic'}, 0);
	tl.fromTo('.loading', {opacity: 0}, {opacity: 1, duration: 0.4}, '>');

	// once the logo is moved in, shift it to the left to allow the achievement text in
	// and replace the icon
	tl.to('.logo', {x: -350, delay: 0.3}, '>');
	tl.to('.loading', {opacity: 0, duration: 0.5}, '<');
	tl.to('.loaded', {opacity: 1, duration: 0.4}, '<');

	tl.to('.main', {x: -750}, '<');
	tl.to('.popout', {opacity: 1}, '>');
	tl.to('.main', {x: 0}, '>');

	tl.fromTo('.container', {opacity: 0}, {opacity: 1, duration: 0.3, delay: 0.1}, '>');
	tl.fromTo('.title', {y:30}, {y:-100, duration: 0.7, delay: 1, ease: 'linear'}, '>');
	tl.fromTo('.achievement', {y:100}, {y:0, duration: 1, ease: 'elastic', delay: 0.2}, '>');

	// fade out the text, pull the achievement back in
	tl.to('.achievement', {opacity: 0, delay: 2}, '>');
	tl.to('.main', {x: -750}, '>');
	tl.to('.popout', {opacity: 1}, '>');

	// swap the logo back and move the circle back over
	tl.to('.loaded', {opacity: 0, duration: 0.4}, '<');
	tl.to('.loading', {opacity: 1, duration: 0.5}, '>');
	tl.to('.logo', {x: 0}, '<');
	tl.to('.loading', {opacity: 0, duration: 0.4, delay: 0.5}, '>');

	// finally pop the thing out
	tl.fromTo('.logo', {scale: 1}, {scale: 0, duration: 0.6, ease: 'elastic'}, '>');
}

async function mainLoop() {
	const data = await getFollower();
	parse(data);
}


// -- Actions ------------------------------------------------------------------
mainLoop();
	body {
	width: 100vw;
	height: 100vh;
	padding: none;
	margin: 0;
	overflow: hidden;
	margin: auto auto;

	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	}

	.port {
	display: flex;
	flex-flow: row nowrap;

	justify-content: center;
	}

	.popout {
	opacity: 0;
	position: absolute;
	overflow: hidden;
	z-index: -1;
	}

	.main {
	background-color: #16161c;

	width: 650px;
	height: 150px;

	border-radius: 10px 50px 50px 10px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);

	display: flex;
	flex-flow: column nowrap;
	padding-left: 50px;
	gap: 10px;

	justify-content: center;

	overflow: hidden;
	}

	.container {
	width: 600px;
	height: 100px;
	overflow: hidden;
	position: absolute;
	padding-left: 50px;
	}


	.title {
	color: #fff;
	font-family: 'KG HAPPY';
	font-size: 26pt;
	line-height: 30pt;
	height:40px;
	}

	.achievement {
	color: #fff;
	font-family: 'Rounded Mplus 1c';
	font-size: 28pt;
	line-height: 12pt;
	width: 500px;
	font-weight: 600;
	}



	/* LOADING/ICON */

	.loading {opacity: 0;}

	.ablock {
	font-family: "KG HAPPY Solid";
	color: #ffb600;
	position: absolute;
	z-index: 9;
	margin-left: 35px;
	}

	.ashadow {
	font-family: "KG HAPPY Shadows";
	color: #ff6b00;
	position: absolute;
	z-index: 8;
	margin-left: 35px;
	}

	.logo {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color:#16161c;
	font-size: 66pt;
	}

	.loaded {
	opacity: 0;
	position: absolute;
	margin-left: 27px;
	margin-top: 30px;
	color: #07DA8C;
	text-shadow: 0px 0px 4px #000;
	}


	.emp {
	color: #da103f;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="achievement.css">
	<script src="<my fontawesome kit>" crossorigin="anonymous"></script>

	<script src="gsap.min.js" defer></script>
	<script src="jquery.js" defer></script>
	<script src="achievement.js" defer></script>

	</head>
	<body>
	<div class="port">
	<div class="logo">
	<div class="loading">
	<div class="ablock">A</div>
	<div class="ashadow">A</div>
	</div>
	<div class="loaded"><i class="fa-solid fa-trophy"></i></div>
	</div>
	<div class="popout">
	<div class="main">
	<div class="container">
	<div class="title">Achievement unlocked</div>
	<div class="achievement"></div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	// -- Variables ----------------------------------------------------------------
	const achievement = document.getElementsByClassName("achievement");

	var tl = gsap.timeline({repeat: 0});

	// -- Functions ----------------------------------------------------------------
	// get the name of the most recent follower
	function getFollower() {
	return new Promise(function (resolve) {
	const oReq = new XMLHttpRequest();
	oReq.addEventListener("load", reqListener);
	oReq.overrideMimeType("text/plain");
	oReq.open("GET", './achievement.txt');
	oReq.send();

	//will trigger when file loads
	function reqListener () {
	resolve(oReq.responseText)
	}
	})
	}


	async function parse(data) {
	achievement[0].innerHTML = data;

	// pop in the circular logo
	tl.fromTo('.logo', {scale: 0}, {scale: 1, duration: 0.6, ease: 'elastic'}, 0);
	tl.fromTo('.loading', {opacity: 0}, {opacity: 1, duration: 0.4}, '>');

	// once the logo is moved in, shift it to the left to allow the achievement text in
	// and replace the icon
	tl.to('.logo', {x: -350, delay: 0.3}, '>');
	tl.to('.loading', {opacity: 0, duration: 0.5}, '<');
	tl.to('.loaded', {opacity: 1, duration: 0.4}, '<');

	tl.to('.main', {x: -750}, '<');
	tl.to('.popout', {opacity: 1}, '>');
	tl.to('.main', {x: 0}, '>');

	tl.fromTo('.container', {opacity: 0}, {opacity: 1, duration: 0.3, delay: 0.1}, '>');
	tl.fromTo('.title', {y:30}, {y:-100, duration: 0.7, delay: 1, ease: 'linear'}, '>');
	tl.fromTo('.achievement', {y:100}, {y:0, duration: 1, ease: 'elastic', delay: 0.2}, '>');

	// fade out the text, pull the achievement back in
	tl.to('.achievement', {opacity: 0, delay: 2}, '>');
	tl.to('.main', {x: -750}, '>');
	tl.to('.popout', {opacity: 1}, '>');

	// swap the logo back and move the circle back over
	tl.to('.loaded', {opacity: 0, duration: 0.4}, '<');
	tl.to('.loading', {opacity: 1, duration: 0.5}, '>');
	tl.to('.logo', {x: 0}, '<');
	tl.to('.loading', {opacity: 0, duration: 0.4, delay: 0.5}, '>');

	// finally pop the thing out
	tl.fromTo('.logo', {scale: 1}, {scale: 0, duration: 0.6, ease: 'elastic'}, '>');
	}

	async function mainLoop() {
	const data = await getFollower();
	parse(data);
	}


	// -- Actions ------------------------------------------------------------------
	mainLoop();