GSAP Text Filler effect on hover

<link rel="stylesheet" href="https://codepen.io/GreenSock/pen/xxmzBrw.css">
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<style>
@font-face {
font-display: block;
font-family: Mori;
font-style: normal;
font-weight: 400;
src: url(https://assets.codepen.io/16327/PPMori-Regular.woff) format("woff");
}
body {
font-family: Mori, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #1a1e23;
}
ul {
display: flex;
flex-direction: column;
align-items: flex-start;
list-style-type: none;
li {
padding: 6px 0;
a {
--fill-color: #0ae448;
position: relative;
display: block;
padding: 4px 0;
font: 700 3rem Raleway, sans-serif;
text-decoration: none;
text-transform: uppercase;
-webkit-text-stroke: 2px var(--fill-color);
background: linear-gradient(var(--fill-color) 0 100%) left / 0 no-repeat;
color: transparent;
background-clip: text;
}
}
}
</style>
<ul>
<li>
<a href="#">home </a>
</li>
<li>
<a href="#">archives </a>
</li>
<li>
<a href="#">tags </a>
</li>
<li>
<a href="#">categories </a>
</li>
<li>
<a href="#">about </a>
</li>
</ul>
<script>
console.clear();
const links = gsap.utils.toArray("li a");
links.forEach((link) => {
const t = gsap
.to(link, {
backgroundSize: "100%"
})
.reverse();
link.addEventListener("mouseenter", () => t.reversed(!t.reversed()));
link.addEventListener("mouseleave", () => t.reversed(!t.reversed()));
});
</script>