• HTML
• CSS
• JS

HTML

<ul class="list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@700&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Kanit',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#222;
}
.list
{
    position:relative;
    display:flex;
    flex-direction:column;
}
.list li
{
    list-style:none;
}
.list li a
{
    position:relative;
    display:flex;
    font-size:4em;
    line-height:1em;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
}
.list li a span
{
    position:relative;
    transition:0.5s;
    overflow:hidden;
}
.list li a span .out
{
    display:inline-flex;
}
.list li a:hover span .out
{
    transform:translateY(-100%);
}
.list li a span .in
{
    position:absolute;
    left:0;
    color:#2aa1ff;
    transform:translateY(100%);
}
.list li a:hover span .in
{
    transform:translateY(0);
}

JS

let list = document.querySelectorAll('.list li a');

list.forEach(link => {
    let letters = link.textContent.split("");
    link.textContent = "";
    letters.forEach((letter,i) => {
        i += 1;
        let span = document.createElement('span');
        let delay = i/15;
        
        let letterOut = document.createElement("span");
        letterOut.textContent = letter;
        letterOut.style.transitionDelay = `${delay}s`;
        letterOut.classList.add('out');
        span.append(letterOut);
        
        let letterIn = document.createElement("span");
        letterIn.textContent = letter;
        letterIn.style.transitionDelay = `${delay}s`;
        letterIn.classList.add('in');
        span.append(letterIn);
        
        link.append(span);
        
    })
})

/* All credits to: https://www.youtube.com/watch?v=8saYt5fc2Pc */