<nav class="tabbar">
    <ul>
        <li>
            <a href="">
                <svg>
                    <use xlink:href="#homeIcon">
                </svg>
                <span>Home</span>
            </a>
        </li>
        <li class="active">
            <a href="">
                <svg>
                    <use xlink:href="#favoritesIcon">
                </svg>
                <span>Favorites</span>
            </a>
        </li>
        <li>
            <a href="">
                <svg>
                    <use xlink:href="#settingsIcon">
                </svg>
                <span>Settings</span>
            </a>
        </li>
    </ul>
</nav>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="homeIcon" fill="currentColor">
        <path d="M13.1428571,14.5 C13.6571429,14.5 14,14.175507 14,13.6887676 L14,6.38767551 C14,6.14430577 13.9142857,5.90093604 13.6571429,5.73868955 L8.51428571,1.6825273 C8.17142857,1.43915757 7.74285714,1.43915757 7.4,1.6825273 L2.25714286,5.73868955 C2.08571429,5.90093604 2,6.14430577 2,6.38767551 L2,13.6887676 C2,14.175507 2.34285714,14.5 2.85714286,14.5 L13.1428571,14.5 Z M5.42857143,12.8775351 L3.71428571,12.8775351 L3.71428571,6.79329173 L8,3.38611544 L12.2857143,6.79329173 L12.2857143,12.8775351 L10.5714286,12.8775351 L5.42857143,12.8775351 Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="favoritesIcon" fill="currentColor">
        <path d="M7.5125,14.3196446 C6.8625,13.7292662 1.5,9.09057902 1.5,5.54830881 C1.5,3.27113511 3.2875,1.5 5.4,1.5 C6.375,1.5 7.26875,1.92169883 8,2.5120772 C8.73125,1.83735907 9.625,1.5 10.6,1.5 C12.79375,1.5 14.5,3.35547487 14.5,5.54830881 C14.5,9.09057902 9.1375,13.7292662 8.4875,14.2353048 C8.24375,14.5726639 7.75625,14.5726639 7.5125,14.3196446 Z M5.4,3.18679534 C4.18125,3.18679534 3.125,4.28321231 3.125,5.54830881 C3.125,7.40378368 5.96875,10.6086948 8,12.4641697 C9.70625,10.8617141 12.875,7.57246322 12.875,5.54830881 C12.875,4.19887254 11.81875,3.18679534 10.6,3.18679534 C9.86875,3.18679534 9.1375,3.60849417 8.73125,4.28321231 C8.40625,4.78925091 7.675,4.78925091 7.35,4.28321231 C6.8625,3.60849417 6.2125,3.18679534 5.4,3.18679534 Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="settingsIcon" fill="currentColor">
        <path d="M8.16590157,11.9863016 C8.11194132,11.9953113 8.05651821,12 8,12 L3,12 C2.44771525,12 2,11.5522847 2,11 C2,10.4477153 2.44771525,10 3,10 L8,10 C8.05651821,10 8.11194132,10.0046887 8.16590157,10.0136984 C8.57384536,8.84135601 9.68866807,8 11,8 C12.6568542,8 14,9.34314575 14,11 C14,12.6568542 12.6568542,14 11,14 C9.68866807,14 8.57384536,13.158644 8.16590157,11.9863016 Z M11,12 C11.5522847,12 12,11.5522847 12,11 C12,10.4477153 11.5522847,10 11,10 C10.4477153,10 10,10.4477153 10,11 C10,11.5522847 10.4477153,12 11,12 Z"></path>
        <path d="M7.83409843,4.01369835 C7.88805868,4.0046887 7.94348179,4 8,4 L13,4 C13.5522847,4 14,4.44771525 14,5 C14,5.55228475 13.5522847,6 13,6 L8,6 C7.94348179,6 7.88805868,5.9953113 7.83409843,5.98630165 C7.42615464,7.15864399 6.31133193,8 5,8 C3.34314575,8 2,6.65685425 2,5 C2,3.34314575 3.34314575,2 5,2 C6.31133193,2 7.42615464,2.84135601 7.83409843,4.01369835 Z M5,6 C5.55228475,6 6,5.55228475 6,5 C6,4.44771525 5.55228475,4 5,4 C4.44771525,4 4,4.44771525 4,5 C4,5.55228475 4.44771525,6 5,6 Z"></path>
    </symbol>
</svg>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6987202-Tab-bar-active-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
.tabbar {
    --background: #2F3545;
    --shadow: rgba(18, 22, 33, .32);
    --shadow-dark: rgba(18, 22, 33, .48);
    --active: #fff;
    --inactive: #6C7486;
    --r: 0deg;
    --x: 0px;
    width: 280px;
    border-radius: 6px;
    perspective: 180px;
    background: var(--background);
    box-shadow: var(--x) 12px 20px var(--shadow-dark);
    transition: transform .6s ease, box-shadow .6s ease;
    transform: perspective(200px) rotateX(4deg) translateX(var(--x)) rotateY(var(--r)) translateZ(6px);
    ul {
        margin: 0;
        padding: 0 4px;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        li {
            a {
                display: block;
                padding: 16px 0 12px 0;
                text-decoration: none;
                color: var(--inactive);
                transition: color .4s ease;
                position: relative;
                svg,
                span {
                    --z: 0px;
                    display: block;
                    transition: transform .4s ease, filter .4s ease;
                    transform-origin: 50% 50%;
                    transform: translate3d(0, 0, var(--z));
                }
                svg {
                    width: 24px;
                    height: 24px;
                    margin: 0 auto;
                }
                span {
                    text-align: center;
                    margin-top: 12px;
                    font-size: 11px;
                    line-height: 1;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: .8px;
                }
            }
            &.active {
                a {
                    color: var(--active);
                    svg,
                    span {
                        transition-delay: .32s;
                        filter: drop-shadow(0 8px 2px var(--shadow));
                    }
                    svg {
                        --z: 16px;
                    }
                    span {
                        --z: 12px;
                    }
                }
            }
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    font-family: 'Mukta Malar', Arial;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1E2432;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}
View Compiled
$('.tabbar ul li a').on('click', function(e) {

    e.preventDefault();

    let that = $(this),
        li = that.parent(),
        ul = li.parent(),
        div = ul.parent();

    ul.children('li').removeClass('active');

    li.addClass('active');

    if(li.index() == 0) {
        div.css({
            '--r': '-4deg',
            '--x': '16px'
        });
    } else if(li.index() == 2) {
        div.css({
            '--r': '4deg',
            '--x': '-16px'
        });
    } else {
        div.css({
            '--r': '0deg',
            '--x': '0px'
        });
    }

});

External CSS

  1. https://fonts.googleapis.com/css?family=Mukta+Malar:400,500,600

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js