SELECTED

<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<!-- AnimeJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 99;
    overflow: hidden;
}

.loader marquee {
    font-family: Gilroy;
    opacity: 0.1;
    text-transform: uppercase;
    line-height: 180px;
    margin: 0;
    padding: 0;
    color: #646464;
    font-size: 200px;
}

.loader .intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Gilroy;
    text-align: center;
}

.loader .intro h1 {
    font-size: 30px;
    font-weight: 400;
    color: #fff;
}

.intro-title .letter {
    display: inline-block;
    line-height: 1em;
}
</style>
<div class="loader">
            <marquee direction="right" scrollamount="10"
                >Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Temporibus, modi.</marquee
            >
            <marquee direction="left" scrollamount="30"
                >Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Itaque, cupiditate?</marquee
            >
            <marquee direction="right" scrollamount="20"
                >Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Similique, quo.</marquee
            >
            <marquee direction="" scrollamount="40"
                >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Ducimus, dolorem.</marquee
            >
            <div class="intro">
                <h1 class="intro-title">SELECTED</h1>
            </div>
        </div>
<script>
    var textWrapper = document.querySelector(".intro-title");
textWrapper.innerHTML = textWrapper.textContent.replace(
    /([^\x00-\x80]|\w)/g,
    "<span class='letter'>$&</span>"
);

anime
    .timeline({ loop: false })
    .add({
        targets: ".intro-title .letter",
        translateX: [140, 0],
        translateZ: 0,
        opacity: [0, 1],
        easing: "easeOutExpo",
        duration: 1400,
        delay: function(el, i) {
            return 500 + 50 * i;
        }
    })
    .add({
        targets: ".intro-title .letter",
        translateX: [0, -140],
        opacity: [1, 0],
        easing: "easeInExpo",
        duration: 1200,
        delay: function(el, i) {
            return 700 + 50 * i;
        }
    });

TweenMax.to(".loader", 2.2, {
    delay: 5,
    top: "-120%",
    ease: Expo.easeInOut
});
</script>