JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="logo">
    <svg id="top" id="Group_895" data-name="Group 895" xmlns="http://www.w3.org/2000/svg" width="56.888" height="57.093" viewBox="0 0 56.888 57.093">
        <path id="Path_281" data-name="Path 281" d="M358.949,145.008h-9.042v2.883h6.157V155.5H337.628V131.119h18.437v8.923h2.884V128.234H348.29v-6.7h17.84v36.86h8.187V155.5h-5.3V118.647H334.743v2.885H345.4v6.7h-10.66v30.157h24.206Z" transform="translate(-326.084 -109.967)" fill="#fff" />
        <path id="Path_282" data-name="Path 282" d="M297.017,137.921H353.9V80.828H297.017Zm54-2.884H299.9V83.71H351.02Z" transform="translate(-297.017 -80.828)" fill="#fff" />
    </svg>
    <div class="logo-text">
        <svg xmlns="https://www.w3.org/2000/svg" width="18.686" height="20.764" viewBox="0 0 18.686 20.764">
            <path id="Path_271" data-name="Path 271" d="M33.315,371.8c3.527,0,7.707,1.422,7.707,3.953v2.477H38.407v-1.48c0-1.678-2.646-2.5-5.005-2.5-4.695,0-7.651,3.186-7.651,7.793,0,4.636,3.015,8.051,7.735,8.051,1.793,0,5.376-.539,5.376-2.5V384.94H34.936v-2.218h6.542v5.633c0,3.1-5.177,4.209-8.191,4.209a10.131,10.131,0,0,1-10.495-10.44c0-5.944,4.266-10.324,10.523-10.324" transform="translate(-22.792 -371.8)" fill="#fff" />
        </svg>
        <svg xmlns="https://www.w3.org/2000/svg" width="15.018" height="20.082" viewBox="0 0 15.018 20.082">
            <path id="Path_272" data-name="Path 272" d="M118.209,391.143h2.5V375.47h-2.5v-2.189h14.535v4.666h-2.474v-2.335h-6.713v6.458h7.111V384.4h-7.111v6.627h7.2v-2.416h2.474v4.749H118.209Z" transform="translate(-118.209 -373.281)" fill="#fff" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="16.213" height="20.084" viewBox="0 0 16.213 20.084">
            <path id="Path_273" data-name="Path 273"...

CSS

body {
    margin: 0;
    background: black;
    padding-top: 50px;
}

div#loader {
    width: 100vw;
    height: 100vh;
    background: #00051C;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 1;
    transition: 1s;
}

div#loader.active {
    opacity: 0;
}

button {
    position: relative;
    z-index: 999;
}

div#logo {
    text-align: center;
    width: 194px;
    margin: auto;
}

div#logo svg#top {
    transform: translate3d(0, -30px, 0);
    opacity: 0;
    transition: 1s 1.1s;
}

div#logo.active svg#top {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

div.logo-text {
    text-align: center;
    margin-top: 10px;
}

div.logo-text svg {
    transition: cubic-bezier(0.01, 0.03, 0.39, 0.99) 1.5s;
}

div.logo-text svg:nth-child(1) {
    transform: translate3d(-35vw, 0, 0);
}

div.logo-text svg:nth-child(2) {
    transform: translate3d(-25vw, 0, 0);
}

div.logo-text svg:nth-child(3) {
    transform: translate3d(-15vw, 0, 0);
}

div.logo-text svg:nth-child(4) {
    transform: translate3d(-10vw, 0, 0);
}

div.logo-text svg:nth-child(5) {
    opacity: 0;
    transition-timing-function: cubic-bezier(0.49, 0.03, 1, 0.98) !important;
}

div#logo.active div.logo-text svg:nth-child(5) {
    opacity: 1;
}

div.logo-text svg:nth-child(6) {
    transform: translate3d(10vw, 0, 0);
}

div.logo-text svg:nth-child(7) {
    transform: translate3d(15vw, 0, 0);
}

div.logo-text svg:nth-child(8) {
    transform: translate3d(20vw, 0, 0);
}

div.logo-text svg:nth-child(9) {
    transform: translate3d(25vw, 0, 0);
}

div.logo-text svg:nth-child(10) {
    transform: translate3d(35vw, 0, 0);
}

div#logo.active div.logo-text svg {
    transform: translate3d(0, 0, 0);
}

div#logo .made-in {
    overflow: hidden;
    text-align: right;
}

div#logo .made-in svg {
    transform: translate3d(0, 100%, 0);
}

div#logo.active .made-in svg {
    transform: translate3d(0, 0%, 0);
}

JavaScript

document.querySelector('button').addEventListener('click', function() {
    document.querySelector('#logo').classList.toggle('active')
    document.querySelector('#loader').classList.toggle('active')
})